LION MEDIAでサイトを始める際の基本的な設定を説明していきます。尚、本記事はドメインを取得してレンタルサーバにWordPressをインストールしてLION MEDIAのテーマをインストールしているところをスタート地点にしています。もしまだ実施していない方は先にこちらの手順を行ってください。
まずはWordPressの管理画面で「外観」→「カスタマイズ」を選択して設定変更画面を表示します。以下各メニューで設定すべき箇所を説明していきます。
尚、各設定が終わった後、右上の「公開」ボタンを押すのを忘れないようにしましょう。押し忘れると設定した内容は保存されず一からやり直しになります。
基本設定[LION用]
記事ビューレイアウト設定
変更したほうがいい箇所だけかいつまんで説明します。まずは「記事ビューレイアウト設定」です。デフォルトは「ノーマル（default）」ですが、デモサイトは「ノーマル(PC)/ワイド(スマホ)」にしています。これはトップページの記事一覧をパソコンでは２カラム、スマホでは１カラムで表示するための設定です。
カラムとは列のことです。パソコンでは２列表示、スマホでは１列表示になるようになります。スマホはパソコンより画面が小さいですから、記事を２つ並べると１つずつの画像は小さくなるし文字もごちゃごちゃしてしまいます。ユーザーの使いやすさを考えるとモバイル版は１カラムのほうが親切なのではないかと思って私はPC２カラム／スマホ１カラムの表示にしています。
ブログ形式のサイトの場合、トップページからの流入より各記事への直接流入が多くなるので、トップページの作りって私はそこまで気にしてないんですけどね。ただせっかく機能があるので使っています。
Copyrightの設定
次は「Copyrightの設定」です。「Copyrightの下に表示されるFITおよびWordPressへのリンクを非表示にする」にチェックを入れます。
これを設定しなかった場合、上の画面コピー左下の赤枠部分のように「（サイトタイトル）by FIT-Web Create. Powered by WordPress.」という表示が出ます。出たからどうというわけではないのですが、「FITのWordPressテーマ使ってますよ！」と宣伝することになります。FITさんのテーマにお世話になるので是非残しておきたいという方は無理に消さなくても良いです。
ちなみにLION MEDIAを散々使い倒しているのに私は必ず消しています（FITさん、ごめんなさい…）。あまり露骨に「このテーマ使ってます！」って宣言するのも嫌なので。でも、このサイトではしっかりLION MEDIA宣伝させてもらいますんで許してください（このサイトでもコピーライトは消してますが…。）
SEO設定[LION用]
TOPページの<title>
まずは「TOPページの<title>」の設定です。ここが未設定だとトップページのタイトルが「キャッチフレーズ | サイト名」の順番になります。デモサイトの場合「LION MEDIA ノンカスタマイズサンプル | ガジェットブログ」になります。SEO的にはキーワードを含むキャッチフレーズが前に来るほうが良いという意図があると思いますが、どうしても変えたい人は変更してください。
TOPページの<meta description>
次に「TOPページの<meta description>」です。これは結構重要です。Googleなどの検索で表示されるサイトタイトルの下の文章になります。検索エンジンからの流入を期待しているのであれば、自分のサイトの情報をわかりやすく説明する文章を記載しておきましょう。
ちなみに上の画面コピーがPCのGoogle検索結果で表示されるLION MEDIA公式ページのmeta desctriptionです。効果的なmeta desctriptionの文字数は約90文字と言われています（スマホ画面で表示されるmeta desctriptionの長さが約90文字なので）。長ったらしくならないよう、簡潔にサイトを紹介しましょう。
高度な設定 [LION用]
</head>直上の自由入力エリア
「</head>直上の自由入力エリア」の設定です。
この項目はサイトのヘッダー情報と呼ばれる<head>～</head>タグの間に記述を追記するためのものです。本来phpファイルを編集しなければいけないのですが、それを設定画面から記述できるという便利な機能です。
今からやろうとしているのは<head>～</head>タグの間にGoogleAnalyticsのコードを埋め込むという作業になります。
GoogleAnalytics画面から以下画面コピーの流れで、「グローバル サイトタグ（gtag.js）」を展開します。
表示されたコードをコピーして先ほどの「</head>直上の自由入力エリア」に貼り付けます。
デザインスキン設定[LION]
ベースデザインを選択
最後にデザインスキン設定です。サイト全体の配色を決めていきます。まず「ベースデザインを選択」です。初期設定は「DARK(default)」ですが、もう一つ「LIGHT」が選択できます。
上記の画面コピーの通り、メニューバー及びフッター領域の色が黒ベースか白ベースかになります。ベースデザインとこの後設定するテーマカラーは組み合わせを注意しなければいけません。
「ほんのりリッチなデザインに仕上げる」のチェックボックスは以下ような違いがあります。
ちょっとわかりにくいかもしれませんが、チェック有りはサムネイル画像の枠に少し影が付きます。画像が引き立つ効果がありますが、フラットなデザインが好きな人もいるので好みで設定してください。
テーマカラーを選択
次に「テーマカラーを選択」です。ここで選択した色がサイトタイトルの背景、サイドバーウィジェットのタイトル下の線左側、ページ下の「Back to Top」の色、リンクの文字色、タグクラウドの色などになります。
色指定はカラーチャートを選択することもできますが、カラーコード（16進数で記述された色のコード）で指定できます。
この後記事の設定時に「投稿スキン設定[LION用]」で見出しの色を決める時にテーマカラーと合わせたほうがデザインに統一感が出るので（無理に合わせなくてもいいですが）、カラーコードは記録しておいたほうがよいでしょう。ちなみに私は配色を決める時に以下のサイトでカラーコードを調べています。
テーマカラーを選択するとき少し気を付けたほうが良いのがベースデザインとの相性です。例えばDARKテーマを選んでテーマカラーを暗い色にした時、フッターにタグクラウドを入れるとこうなります。
見えにくい、というより全然見えませんね。
今度はLIGHTテーマでテーマカラーをパステル系の色にしてみます。
サイトタイトルは白字の画像を使っていますが、サブタイトルや「Back to Top」の文字はデフォルトですし、タグクラウドはやっぱり見えにくいです。
LION MEDIAのデフォルトのテーマカラーは#F0B200(にぎやかな黄みの橙色)です。DARKとLIGHTのどちらのテーマを使うにしても、クラシカルで落ち着いた色合いや優しい感じの柔らかい色は少し扱いにくく、明度も彩度も高いビビットな色のほうが合っていると言えるでしょう。例えば#17edd0(にぎやかな青緑)とか。色の選択肢が狭まると扱いたい情報とイメージが合わなくなる可能性もあります。サンプルサイトの場合#1b1c80(濃い青)というかなり暗い色をテーマカラーにして、タグクラウドをサイドバーに置くことで問題を回避していますが、タグの数が多くなってくるとサイドバーが縦に伸びすぎてしまう恐れもあります。タグクラウドを使わなければいいだけの話なのですが、タグはカテゴリよりも詳細な分類ができて記事への導線にもなるので、特にブログ型のサイトでは是非使いたいところです。
CSSをカスタマイズすることでこの問題をクリアすることもできますが、今回は標準機能の説明なのでカスタマイズの説明はまた後日にしたいと思います。