最終更新日：2018.06.03
WordPressの無料テーマ『LION BLOG』について解説しているページです。
今回のテーマは、カスタマイズ【デザインスキン設定】の使い方についてです。
デザインスキン設定では、サイトのベースデザイン、メインカラーの設定を行います。色を変えるだけで、サイトの雰囲気がまったく違うものに変わります。自分の作りたいサイトのイメージに合わせて設定してみましょう。
『LION BLOG』にはどんなカスタマイズ項目があるのって方はこちらから。
『LION MEDIA』ってなぁに？ どんな機能があるのって方はこちらをご覧ください。
ベースデザインの選択
ベースデザインは、「DARK（デフォルト）」「LIGHT」「CONTRAST」「SEPARATE」の4種類から選ぶことができます。『LION MEDIA』では選択肢が2種類しかなかったので、ここも『LION BLOG』と『LION MEDIA』の違うところですね。
では、どんなデザインなのか見ていきましょう。
（基本設定：２カラム/記事ビューは画像レフト。TOP画像の設定なし。）
DARK：ダーク（デフォルト）
落ち着いた雰囲気ですね。
ヘッダー最上部のエリア（最新記事のお知らせ表示）：黒
サイトタイトル：白文字
サイトタイトルエリアの背景：濃いグレー
LIGHT：ライト
DARKに比べると めっちゃ明るいですね。
ヘッダー最上部のエリア（最新記事のお知らせ表示）：サイドバーと同じ色
サイトタイトル：黒
サイトタイトルエリアの背景：白
もうひとつ変わったところがあります。わかりますか？
「サンプルページ」と表示されているメニューバー。バーの両端が、ブラウザーの枠（画面）いっぱいまで伸びています。
CONTRAST：コントラスト
LIGHTと似ていますが、ヘッダー最上部エリアの黒が効いていますね。
ヘッダー最上部のエリア（最新記事のお知らせ表示）：黒
サイトタイトル：黒
サイトタイトルエリアの背景：白
メニューバーがDARKと同じく短めデザインです。
SEPARATE：セパレート
CONTRAST + さりげない心遣い
ヘッダー最上部のエリア（最新記事のお知らせ表示）：黒
サイトタイトル：黒
サイトタイトルエリアの背景：白
メニューバーは短め
アーカイブ記事エリアとメニューエリアを区切るラインとスペースが挿入されました。
メイン画像を設定している場合のイメージ
SEPARATEでメイン画像を設定してみました。
アーカイブ記事エリアと先ほど挿入されたスペースエリアの間にメイン画像が配置されました。
メイン画像を設定すると、ちょっとカッコよくなりました。（こはるの自己満足・・・笑）
ほんのりリッチなデザインに仕上げるってどういうこと？
「ほんのりリッチなデザインに仕上げる」にチェックを入れると、アーカイブ記事やランキング記事のアイキャッチ画像に影ができ、立体的に見えます。
さりげなく、リッチに仕上がっていて、言われないと気づかないかも・・・。
フッター部分はどうなるの？
ベースデザインを変更しても、フッターデザインは変更ありませんでした。背景色も黒で統一されていました。
メインカラーの選択
メインカラーは「SKY」「GREEN」「ORANGE」「PINK」「RED」「PURPLE」「NAVY」の７種類と「Color Pickerからメインカラーを選ぶ」（オリジナルカラーの作成）から選ぶことができます。
文字だけで見ていてもよくわからないと思うので、設定されている７色のイメージをどうぞ。
メニューバー
フッター「Back to Top」
並べるとカラフルで美しいですね。少し抑えめな配色で目にやさしい。
Color Pickerから選ぶ
設定されている７色以外に、自分でオリジナルカラーを選ぶことができます。それが、「Color Picker から選ぶ」という項目です。
「色を選択」をクリックすると、カラーピッカーが表示されます。ピッカーから好きな色を選ぶか、「色を選択」ボタンの横にあるボックスに、カラーコードを直接入力して指定することもできます。
メインカラーを設定すると、どこに反映されるの？
「トップページのアーカイブ投稿記事」「サイトバーエリア」「カテゴリー・アーカイブページ」「投稿ページ」について調べてみました。
アーカイブ投稿記事
・記事と記事を区切るライン
・「続きを読む」ボタンの文字とライン
・タイトルと「続きを読む」ボタンにマウスをのせた時
サイドバーエリア
・ウィジェットとウィジェットを区切るライン
・ウィジェットタイトルの下線（「最近の投稿」「最近のコメント」など）
アーカイブページ
・アーカイブタイトル（年月やカテゴリ名など）の１文字目
・アーカイブタイトルの下線
投稿ページ
・「前次の記事」表示部分、記事のタイトル
・「関連する記事」下のライン、記事のタイトル
・「投稿一覧」ボタン
・「関連する記事」下のライン、記事タイトル
・「コメントを書く」下のライン、送信ボタン
【デザインスキン設定】で、ベースデザインとメインカラーを設定するだけで、いろんなところの色が変更されます。サイト運営を始めて、ちょっと雰囲気を変えたいなぁって思ったら、簡単に変更できるのはとても便利ですね。
次は、『LION BLOG』カスタマイズ【広告設定】の使い方について解説します。
『LION BLOG』にはどんなカスタマイズ項目があるのって方はこちらから。
『LION MEDIA』ってなぁに？ どんな機能があるのって方はこちらをご覧ください。