Seventeen」の投稿ページは、画像サイズを調整しないと、以下の様にデカデカとアイキャッチ画像が表示されてしまいます。投稿記事に対してアイキャッチ画像が主張しすぎですよね。今回は、アイキャッチ画像の位置を変更することで、投稿記事とアイキャッチ画像サイズのバランスを取り、見やすくする方法を掲載したいと思います。これに合わせて、記事タイトルの位置なども変更してみましたので、その内容も掲載します。今回説明する内容を適用すると、以下のイメージになります。投稿日・タイトル・アイキャッチ画像・本文の順番に表示され、アイキャッチ画像サイズを手動で変更しなくても本文と同じ表示幅になります。今回修正するのは、以下のPHPファイル3つと、style.cssです。子テーマに配置しておきましょう。public_html/wp-content/themes/子テーマ/template-parts/post/また、失敗しても復元できるように、バックアップを取っておくと良いです。アイキャッチ画像の表示位置の変更まずは、アイキャッチ画像の表示位置を変更する際の各ファイルの修正内容を書いていきます。投稿ページにでかでかと表示されるアイキャッチ画像は、header.phpファイルに記載されています。思い切って、アイキャッチ画像を表示する以下のコードを削除してしまいましょう。※バックアップを取ることを忘れずに。single.phpの変更single.phpに、先ほど削除したコードをそのまま追加します。追加するコードは以下のコードです。-->';endif;?>以下の場所に追加します。以上で、アイキャッチ画像の表示位置の変更は終わりです。次に、投稿記事タイトルと投稿日の表示位置を変更する際の、各ファイルの修正内容を書いていきます。content.phpの変更まずは、投稿ページに表示される投稿記事のタイトルや投稿日を削除します。※既に若干のカスタマイズしているので、ファイルの内容は皆さんのファイルとは異なると思います。single.phpの変更single.phpに、投稿タイトルと投稿記事を表示するコードを追加します。追加するコードは以下のコードです。);};?>以下の場所に追加します。以上で、投稿日、投稿タイトルの表示位置の変更は終わりです。最後に、style.cssに以下のコードを追加し、デザインを調整しました。*/border-bottom:none;background-color:#fff;}修正した内容自体は非常に簡単です。これでアイキャッチ画像が自然に目に入るようになり、違和感がなくなりました。皆さんの参考になれば幸いです。育児・マイホームアイテムレビューブロガーだちたまこんにちは!「だちたま」です。2人(4才・0才)の4人家族。元エンジニアの夫に教えてもらいながら、WordPressのカスタマイズ・プログラミングについてお勉強中。