Quantcast
Channel: えむ氏のログ
Viewing all articles
Browse latest Browse all 177

Simplicityで記事ごと、サイドバーごとに枠線で囲む方法[WordPress]

$
0
0

simplicity_border_00

何度でも言います、Simplicityはほんとカスタマイズしやすいテーマだと思います、えむ氏(@mlog_xyz)です。

友達のブログデザイン作業が一段落して、やっと自分のブログデザインの構想を練る作業に入りました。

「こんなことできるかな?」とか考えてテーマを試しにいじってみるのですが、Simplicityは細かく作ってあるので、ほんとにわかりやすいです。

これはほんとお世辞じゃなくて、カスタマイズしたい箇所がすぐに分かるし、いじりたいテンプレートだけ子テーマに追加すればいいし、元からファイル構造が細かくなっているおかげで、PHPのことはほとんど知識がない僕でもカスタマイズがしやすいです。

もうこれは声を大にして言っちゃいます。

Simplicityは、僕が知る最高のWordpressテーマであり、僕が知る唯一のWordpressテーマです!

記事ごと、サイドバーごとに枠線で囲む

ブログのトップページで記事ごとやサイドバーのウィジェットごとに枠線で囲むカスタマイズをしたかったんですが、そういった方法を紹介したブログがなかったので自分でやってみました。

まずは見てもらったほうが早いので、カスタマイズのビフォーアフターを見てください。

ビフォー – Simplicityデフォルトの状態

トップページ
Simplicity 記事ごとに枠線 ウィジェットごとに枠線

個別投稿ページ
Simplicity 記事ごとに枠線 ウィジェットごとに枠線

カテゴリーページ
Simplicity 記事ごとに枠線 ウィジェットごとに枠線

Simplicityのデフォルトはこんな感じです。わかりやすいように背景を画像にしています。トップページやカテゴリーページでは、1つ1つの記事ごとではなく、すべての記事をひとつの枠線で囲ってしまっています。サイドバーは背景に紛れてよくわからなくなってしまいます。

WordPress管理画面 > レイアウト(全体・リスト) > 「サイドバーの背景を白色に」という項目にチェックをいれるとこんな感じです。これまたすべてのサイドバーウィジェットを1つの枠線で囲ってしまっています。

Simplicity 記事ごとに枠線 ウィジェットごとに枠線

アフター - CSSでカスタマイズ後

次にアフターです。

トップページ
Simplicity 記事ごとに枠線 ウィジェットごとに枠線

個別投稿ページ
Simplicity 記事ごとに枠線 ウィジェットごとに枠線

カテゴリーページ
Simplicity 記事ごとに枠線 ウィジェットごとに枠線

なんということでしょう。匠の粋な計らいで、記事ひとつひとつが枠線で囲まれています。サイドバーもウィジェットごとに枠線で囲まれています。

カスタマイズ方法

方法なんですが、以下のコードをスタイルシートに書き加えただけです。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行目で、サイドバーウィジェットごとに枠線を入れ、背景を白にしてます。(枠線は角丸にならないようにしています)

まとめ

ページごとに別のスタイルシートを使うことができるのは初めて知りました。これを知らなかったらうまく行きませんでした。

Simplicityの構造について、よくわからない人は、下記のサイトがとてもわかりやすいです。

Simplicity㠮㠗ã ?ã ¿ã Œã‚?㠋る超解剖シート作㠣㠟 | ズボラ㠗ã ?世界Simplicity㠮㠗ã ?ã ¿ã Œã‚?㠋る超解剖シート作㠣㠟 | ズボラ㠗ã ?世界

トップページ、カテゴリーページ、検索結果ページなど、ページごとにCSSを変える方法は下記サイトから学びました。

CSSでページごとに別のスタイルを設定したいときはbodyタグをチェック! | 西沢直木のIT講座CSSでページごとに別のスタイルを設定したいときはbodyタグをチェック! | 西沢直木のIT講座

Viewing all articles
Browse latest Browse all 177

Trending Articles