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

post_page_set_01

投稿記事に対してアイキャッチ画像が主張しすぎですよね。

今回は、アイキャッチ画像の位置を変更することで、投稿記事とアイキャッチ画像サイズのバランスを取り、見やすくする方法を掲載したいと思います。

また、これに合わせて、記事タイトルの位置なども変更してみましたので、その内容も掲載します。

今回説明する内容を適用すると、以下のイメージになります。

post_page_set_08

投稿日・タイトル・アイキャッチ画像・本文の順番に表示され、アイキャッチ画像サイズを手動で変更しなくても本文と同じ表示幅になります。

スポンサーリンク



準備

今回修正するのは、以下の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ファイルに記載されています。

思い切って、アイキャッチ画像を表示する以下のコードを削除してしまいましょう。

※バックアップを取ることを忘れずに。

post_page_set_02

 

single.phpの変更

single.phpに、先ほど削除したコードをそのまま追加します。

追加するコードは以下のコードです。

以下の場所に追加します。

post_page_set_03

以上で、アイキャッチ画像の表示位置の変更は終わりです。

 

投稿記事タイトル・投稿日の表示位置の変更

次に、投稿記事タイトルと投稿日の表示位置を変更する際の、各ファイルの修正内容を書いていきます。

content.phpの変更

まずは、投稿ページに表示される投稿記事のタイトルや投稿日を削除します。

※既に若干のカスタマイズしているので、ファイルの内容は皆さんのファイルとは異なると思います。

post_page_set_05

single.phpの変更

single.phpに、投稿タイトルと投稿記事を表示するコードを追加します。

追加するコードは以下のコードです。

 

以下の場所に追加します。

post_page_set_06

以上で、投稿日、投稿タイトルの表示位置の変更は終わりです。

 

デザインの変更

最後に、style.cssに以下のコードを追加し、デザインを調整しました。

 

修正した内容自体は非常に簡単です。

これでアイキャッチ画像が自然に目に入るようになり、違和感がなくなりました。

皆さんの参考になれば幸いです。

この記事をシェアする

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です