アイキャッチ画像のサイズと位置のカスタマイズ

今回はTwentyTwelveのアイキャッチ画像のサイズと位置を変更するカスタマイズです。

私のこのブログでも各記事にアイキャッチ画像を設定していますが、初期状態ではこのアイキャッチ画像が非常に大きく表示されません?実際このアイキャッチ画像が非常に大きなサイズで表示されるのでこのアイキャッチ画像のサイズを少し変更する事にしました。

それからTwentyTwelveではアイキャッチ画像が記事タイトルの上に表示されるのでこれを記事タイトル下に持ってくる事にしました。

スポンサーリンク

TwentyTwelveのアイキャッチ画像を記事タイトルの下に

さて、アイキャッチ画像とタイトルの位置を入れ替える作業をしていきますが、多くのテーマの場合、「個別ページ」と「固定ページ」は別々になっていますので、個別ページは「content.php」、固定ページは「content-page.php」をそれぞれ編集していきます。

まずはアイキャッチ画像を記事タイトルの下に移動するカスタマイズ。事前にバックアップをしておくと安心です。

個別ページでアイキャッチ画像の位置を変更する

今回使うのは「content.php」ですので、子テーマにこのファイルを追加しておいて下さい。では早速始めましょう。アイキャッチ画像を表示するコードは「content.php」の中のこの記述です。

<?php the_post_thumbnail(); ?>

この記述がない場合はおそらくこの記述があります。

<?php if ( ! post_password_required() && ! is_attachment() ) :
				the_post_thumbnail();
			endif; ?>

この記述でアイキャッチ画像を表示させています。このコードの前後を見てみるとこのようになってます。

<header class="entry-header">
			<?php the_post_thumbnail(); ?>
			<?php if ( is_single() ) : ?>
			<h1 class="entry-title"><?php the_title(); ?></h1>

先ほど紹介したアイキャッチ画像を表示するコードの下に「h1」という記述がありますよね。この「h1」というのが記事タイトルの部分です。この「h1」よりも上にアイキャッチ画像のコードがあるので、記事タイトルの上にアイキャッチ画像が表示される訳です。この事をまずは把握しておきます。

要はこのアイキャッチ画像を表示させるコードの位置を記事タイトルと記事本文の間に移動すればOKという事なので、今度は記事本文を表示させるコードを探します。記事本文を表示させるコードはこれです。

<div class="entry-content">
			<?php the_content( __( 'Continue reading <span class="meta-nav">→</span>', 'twentytwelve' ) ); ?>
			<?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'twentytwelve' ), 'after' => '</div>' ) ); ?>
		</div><!-- .entry-content -->

これが記事本文を表示させるコードです。つまり、「div class=”entry-content」の部分の直前に先ほどのアイキャッチ画像を表示するコードを持ってくればいいという事になります。ここまでOKですか?

では作業に移りましょう。まずは最初に紹介したアイキャッチ画像を表示させるコードを切り取ります。

<?php the_post_thumbnail(); ?>

もしくはこちらの場合もあるかもしれません。

<?php if ( ! post_password_required() && ! is_attachment() ) :
				the_post_thumbnail();
			endif; ?>

この記述を切り取り、本文表示コードの直前に貼り付け。結果的にこのようになります。

<?php the_post_thumbnail(); ?>

	<div class="entry-content">
	<?php the_content( __( 'Continue reading <span class="meta-nav">→</span>', 'twentytwelve' ) ); ?>
	<?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'twentytwelve' ), 'after' => '</div>' ) ); ?>
		</div><!-- .entry-content -->

記事本文の直前にアイキャッチ画像を表示するコードを追加しました。

アイキャッチ画像-1

このように記事タイトルと記事本文の間にアイキャッチ画像を表示させる事ができました。

それからアイキャッチとその下の本文の部分がくっついて余白がない状態だと思いますので、子テーマのCSSに次のコードを入れて本文部分のコンテンツの上に余白を入れておくと良いでしょう。

.entry-content{margin-top:30px;}

固定ページのアイキャッチ画像の位置を変更する

先ほどは個別ページのアイキャッチ画像の位置を変更したのですが、固定ページも同じように位置変更したい場合には子テーマの「content-page.php」を編集していきます。

子テーマの「content-page.php」から次の部分がアイキャッチ画像を出力するコードになります。

<?php if ( ! is_page_template( 'page-templates/front-page.php' ) ) : ?>
			<?php the_post_thumbnail(); ?>
			<?php endif; ?>

なのでこの部分を切り取っておきます。それで、記事本文を出力するコードの直前に貼り付ければ本文の直前、つまり記事タイトルの下にアイキャッチを移動する事ができます。本文が始まるのがこの部分です。

<div class="entry-content">

なのでこの直前に最初に切り取ったアイキャッチ画像を出力するコードを移動させて下さい。

ちなみにアイキャッチ画像を出力するコードを削除するとアイキャッチを出力しないという事もできます

アイキャッチ画像のサイズを変更する

私のこのブログではアイキャッチ画像のサイズを少し変更してます。また、トップページやカテゴリーページ等ではアイキャッチ画像をサムネイル画像(100px 100px)で表示させるようにしてます。

このやり方はまた次回紹介するとして、今回はまずアイキャッチ画像のサイズを変更するカスタマイズを紹介します。アイキャッチ画像のサイズを変更する場合は先ほど説明で出てきた「アイキャッチ画像を表示させるコード」に変更を加えます。

つまりこれも子テーマの「content.php」で変更できます。先ほどこのコードがありましたよね。

<?php the_post_thumbnail(); ?>

これをこのように変更します。

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

この「500」はサンプルですので好きなサイズに半角数字で変更する事ができます。また次のような記述も使えます。

  • the_post_thumbnail(‘thumbnail’) — サムネイル画像を表示
  • the_post_thumbnail(‘medium’) — 中サイズ画像を表示
  • the_post_thumbnail(‘large’) — 大サイズ画像を表示

この中サイズとか大サイズというのはWordPressの管理画面⇒「設定」⇒「メディア」で設定したサイズです。

アイキャッチ画像-2

これWordPress始めた頃に設定しましたよね。メディア設定です。このメディア設定で設定したサイズか直接サイズを指定する方法か2通りありますのでお好みで設定してみて下さいね。

それでは次回はトップページやアーカイブページ等の記事一覧ページで抜粋記事の一覧表示にするカスタマイズをしていきます。

サイトのアクセスアップや稼ぐためにおすすめの無料レポート

個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。

ブログの更新はこちらから

アイキャッチ画像のサイズと位置のカスタマイズ”に21件のコメントがあります。

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

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

  1. SALLU

    ありがとうございました
    解決いたしました。スッキリいたしました!
    今後ともよろしくお願いいたします

  2. しげぞう 投稿作成者

    SALLU様

    コメントありがとうございます。説明不足の部分がありすみません。固定ページのアイキャッチ画像ですが、これは「content-page.php」で編集する必要があります。記事を編集しておきましたので、再度記事の確認をしてみて下さい。また、アイキャッチ画像を出力するコード自体も削除してしまえばアイアキャッチ画像は入らなくなります。それも一応記事に追加しておきました。
    アイキャッチ画像のサイズと位置のカスタマイズ

    また何か分からない部分などありましたらコメント頂けると助かります。どうぞよろしくお願い致します。

  3. SALLU

    いつも参考にさせていただいております
    当方、素人故大変わかりやすく助かります

    そこでこちらのログの件ですが
    アイキャッチの位置を記事タイトルの下への移動は上手く言ったのですが
    固定ページのアイキャッチがまだタイトルの上へきてしまいます
    記事ページと固定ページではカスタマイズするphpが異なるのでしょうか?

    また、ダッシュボードにて固定ページの表示オプションのところでアイキャッチ画像の
    チェックボックスを外しても反映されずアイキャッチ画像(記事の最初の画像)が入ってしまいます。固定ページのみ、アイキャッチを入れない方法はあるのでしょうか?

    恐れ入りますがご指南いただけると幸いです。

  4. Kita

    ご返答ありがとうございます。
    ご教授していただいたコードを追加したところ、無事上手く反映されました。
    スマホでも問題なく表示されています。(左の余白を50pxから60pxに変更させていただきました。)

    今まで、左に表示されてしまってたので、記事内に画像を貼り、アイキャッチ画像風にしてましたが、画像付きの関連記事も設定できなかったので、困ってました。

    助かりました。ありがとうございます!。今後もよろしくお願い致します。

  5. しげぞう 投稿作成者

    kita様

    返信ありがとうございます。これはアイキャッチ画像のサイズの設定(kita様の場合500px)をコンテンツ部分の横幅と同じサイズに合わせる(多分570pxくらいかな?)か、サイズはそのままでスタイルシートで調整するかの2通りかと思います。

    スタイルシートで調整する場合には画像の左に余白を入れて調整すると良いと思います。ただ、普通に余白を入れるだけではスマートフォンなどで見た場合にも余白が適応されて画像がはみ出すと思いますので、条件分岐で960px以上のブラウザサイズ(PC)の場合という条件で余白を入れると良いかもしれません。

    @media screen and (min-width: 960px) {
    img.wp-post-image {
        margin-left: 50px;
    }
    }

    一応これをスタイルシートの一番下に追加してみてスマートフォンやタブレットなどでの表示も確認してみてください。条件分岐しているので、PC版の場合だけ左に余白を50px入れて右側に画像を持って行けると思います。

    もし上手く反映されない場合などはお手数ですが再度コメント頂けると助かります。どうぞよろしくお願い致します。

  6. Kita

    返信ありがとうございます。
    説明不足で申し訳ないです。画像はトップページ・個別ページどちらにも貼っておりますので両方です。

    上記記事を参考にサイズ等は同じくしてあります。アイキャッチ画像を設定している記事です。↓
     

    よろしくお願い致します。

  7. しげぞう 投稿作成者

    Kita様

    コメントありがとうございます、また、返信遅くなりすみません。アイキャッチ画像ですが、これはトップページでしょうか?それとも個別ページでしょうか?もしまだ解決されていないのであればURLを再度教えて頂けると助かります。どうぞよろしくお願い致します。

  8. Kita

    再度質問失礼いたします。すいません。
    アイキャッチ画像についてなんですが、サイズを同じく500に設定したんですが、記事コンテンツの幅が上回り、余白があきます。そこでですが、デフォルトでは左配置になると思うんですが、中央に表示させる方法は分かりますでしょうか?

    結構いろいろ調べたんですが、有力な情報が見つからず手こずっております。
    お時間がある時でも大丈夫ですので、よろしくお願い致します。

  9. 乃風

    後から書いたものが優先的に反映されるのですか。なんとなくですが、その逆かと思っておりました。毎日が謎だらけです。でも、1つ1つがこうしてクリアーになっていき、なんか段々楽しくなってきました。いつも適格で、分かりやすいアドバイスをありがとうございます。取り急ぎお礼まで。

  10. しげぞう 投稿作成者

    乃風様

    コメントありがとうございます。CSSは下に書いたもの(後から書いたもの)が優先的に反映されますので、一番下に追加しておけばOKです。もしそれで反映されない場合にはまたコメント頂けると助かります。どうぞよろしくお願い致します。

  11. 乃風

    いつもお世話になっております。まだ記事や画像を自分のURLに載せていないこともあり、この設定で反映できているのかどうかが分からないので、1つ教えてください。

    「アイキャッチとその下の本文の部分が、くっついて余白がない状態だと思いますので、子テーマのCSSに次のコード「.entry-content{margin-top:30px;}」を入れて、本文部分のコンテンツの上に余白を入れておくと良いでしょう。」と、この記事にそう書いてありましたが、そのコードをCSSに追加する場合、追加するその箇所は決まっているのでしょうか? とりあえず、CSSの一番下にそのコードを張り付けたのですが、それでよかったのでしょうか?

  12. hana

    お返事、ありがとうございます。
    ほとんど知識がないのに、必死で作っています。
    なので、本当、涙がでるほど、このサイトには感謝しています。
    ゆくりでいいです。
    どうぞよろしくお願いいたします。
    感謝感激雨あられです。

  13. poko 投稿作成者

    >hana様

    いつもコメントありがとうございます!画像を横並びに配置したいという事でいいでしょうか?画像の並べ方は色々方法があると思いますが、それぞれ説明すると長くなってしまうので、これも全部まとめて記事にしたいと思います。急いで記事を書きますが、別の記事も同時進行で書いていますので少し(2~3日)程度お待ち頂けると助かります。

  14. hana

    いつもお世話になります。
    Twenty Twelveです。
    記事の中に画像を並べたいのですが、うまくいきません。
    どうずればよいのでしょうか?
    配置の 左 中央 右とか指定してみてもまったく思い通りになりません。
    ご指導、お願いいたします。

  15. poko 投稿作成者

    >ジョニ様

    上手く反映されたようでよかったです。テーマは時々更新があり、変更される箇所というのもあります。今回はジョニ様のコメントのおかげで記事も修正する事ができました。また分からない部分やできない部分があればコメント頂けたら嬉しいです。今後ともどうぞよろしくお願い致します。

  16. ジョニ

     たいへん申し訳ありませんでした。
     送信する際には私には見えていたのですが、白文字をコピぺしたためか!?poko様には明示できませんでした。ご迷惑をおかけしました。
     肝心の本件ですが、おかげさまで、「TwentyTwelveのアイキャッチ画像を記事タイトルの下に」ができました。ありがとうございました。また、別件で質問させてもらうと思いますので、その時はよろしくお願いします。迅速な対応本当にありがとうございました。

  17. poko 投稿作成者

    >ジョニ様

    コメントありがとうございます。コメントの内容のコードの部分がちょっと消えてしまっていたのですが、おそらく「」の中はこれだと思います。

    <?php the_post_thumbnail(); ?>

    この記述がおそらくテーマの更新によって若干変更されたのだと思います。私も確認してみた所このように変更されているようです。

    <?php if ( ! post_password_required() && ! is_attachment() ) :
    				the_post_thumbnail();
    			endif; ?>

    この記述を探してこれを切り取り、本文が表示されるコードの直前に移動してみて下さい。つまりこの部分の直前です。

    <div class="entry-content">

    一度試されてもしできない場合にはまたコメント頂けたら助かります。

  18. ジョニ

    はじめまして、いつも勉強させて頂いてます。
    さて「TwentyTwelveのアイキャッチ画像を記事タイトルの下に」を実践しようと思い、「」を探したのですが、どうもみあたりません。
    バージョンはWordPress4.1.1です。


    という感じですが、どのように対処すれば、このカスタマイズを実現できるでしょうか?
    お手すきの際によろしくご回答ください。

  19. poko 投稿作成者

    >TAKA様

    コメントありがとうございます。クレジット表記ですがもしかするとプラグインの影響かもしれません。私も以前「Photo Dropper」というプラグインを利用していたのですが、プラグインのアップデートをしてからクレジット表記が出なくなった事があります。試しにカスタマイズしていないWordPressを新規に立ち上げてこのプラグインを入れて試したのですが、やはりクレジット表記は出ませんでした。なので私の環境ではプラグインが原因かなと思いました。

    面倒でしたが、私はこのプラグインを辞めてブログのアイキャッチ画像を全て張替えして「photo pin」というサイトを利用してます。もしプラグインが原因だと思われる場合は別のプラグインや方法を試してみるといいと思います。この記事が分かりやすかったです。
    http://wild-cards.net/wordpress-eyecatch-photopin/

  20. TAKA

    はじめましていつも参考にさせていただいています。
    ところで、こちらの設定をしたところ

    photo credit: digicacy via photopin cc

    のようなキャプションが表示されません。
    ご教示いただけるとありがたいです。