WordPress個別サポート

Twenty Fourteenでは投稿や固定ページの先頭にアイキャッチ画像が表示されますが、不要だという方のためにアイキャッチ画像を削除する方法を紹介します。

Twenty Fourteenのアイキャッチ画像

Twenty Fourteenのアイキャッチ画像

スポンサーリンク

WordPressテーマ「LOTUS (TCD039)」

アイキャッチ画像を非表示にする(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でアイキャッチ画像が消える

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;
}

表示結果は次のようになります。

コンテンツエリアの余白(上)を10pxに

コンテンツエリアの余白(上)を10pxに

以上、Twenty Fourteenのアイキャッチ画像周りについてCSSを紹介しましたが、ふわっと仕上げです。たたき台にしていろいろとお試しください。

この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
WordPress講座の問い合わせ先

関連記事

BizVektorのカスタマイズ

WordPressカスタマイズ

WordPressによるサイト作成のヒント

WordPressプラグイン

スポンサーリンク
西沢直木によるWordPress講座の紹介
ホームページ作成講座WordPress個別サポート