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

投稿記事の記事間に線を引くカスタマイズ

Simplicityではデフォルトで記事と記事のあいだに線がない。投稿記事の一覧に外枠の線があるので全体のバランスが今ひとつかな?と。方法としては外枠の線を消去するか、記事のあいだに線を引くか、で後者を選んだ。こういうのは個人の趣味だよね。

投稿記事の記事間に線を引くコード

/* 投稿記事の記事間に線 */
#main .entry {
border-bottom: 1px solid #ddd;
padding-bottom: 15px;
}

カンタンなCSSの説明

border-bottom で下ボーダーのスタイルや太さ、色を指定している。この場合なら、1px solid で1ピクセルの線を #ddd 淡いグレー色で引っ張ってよ、だ。線の種類を変えたければ、double 2本線や dashed 破線、 dotted 点線 などに変えればOK。

padding-bottom で下パディングを指定している。15ピクセルにしてみた。これぐらいが記事と記事のあいだに線があっても違和感がないかな、と。

関連記事の記事間に線を引くカスタマイズ

関連記事は各記事の下に出てくる一覧だ。表示する記事の数は「外観」→「カスタマイズ」から指定できる。記事数が多くないと、あまり意味がないカスタマイズかもしれないが、ついでのなので最初にやっておいた。

関連記事の記事間に線を引くコード

/* 関連記事の記事間に線 */
#main .related-entry {
border-bottom: 1px solid #ddd;
padding-bottom: 10px;
}

カンタンなCSSの説明

投稿記事一覧では padding-bottom で指定した下パディングの大きさを15ピクセルから10ピクセルに変えてある。いろいろな数値を入れ、プレビューで確認したりして、これに落ち着いた。それ以外は同じ。

線もデザインのひとつ

Simplicityのデフォルトに線がないのは理解できる。シンプルを追求するなら不要な要素だ。たしかに、無意味な線が目立つようなサイトは趣味を疑う。個人的には、グリットデザインってやつが嫌いではない。線もデザインの重要なひとつだと思っているからね。最近はスマートフォンやタブレット端末での見た目や使いやすさを重視されているかもしれないけれど。