【LION BLOG】サイドバーの背景色をカスタマイズする方法

【LION BLOG】サイドバーの背景色をカスタマイズする方法

当サイトの『LION BLOG』をご利用されている方からご相談を頂いたのでご紹介したいと思います。

ご相談の内容は、「『LION BLOG』のサイドバーの色を白に変更したい」というものです。

 

『LION BLOG』のサイドバーって薄いグレーをしています。メイン(アーカイブ記事が表示されるところ)の背景は白なので、サイドバーの色も白にすると全体的に統一感が増し、シンプルなイメージな印象になりそうですね(個人的意見です)。

『LION BLOG』のサイドバー

 

サイドバーの背景色を変更するには、CSSを触らなといけません。でも簡単なので安心してください。

STEP 1 『LION BLOG』カスタマイザーを開く

ダッシュボード「外観」カスタマイズ

まずは、WordPressのダッシュボードの 外観 > カスタマイズ でカスタマイザーを開きましょう。

 

STEP 2 追加CSSをクリック

カスタマイザーが開いたら、追加CSSをクリックします。カスタマイザーの一番下の項目です。

 

STEP 3 CSSを追加する

「追加CSS」をクリックすると、CSSの追加ができるフォームが開きます。そこに、次の一文を追加します。


body{background:#FFF}

『LION BLOG』サイドバーの色を変更する

」の部分はコメントです。あとから見たときにわかりやすいように入れました。追加しなくても問題ありません。

body{background:#FFF}」ここは色を定義するところです。

#FFF の部分が色を指定しています。「#」以降の「FFF」の部分を変更すると他の色に変更することができます。コードはWEB色見本 原色大辞典 – HTMLカラーコードで確認できます。(私が使っているサイトです。)

 

CSSを追加した『LION BLOG』がコチラです。白に変更することができました。

『LION BLOG』サイドバーを白に変更

 

本当に簡単にできました。変更したい方は試してみてください。

 

関連記事

少し前に『LION BLOG』サイドバーの背景色を変更する方法をご紹介しましたが、背景色を「白」にして検索ウィジェットを設置した場合、背景に溶け込んでしまい見づらくなってしまいます。そこで、検索ボックスの背景色を変更(カスタマイズ)する[…]

【LION BLOG】サイドバーに設置した検索ウィジェットを『LION MEDIA』風にカスタマイズ
広告