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

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

最終更新日:2018.06.03


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

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

 

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

 

『LION BLOG』にはどんなカスタマイズ項目があるのって方はこちらから。

『LION BLOG』カスタマイズの使い方【項目一覧】

『LION MEDIA』ってなぁに? どんな機能があるのって方はこちらをご覧ください。

『LION MEDIA』はWordPress初心者にオススメのテーマ!

『LION MEDIA』カスタマイズの使い方【基本と設定一覧】初心者向け

ベースデザインの選択

ベースデザインの選択

ベースデザインは、「DARK(デフォルト)」「LIGHT」「CONTRAST」「SEPARATE」の4種類から選ぶことができます。『LION MEDIA』では選択肢が2種類しかなかったので、ここも『LION BLOG』と『LION MEDIA』の違うところですね。

ベースデザインの選択

 

では、どんなデザインなのか見ていきましょう。

(基本設定:2カラム/記事ビューは画像レフト。TOP画像の設定なし。)

 

DARK:ダーク(デフォルト)

落ち着いた雰囲気ですね。

『LION BLOG』ベースデザインDARK

ヘッダー最上部のエリア(最新記事のお知らせ表示):

サイトタイトル:白文字

サイトタイトルエリアの背景:濃いグレー

 

LIGHT:ライト

DARKに比べると めっちゃ明るいですね。

『LION BLOG』ベースデザイン LIGHT

ヘッダー最上部のエリア(最新記事のお知らせ表示):サイドバーと同じ色

サイトタイトル:

サイトタイトルエリアの背景:

 

もうひとつ変わったところがあります。わかりますか?

 

「サンプルページ」と表示されているメニューバーバーの両端が、ブラウザーの枠(画面)いっぱいまで伸びています

 

CONTRAST:コントラスト

LIGHTと似ていますが、ヘッダー最上部エリアの黒が効いていますね。

『LION BLOG』ベースデザイン CONTRAST

ヘッダー最上部のエリア(最新記事のお知らせ表示):

サイトタイトル:

サイトタイトルエリアの背景:

メニューバーがDARKと同じく短めデザインです。

 

SEPARATE:セパレート

CONTRAST + さりげない心遣い

『LION BLOG』ベースデザイン SEPARATE

ヘッダー最上部のエリア(最新記事のお知らせ表示):

サイトタイトル:

サイトタイトルエリアの背景:

メニューバーは短め

アーカイブ記事エリアとメニューエリアを区切るラインとスペースが挿入されました。

 

メイン画像を設定している場合のイメージ

SEPARATEでメイン画像を設定してみました。

『LION BLOG』ベースデザイン SEPARATET メイン画像あり

アーカイブ記事エリアと先ほど挿入されたスペースエリアの間にメイン画像が配置されました。

メイン画像を設定すると、ちょっとカッコよくなりました。(こはるの自己満足・・・笑)

 

ほんのりリッチなデザインに仕上げるってどういうこと?

ほんのりリッチに仕上げる

「ほんのりリッチなデザインに仕上げる」にチェックを入れると、アーカイブ記事やランキング記事のアイキャッチ画像に影ができ、立体的に見えます。

さりげなく、リッチに仕上がっていて、言われないと気づかないかも・・・。

『LION BLOG』ベースデザイン ほんのりリッチ仕上げ

 

 

 

フッター部分はどうなるの?

ベースデザインを変更しても、フッターデザインは変更ありませんでした。背景色も黒で統一されていました。

フッターデザインのイメージ

広告

メインカラーの選択

『LION BLOG』デザインスキン メインカラーの選択

メインカラーは「SKY」「GREEN」「ORANGE」「PINK」「RED」「PURPLE」「NAVY」の7種類と「Color Pickerからメインカラーを選ぶ」(オリジナルカラーの作成)から選ぶことができます。

メインカラーを選択

 

文字だけで見ていてもよくわからないと思うので、設定されている7色のイメージをどうぞ。

メニューバー

メニューバーのカラーイメージ

フッター「Back to Top」

「back to top」のカラーイメージ

 

並べるとカラフルで美しいですね。少し抑えめな配色で目にやさしい。

 

Color Pickerから選ぶ

設定されている7色以外に、自分でオリジナルカラーを選ぶことができます。それが、「Color Picker から選ぶ」という項目です。

色を選択」をクリックすると、カラーピッカーが表示されます。ピッカーから好きな色を選ぶか、「色を選択」ボタンの横にあるボックスに、カラーコードを直接入力して指定することもできます。

Color Pickerから選ぶ

 

メインカラーを設定すると、どこに反映されるの?

「トップページのアーカイブ投稿記事」「サイトバーエリア」「カテゴリー・アーカイブページ」「投稿ページ」について調べてみました。

 

アーカイブ投稿記事

・記事と記事を区切るライン
・「続きを読む」ボタンの文字とライン
・タイトルと「続きを読む」ボタンにマウスをのせた時

アーカイブ投稿記事のメインカラー

 

サイドバーエリア

・ウィジェットとウィジェットを区切るライン
・ウィジェットタイトルの下線(「最近の投稿」「最近のコメント」など)

 

メインカラー サイドバーエリア

 

アーカイブページ

・アーカイブタイトル(年月やカテゴリ名など)の1文字目
・アーカイブタイトルの下線

メインカラー アーカイブページ

 

投稿ページ

・「前次の記事」表示部分、記事のタイトル
・「関連する記事」下のライン、記事のタイトル
・「投稿一覧」ボタン
・「関連する記事」下のライン、記事タイトル
・「コメントを書く」下のライン、送信ボタン

メインカラー 投稿ページ

 

 

【デザインスキン設定】で、ベースデザインとメインカラーを設定するだけで、いろんなところの色が変更されます。サイト運営を始めて、ちょっと雰囲気を変えたいなぁって思ったら、簡単に変更できるのはとても便利ですね。

次は、『LION BLOG』カスタマイズ【広告設定】の使い方について解説します。

 

『LION BLOG』にはどんなカスタマイズ項目があるのって方はこちらから。

『LION BLOG』カスタマイズの使い方【項目一覧】

『LION MEDIA』ってなぁに? どんな機能があるのって方はこちらをご覧ください。

『LION MEDIA』はWordPress初心者にオススメのテーマ!

『LION MEDIA』カスタマイズの使い方【基本と設定一覧】初心者向け

広告