ワードプレステーマTwentyTwelveで、記事コンテンツの左右に余白を入れる方法です。

TwentyTwelve
記事コンテンツの左右に余白を入れる方法

特に記事コンテンツの背景に色をつけたりすると分かりやすいのですが、コンテンツの幅ギリギリに入力文字が表示されてしまいます。

つまり、文字が左にピッタリくっついた状態?って感じです。チョッとばかり読みにくい感じがしますので、左右に余白を入れる事によってさらに読みやすい記事コンテンツにしたいと思います。

左右の余白は’Padding’で解決!!

それでは、管理画面より「外観」⇒「テーマ編集」から’スタイルシート’を開き、次の部分を見つけて下さい。(小テーマを使用している方は、小テーマ側のスタイルシートを編集して下さい)

/* =Main content and comment content
-------------------------------------------------------------- */

.entry-meta {
	clear: both;
}
.entry-header {
	margin-bottom: 24px;
	margin-bottom: 1.714285714rem;
}

～～～～～～～～～　中略　～～～～～～～～

.entry-content,
.entry-summary,
.mu_register {　/* ココです!! */
	line-height: 1.714285714;
}

ココに、以下の様に追加/編集してみて下さい。

/* =Main content and comment content
-------------------------------------------------------------- */

.entry-meta {
	clear: both;
}
.entry-header {
	margin-bottom: 24px;
	margin-bottom: 1.714285714rem;
}

～～～～～～～～～　中略　～～～～～～～～

.entry-content,
.entry-summary,
.mu_register {　/* ココです!! */
	line-height: 1.714285714;
	padding-right: 10px;
	padding-right: 0.714285714rem;
	padding-left: 10px;
	padding-left: 0.714285714rem;
}

’rem’に関しては、’TwentyTwelve rembase’を参考にしてみて下さい。これで、記事コンテンツの左右に少し余白が現れたと思います。

これで、記事がスッキリと読みやすくなったのではないでしょうか☆

ランディングページ作成ができるワードプレス用2カラムテンプレート「LP Designer」レスポンシブWEBデザイン対応