Twenty Fourteenのアイキャッチ画像を非表示にする
Twenty Fourteenでは投稿や固定ページの先頭にアイキャッチ画像が表示されますが、不要だという方のためにアイキャッチ画像を削除する方法を紹介します。
アイキャッチ画像を非表示にする（PHP）
アイキャッチ画像を消す簡単な方法は、テンプレートのcontent.php（固定ページはcontent-page.php）を子テーマフォルダにコピーして次の行をコメントにする方法です。
<?php twentyfourteen_post_thumbnail(); ?>
14行目あたりです。次のようにコメントにします。「twentyfourteen_post_thumbnail」の直前に「//」を入力することで、その行がコメント（無効）になります。
<?php //twentyfourteen_post_thumbnail(); ?>
アイキャッチ画像が消えます。
アイキャッチ画像を非表示にする（CSS）
PHPを修正するのはいろいろと面倒だという場合は、子テーマのstyle.cssに次のCSSを入力する方法があります。
.post-thumbnail {
display:none;
}
アイキャッチ画像のdivタグには「post-thumbnail」というclass名が付いているので、このCSSでアイキャッチ画像が消えます。
ただし、すべてのアイキャッチ画像が消えるので投稿一覧に付いているアイキャッチ画像も消えてしまいます。
元々は次のようなイメージです。
それでも動作には問題ありませんが、投稿一覧にはアイキャッチ画像を残し、個別記事のみアイキャッチ画像を消す場合は、CSSを次のように修正します。
/* 個別記事のみアイキャッチ画像を非表示に */
.single .post-thumbnail {
display:none;
}
単一記事には「single」というclass名が付いていることを活かしています。
<body class="single single-post postid-129…略…">
表示中のページのbodyタグを見ると、そのページごとに異なるclass名が付いていることがわかります。たとえばアーカイブページは「archive」や「category-カテゴリー名」のようなclass名が付いています。
<body class="archive category category-topic…略…">
このclass名を活用すれば、個々のページごとに別々のスタイルを適用することができます。
たとえば、固定ページのclass名は次のようになっています。
<body class="page page-id-11 …略…">
投稿、固定ページ共にアイキャッチ画像を非表示にするには次のようにCSSセレクタを修正します。
/* 投稿、固定ページのアイキャッチ画像を非表示に */
.single .post-thumbnail,
.page .post-thumbnail {
display:none;
}
これで固定ページのアイキャッチ画像も非表示になりますが、固定ページはアイキャッチ画像を非表示にするとタイトルがナビゲーションに隠れてしまいます。
これは、アイキャッチ画像を持っているページ（class名：has-post-thumbnail）で上の余白が「margin-top: -48px;」に設定されているためです。
ひとまず上の余白をゼロにしておきます。各自、微調整をお願いします。
.full-width .site-content .has-post-thumbnail .entry-header,
.full-width.singular .site-content .hentry.has-post-thumbnail,
.full-width.home .site-content .hentry.has-post-thumbnail {
margin-top: 0;
}
このブロックを囲む「content-area」ブロックは端末の幅が846px以上の場合、次のように上の余白が設定されているため、上の画像のように空白が空いてしまいます。必要に応じて調整しましょう。
@media screen and (min-width: 846px) {
.content-area,
.content-sidebar {
padding-top: 72px;
}
…略…
例として上の余白を10pxに設定してみます。
/* コンテンツエリアの余白（上）を設定 */
.content-area,
.content-sidebar {
padding-top: 10px;
}
表示結果は次のようになります。
以上、Twenty Fourteenのアイキャッチ画像周りについてCSSを紹介しましたが、ふわっと仕上げです。たたき台にしていろいろとお試しください。