色替え」タグアーカイブ

サイドバーデザインのカスタマイズ(色替え)

ちょっと素っ気ないサイドバーに色を付けたいと思います。

sidebarsidebar3

 

ダッシュボード→テーマ編集→Twenty Twelve: スタイルシート (style.css)

スタイルシート (style.css)をカスタマイズします。

 

選択されている部分がサイドバーの部分です。

上の方にも /* Sidebar */ と書いてますね。

sidebar1

 

624行目に background-color:#82c4ff; と記述。

その後ファイルを更新すればOK。

sidebar2

 

サイドバーが白色から水色になりました。

sidebarsidebar3

 

あまりにもシンプルデザインだったので、サイドバーの色を

さわやかな水色に変えてみました。

 

追記)

後日、見出しの色を変えたので

それに合わせてデザインも変えてみました。

sidebar-change (5)

 

見出しの色を変えた時の記事。

記事中の見出しに色を付けたいと思います。見出しが見やすくなると記事が読みやすくなって読者に喜ばれます。

 

background-color:#82c4ff; 

sidebar-change (6)

 

background-color:#f5deb3; 

sidebar-change (4)

上記のように記述を変えると

 

これから

sidebar-change (1)

 

こうなりました。

sidebar-change (2)

 

見出しの色合いに合わせました。

sidebar-change (5)

 

<参考リンク>

初めてのワードプレス カスタマイズ

スポンサードリンク