何度でも言います、Simplicityはほんとカスタマイズしやすいテーマだと思います、えむ氏（@mlog_xyz）です。
友達のブログデザイン作業が一段落して、やっと自分のブログデザインの構想を練る作業に入りました。
「こんなことできるかな？」とか考えてテーマを試しにいじってみるのですが、Simplicityは細かく作ってあるので、ほんとにわかりやすいです。
これはほんとお世辞じゃなくて、カスタマイズしたい箇所がすぐに分かるし、いじりたいテンプレートだけ子テーマに追加すればいいし、元からファイル構造が細かくなっているおかげで、PHPのことはほとんど知識がない僕でもカスタマイズがしやすいです。
もうこれは声を大にして言っちゃいます。
Simplicityは、僕が知る最高のWordpressテーマであり、僕が知る唯一のWordpressテーマです！
記事ごと、サイドバーごとに枠線で囲む
ブログのトップページで記事ごとやサイドバーのウィジェットごとに枠線で囲むカスタマイズをしたかったんですが、そういった方法を紹介したブログがなかったので自分でやってみました。
まずは見てもらったほうが早いので、カスタマイズのビフォーアフターを見てください。
ビフォー – Simplicityデフォルトの状態
トップページ
個別投稿ページ
カテゴリーページ
Simplicityのデフォルトはこんな感じです。わかりやすいように背景を画像にしています。トップページやカテゴリーページでは、1つ1つの記事ごとではなく、すべての記事をひとつの枠線で囲ってしまっています。サイドバーは背景に紛れてよくわからなくなってしまいます。
WordPress管理画面 > レイアウト（全体・リスト） > 「サイドバーの背景を白色に」という項目にチェックをいれるとこんな感じです。これまたすべてのサイドバーウィジェットを1つの枠線で囲ってしまっています。
アフター - CSSでカスタマイズ後
次にアフターです。
トップページ
個別投稿ページ
カテゴリーページ
なんということでしょう。匠の粋な計らいで、記事ひとつひとつが枠線で囲まれています。サイドバーもウィジェットごとに枠線で囲まれています。
カスタマイズ方法
方法なんですが、以下のコードをスタイルシートに書き加えただけです。Simplicityの子テーマのresponsive.cssにね。（完全レスポンシブじゃない人はstyle.cssに記述しましょう。）
/* 枠線 ************************************/
#main {
background: transparent;
border: none;
}
.single #main, .page #main {
border: 5px solid #000;
border-radius: 0;
background:#FFF;
}
.home #main, .archive #main, .search #main {
padding: 0 !important;
}
.entry {
border: 5px solid #000;
padding: 10px;
background: #FFF;
}
#sidebar{
border:none;
background: transparent;
padding: 0;
}
#sidebar .widget {
border: 5px solid #000;
padding: 10px;
background: #FFF;
}
いちおう説明します。
まず2～5行目で、デフォルトにある記事部分の枠線を消し、背景も透過させています。
そして、6～10行目で、個別投稿ページと固定ページに枠線を入れ、背景を白にしてます。（枠線は角丸にならないようにしています）
11～13行目で、トップページ、カテゴリーページ、検索結果ページの内側の余白を0にしています。
14～18行目で、トップページ、カテゴリーページ、検索結果ページに表示される記1つ1つの記事ごとに枠線を入れ、背景を白にしてます。（枠線は角丸にならないようにしています）
19～23行目で、「サイドバーの背景を白色に」という項目にチェックをいれると枠線ができる部分の枠線を消し、背景も透過させています。
24～28行目で、サイドバーウィジェットごとに枠線を入れ、背景を白にしてます。（枠線は角丸にならないようにしています）
まとめ
ページごとに別のスタイルシートを使うことができるのは初めて知りました。これを知らなかったらうまく行きませんでした。
トップページ、カテゴリーページ、検索結果ページなど、ページごとにCSSを変える方法は下記サイトから学びました。
コメント