ワードプレステーマ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の記事コンテンツ(サマリー)最下部の余白が撤去されたハズです。かなりスッキリしたと思います☆
