Simplicity2で記事とサイドバーの背景色をカスタマイズ

Simplicity2のカスタマイズ備忘録だ。WordPressのテーマSimplicity2で、記事の背景色を変更してみた。CSSのコードを貼ってある。おまけに、サイドバーの背景色変更も付けておいた。

Simplicity2のバージョンは2.6.3。

CSS変更の注意

WordPress上で「外観」→「テーマの編集」にある「スタイルシート(style.css)」に変更したいコードを追加していく。その前に2つほど気をつけておくことを。

CSSのカスタマイズは子テーマで

親テーマを直接触るなんて怖くてできない。以下のサイトで「Simplicity2カスタマイズ用の子テーマファイル」をダウンロード。これ、常識。

テーマをカスタマイズするなら親テーマの直接編集はお勧めできません。というのも、ダウンロードページで配布しているテーマファイルを直接編集すると、アップデート時に編集下部分がが上書きされ、せっかくのカスタマイズが全て消えてしまいます。それを防ぐ

変更していなければブラウザのキャッシュをクリアを

変更されていなくても、ブラウザのリロード(再読込)をすれば、たいていはCSSの変更を反映してくれるはず。もし、変更されていない場合はブラウザのキャッシュをクリア(スーパーリロード)を試してみる。
(例)Windows
Firefox:Ctrl + F5 または Ctrl + Shift + R
Google Chrome:Ctrl + F5 または Shift + F5

記事の背景色をカスタマイズ

「カスタマイザー」→「背景色」をデフォルトの白から生成り色に変えた。各記事の背景色もそれに合わせてみる。生成り色は #fbfaf5 だ。

記事の背景色を変更するコード

/* 記事部分の背景色 */
#main {
    background-color: #fbfaf5;
}

#fbfaf5 の部分は任意の色に変えればよし、と。

サイドバーの背景色を変更

ついでに、サイドバーの背景色も変えてみた。

サイドバーの背景色を変更するコード

/* サイドバーの背景色 */
#sidebar {
    background-color: #fbfaf5;
} 

とてもシンプル。 #main や #sidebar の部分を別にすれば、応用が効くかと。

背景色を変える理由

最近は、文字色を黒(#000 や #000000)ではなく灰色にするのが主流だ。真っ黒だと逆に見づらいというのが理由みたいだ。でも、個人的には背景が白いほうが目が痛い。なので真っ白をやめてみた。まあ、ほとんど見た目は変わらないんだけどね。PCなどのデバイスで明度をいじったら、色の設定なんて微々たる影響しかないだろう。ほぼ、自己満足の世界だ。