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

WordPressの始め方や使い方まとめ

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

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

アイキャッチ画像-3

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

アイキャッチ画像-4

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

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

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

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

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

アイキャッチ画像-6

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

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

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

アイキャッチ画像-5

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

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

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

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

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

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

<?php if ( is_search() ) : // Only display Excerpts for Search ?>

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

<?php if ( is_search() || is_home() || is_archive() ) : // Only display Excerpts for Search ?>

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

<div class="entry-post-thumbnail">
<?php the_post_thumbnail('thumbnail'); ?>
</div>

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

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

<?php the_post_thumbnail(array(100, 100)); ?>

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

アイキャッチ画像-7

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

div.entry-post-thumbnail {
float: left;
margin: 0 10px 10px 0;}

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

記事抜粋-1

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

アイキャッチ画像-8

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

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

コメント

  1. かず より:

    しげぞう様

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

  2. しげぞう より:

    かず様

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

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

  3. かず より:

    しげぞう様

    このトップページの記事の表示のさせ方がとてもステキで参考にさせていただいております。
    しかし、過去にも同様のご質問があったようにお見受けしますが、私もサムネイルの真横に文章を持ってくることができません。style.cssに追記をしても反映されない状態です。

    HTMLの操作等は苦手で、自分ではどうしても原因を特定できません。

    また、これまでアイキャッチ画像を設定せずに書いてきたので、現在この作業をするために、トップ画面の最新の数記事にしかアイキャチ画像を設定していません。
    うまく表示ができれば、ぼちぼちと各記事のアイキャチ画像を設定していきたいと思っています。
    どうぞよろしくお願いします。

  4. けんたろ より:

    しげぞう様

    初めまして!
    こちらのサイトで勉強させていただいている、けんたろと申します。
    私もWordPressを使いブログを作ることに決めたのですが
    素人の私には難しく正直、ドメイン??といったレベルからでした。笑

    色々なサイトを見漁ったのですがしげぞう様の文章がとてもわかりやすく、
    順を追ってサイトを構築できる作りになっていましたので、こちらだけを参考に毎日作業を進めております。

    私自身も情報発信のサイトを作るつもりなので、poko様のようにわかりやすく来てくれた方が参考になるウェブサイトを目指して頑張りたいと思います。

    どうしてもお礼が言いたくコメント致しました。
    これからもお世話になると思いますが、どうぞよろしくお願いいたします。

  5. しげぞう より:

    サマー様

    返信ありがとうございます。まず、サイトを表示させてリロード(再読み込み)をして下さい。それで反映されていない場合にはCSSをチェックしていきます。「 } 」とか「 ; 」とか1つでも抜けていると反映されないことが多いです。

    また、今回追加した記述よりも前のコードに上記のような「抜け」があるとそれ以降の記述が反映されませんので、これまで追加している記述のチェックも必要かと思います。もし原因を特定できない場合にはサイトのURL教えて下さい。コメント公開時にはURLは削除します。

    それから続きを読むの文言の変更ですが、functions.phpに追加したコード記述の中に「続きを読む」とテキストで書かれている部分があります。その部分を好きな文言に変更して下さい。ただ、functon.phpはちょっとしたミスでサイトが真っ白になってしまう事があります。という訳なので先に現在のfunctons.phpをコピーしておいてから変更して下さい。

    もしミスで真っ白になった場合にはFTPからfunctons.phpを一度元に戻して下さい。

  6. サマー より:

    しげぞうさま

    度々失礼いたします。

    続きを読む、からの一連のカスタマイズをしているのですが、サムネイルの真横に文章を持ってくる、ができません。style.cssに追記をしても、何も変わりません。

    この一連以外の文字の変更や、リンクの色の変更などのカスタマイズも、style.cssに追記ですよね?こちらもなんとも変わりません。style.cssに何か問題があるのでしょうか?

    それと、「続きを読む」を「read」に変えたいのですができますか??

    宜しくお願いします!

  7. しげぞう より:

    pen-chi様

    コメントありがとうございます。サムネイルの位置がずれる問題ですが、これは実際にサイトを見てチェックしないと原因が特定できません。なので、もし良かったら一度サイトのURLを教えて下さいませ。もちろんコメント公開時にはURLは削除しますのでどうぞよろしくお願い致します。

  8. pen-chi より:

    しげぞう様
    いつもしげぞう様のサイトで勉強させていただいています。
    自分もWordpressをさわり始めたのですが、『サムネイルの表示位置』がずれる現象に困っています。疑わしい部分のヒントをいただけないでしょうか?

    現象は以下の通りです。
    ■記事一覧ページのサムネイル画像の位置が右にずれる
    1.記事一覧ページに抜粋記事を作成する。
     この時点ではサムネイルの表示を設定していないときは、「抜粋記事一覧」の記事の位置は適正です。
    2.記事一覧にサムネイルを表示させる。
     本サイトの通り、以下のコードをの直下に張り付けました。

     するとアイキャッチ画像を設定している記事にはサムネイルの表示はされましたが、サムネイル画像の配置が右にずれてしまいます。
    ※ちょうどサムネイル画像1個分のスペースが挿入されているイメージです。
     また、アイキャッチ画像を設定していない記事は、記事の先頭文字にスペースが挿入されたみたいな表示になります。
    ■サイドバーの人気記事一覧のサムネイルが右にずれる。
    1.popular postsを使って人気記事一覧を表示させています。
    すると『人気記事一覧』のタイトル枠の左端と『サムネイル画像』の左端一致しません。『サムネイル画像』が右にずれてしまいます。

    どうぞよろしくお願いいたします。

  9. しげぞう より:

    りっきのすけ様

    返信ありがとうございます。上手く解決されたようで良かったです。

    さて、カテゴリーの最新記事だけ全文表示という方法はこちらの記事で書いてますので、一度試して見て下さい。
    ⇒https://affiliate150.com/new-article-no-excerpt

  10. りっきのすけ より:

    しげぞう様

    いつも拝見させて頂いております。
    さっそくですが、1つ質問させて下さい。

    ・抜本記事の設定は、おかげ様で上手くできたのですが
     表示されるのがすべて抜本記事になっているので
     トップページだけ抜本記事にならないようにできますか?

     理想は、本サイトのように、カテゴリーのトップページがあり
     下に抜本記事がくるようなイメージです。

    素人の質問で申し訳ないのですが
    ご回答の程よろしくお願いいたします。

タイトルとURLをコピーしました