WordPressのテーマ「Twenty Seventeen」の投稿ページは、画像サイズを調整しないと、以下の様にデカデカとアイキャッチ画像が表示されてしまいます。

投稿記事に対してアイキャッチ画像が主張しすぎですよね。
今回は、アイキャッチ画像の位置を変更することで、投稿記事とアイキャッチ画像サイズのバランスを取り、見やすくする方法を掲載したいと思います。
また、これに合わせて、記事タイトルの位置なども変更してみましたので、その内容も掲載します。
今回説明する内容を適用すると、以下のイメージになります。

投稿日・タイトル・アイキャッチ画像・本文の順番に表示され、アイキャッチ画像サイズを手動で変更しなくても本文と同じ表示幅になります。
Contents
準備
今回修正するのは、以下のPHPファイル3つと、style.cssです。あらかじめ子テーマに配置しておきましょう。
- style.css:フォルダパス ⇒ public_html/wp-content/themes/子テーマ
- single.php:フォルダパス ⇒ public_html/wp-content/themes/子テーマ
- header.php:フォルダパス ⇒ public_html/wp-content/themes/子テーマ
- content.php:フォルダパス ⇒ public_html/wp-content/themes/子テーマ/template-parts/post/
また、失敗しても復元できるように、バックアップを取っておくと良いです。
アイキャッチ画像の表示位置の変更
まずは、アイキャッチ画像の表示位置を変更する際の各ファイルの修正内容を書いていきます。
header.phpの変更
投稿ページにでかでかと表示されるアイキャッチ画像は、header.phpファイルに記載されています。
思い切って、アイキャッチ画像を表示する以下のコードを削除してしまいましょう。
※バックアップを取ることを忘れずに。

single.phpの変更
single.phpに、先ほど削除したコードをそのまま追加します。
追加するコードは以下のコードです。
1 2 3 4 5 6 7 8 9 10 11 12 |
<?php /* * If a regular post or page, and not the front page, show the featured image. * Using get_queried_object_id() here since the $post global may not be set before a call to the_post(). */ if ( ( is_single() || ( is_page() && ! twentyseventeen_is_frontpage() ) ) && has_post_thumbnail( get_queried_object_id() ) ) : echo '<div class="single-featured-image-header">'; echo get_the_post_thumbnail( get_queried_object_id(), 'twentyseventeen-featured-image' ); echo '</div><!-- .single-featured-image-header -->'; endif; ?> |
以下の場所に追加します。

以上で、アイキャッチ画像の表示位置の変更は終わりです。
投稿記事タイトル・投稿日の表示位置の変更
次に、投稿記事タイトルと投稿日の表示位置を変更する際の、各ファイルの修正内容を書いていきます。
content.phpの変更
まずは、投稿ページに表示される投稿記事のタイトルや投稿日を削除します。
※既に若干のカスタマイズしているので、ファイルの内容は皆さんのファイルとは異なると思います。

single.phpの変更
single.phpに、投稿タイトルと投稿記事を表示するコードを追加します。
追加するコードは以下のコードです。
1 2 3 4 5 6 7 8 |
<?php if ( is_single() ) { echo '<div class="entry-meta">'; twentyseventeen_posted_on(); echo '</div><!-- .entry-meta -->'; the_title( '<h1 class="entry-title">', '</h1>' ); }; ?> |
以下の場所に追加します。

以上で、投稿日、投稿タイトルの表示位置の変更は終わりです。
デザインの変更
最後に、style.cssに以下のコードを追加し、デザインを調整しました。
1 2 3 4 5 6 7 8 9 |
/* 投稿ページを整える */ .site-content { padding: 2em 0 0;/* 余白調整 */ } .single-featured-image-header{ padding: 0 0 1em;/* 画像下余白調整 */ border-bottom:none; background-color:#fff; } |
修正した内容自体は非常に簡単です。
これでアイキャッチ画像が自然に目に入るようになり、違和感がなくなりました。
皆さんの参考になれば幸いです。