TwentyTwelveのアイキャッチ画像サイズをページごとに変える

今回はTwentyTwelveのアイキャッチ画像サイズをページごとに変えるカスタマイズです。個別記事なら大きなアイキャッチ画像を使用してトップページやカテゴリー等の記事一覧ページでは小さいアイキャッチ画像を使用するというカスタマイズです。

ついでに記事一覧ページでは抜粋記事にしてます。見てもらった方が早いかな?私のトップページやカテゴリーページではアイキャッチ画像がこのように表示されてます(現在は抜粋にはしてません)。

アイキャッチ画像-3

小さなアイキャッチ画像と記事の抜粋になっているでしょ?そして個別記事を表示するとこのように大きなアイキャッチ画像が表示されます。

アイキャッチ画像-4

このように表示するページによってアイキャッチ画像のサイズを変えるカスタマイズをしていきます。ちなみに前回までの記事でアイキャッチ画像のサイズを決めて、記事下に表示するカスタマイズをしました。

さらに記事一覧ページでは抜粋記事にして「続きを読む」を設置できたと思います。

今回はその続きになりますので前回までのカスタマイズをまだしてない方は先にやっておく事をおすすめします。

この3つのカスタマイズの内、アイキャッチ画像の位置を記事下にするカスタマイズだけは必ずやっておいて下さい。今回のカスタマイズは記事下にアイキャッチ画像を設定している前提でのカスタマイズです。

さて、これまでのカスタマイズで記事一覧ページを抜粋記事にしたのですが、設定したアイキャッチ画像が表示されていません。

アイキャッチ画像-6

この抜粋記事の左にサムネイルサイズのアイキャッチ画像を表示できるようにカスタマイズしていきます。

事前にサムネイル画像のサイズを確認しておく

最初に説明しておきますが、トップページや記事一覧ページの画像のサイズはサムネイルサイズというサイズです。これはWordPressの管理画面から「設定」⇒「メディア」で設定したサムネイルのサイズです。これをまず確認しておきます。

アイキャッチ画像-5

私の場合は100pxというサイズに設定しています。初期状態では150pxだったのですが、若干大きいと感じたので少し小さめにしてます。

このサイズを100pxにしておくと抜粋記事の文字量とちょうどいいと思いますが、これは好みの問題ですので、150pxのままでも良いです。一度カスタマイズしてみて大きいと感じたら変更してみて下さい。

それから個別記事で表示するアイキャッチ画像のサイズは前回の記事で設定したのでOKですよね。この2種類のサイズを把握しておいて下さい。これを把握しておくのはカスタマイズ後にサイズが気にいらない時に変更できるようにしておくためです。

ページごとにアイキャッチ画像のサイズを変更する

普通の個別記事では大きいサイズのアイキャッチ画像を表示させ、それ以外の記事一覧ページではサムネイル画像を表示されていきます。今回使うファイルは「content.php」です。前回までのカスタマイズで使ったファイルですので、子テーマには追加されてますよね。

トップページやアーカイブページの記事一覧ページを抜粋記事にするカスタマイズでこのコードを変更しました。

これをこのように変更して抜粋記事にしましたよね。

ここまでは出来ていると思いますので、このコードのすぐ下に次のコードを足します。

これで記事一覧ページにメディア設定で設定されている「サムネイルサイズ」のアイキャッチ画像が表示できるようになります。

また、ここのサイズに関しては次のような書き方でサイズを指定する事もできます。

表示を確認してみると設定したアイキャッチ画像は表示されているのですが、本文がアイキャッチ画像の下から表示されてます。これを画像の右に持ってきたいのです。

アイキャッチ画像-7

この抜粋記事をアイキャッチ画像の右に持ってくるために今度は子テーマのスタイルシート(style.css) に次の記述を付け加えます。

これでアイキャッチ画像の右側に抜粋記事が表示されるはずです。完成形は私のブログのようになってます。

記事抜粋-1

もしここで表示されるアイキャッチ画像が正方形でない場合はメディア設定で「サムネイルを実寸法にトリミングする」にチェックを入れてないのが原因だと思われます。その場合はWordPressの管理画面から「設定」⇒「メディア」と進み、「サムネイルを実寸法にトリミングする」にチェックを入れて下さい。

アイキャッチ画像-8

その後改めて画像をアップロードし、再びアイキャッチ画像に設定してみて下さいね。一括でリサイズできるプラグインもありますので、使ってみてもいいかもしれません。

それでは次回はフッター部分のカスタマイズをしていきます。

最終更新日:2016/02/26

TwentyTwelveのアイキャッチ画像サイズをページごとに変える”に50件のコメントがあります。

コメントの反映には時間がかかる場合があります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

  1. かず

    しげぞう様

    ありがとうございます。キャッシュを削除して確認したら反映されていました。
    どうもお手数をおかけしました。ありがとうございました。

  2. しげぞう 投稿作成者

    かず様

    コメントありがとうございます。サイト確認させてもらいましたが反映されてます。多分かず様のブラウザのキャッシュ(以前のデータ)が残っているのが原因かと思いますので、別のブラウザとかで確認したら反映されているはずです。

    またWindowsであれば「Ctrl」と「F5」を一緒に押してリロードしたら解決する場合がありますし、解決しない場合はブラウザのキャッシュをクリアしたらOKです。