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