TwentyTwelve 記事コンテンツ最下部の余白をなくす方法

ワードプレステーマTwentyTwelveの記事コンテンツ(サマリー)の最下部の余白を撤去する方法です。TwentyTwelveヘッダー部分の余白の撤去方法はこちら。

ついここ最近分かったんですが(笑 思った以上に余白がありますよね?Twelveのコンテンツの一番下って。見てみたら、デフォルトだと’72px’もありました…(汗

それとついでに、記事コンテンツのメタ部分の余白もかなりありますので、一緒に撤去していこうと思います。

’site-content article’を探せ!!

それでは、管理画面より「外観」⇒「テーマ編集」から’スタイルシート’を開き、以下の箇所を探して下さい。

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

.entry-meta {
	clear: both;
}

~~~~~~~~ 中略 ~~~~~~~~

.entry-content td,
.comment-content td {
	border-top: 1px solid #ededed;
	padding: 6px 10px 6px 0;
}
.site-content article { /* コンテンツの最下部 */
	border-bottom: 4px double #ededed;
	margin-bottom: 72px;
	margin-bottom: 5.142857143rem;
	padding-bottom: 24px;
	padding-bottom: 1.714285714rem;
	word-wrap: break-word;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
}
.page-links {
	clear: both;
	line-height: 1.714285714;
}
footer.entry-meta { /* メタ表示部分 */
	margin-top: 24px;
	margin-top: 1.714285714rem;
	font-size: 13px;
	font-size: 0.928571429rem;
	line-height: 1.846153846;
	color: #757575;
}
.single-author .entry-meta .by-author {
	display: none;
}
.mu_register h2 {
	color: #757575;
	font-weight: normal;
}

/* =Archives
-------------------------------------------------------------- */

わぁ~っ!!見たくないですね(苦笑

でもね、基本余白に関係しているのは’margin’と’padding’です。だから、まずはその値を0にしてみる。必要ならば、その後に数値を変えてみるとすんなり行くと思います。

ちなみに、このTwelveの’rembase’については、コチラをご覧下さい。

それでは、各々を編集してみましょう。まずは、’.site-content article’から。

.site-content article { /* コンテンツの最下部 */
	border-bottom: 4px double #ededed;
	margin-bottom: 0;
	margin-bottom: 0rem;
	padding-bottom: 0;
	padding-bottom: 0rem;
	word-wrap: break-word;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
}

これで、余計な余白はなくなったハズです。もし、少し余白を入れたいと感じたら、以下の様な数値を入れてみて下さい。

.site-content article { /* コンテンツの最下部 */
	border-bottom: 4px double #ededed;
	margin-bottom: 14px;
	margin-bottom: 1rem;
	padding-bottom: 14px;
	padding-bottom: 1rem;
	word-wrap: break-word;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
}

続いて’footer.entry-meta’のメタ表示部分の余白です。

footer.entry-meta { /* メタ表示部分 */
	margin-top: 14px;
	margin-top: 1rem;
	font-size: 13px;
	font-size: 0.928571429rem;
	line-height: 1.846153846;
	color: #757575;
}

こんな感じにしてみると、丁度良いのではないでしょうか?

これで、TwentyTwelveの記事コンテンツ(サマリー)最下部の余白が撤去されたハズです。かなりスッキリしたと思います☆

WordPressデザインブック ステップバイステップ形式でマスターできる
WordPressデザインブック ステップバイステップ形式でマスターできる

にほんブログ村 ブログブログ ブログノウハウへ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です