『LION BLOG』カスタマイズ【デザインスキン設定】の使い方：初心者向け

最終更新日：2018.06.03

WordPressの無料テーマ『LION BLOG』について解説しているページです。

今回のテーマは、カスタマイズ【デザインスキン設定】の使い方についてです。

デザインスキン設定では、サイトのベースデザイン、メインカラーの設定を行います。色を変えるだけで、サイトの雰囲気がまったく違うものに変わります。自分の作りたいサイトのイメージに合わせて設定してみましょう。

ベースデザインの選択

ベースデザインは、「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』カスタマイズ【広告設定】の使い方について解説します。