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

今回は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通りありますのでお好みで設定してみて下さいね。

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

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

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

おすすめの無料セミナー

これまでお金に関する勉強をした事がない方は稼ぐサイト作りの前にお金に関する無料セミナーに参加してみて下さい。お金をためたり増やしたりするためにお金の知識があるとかなり有利。考え方の土台になる部分ですからね。

「1万円から始められる節約の方法」「お金に働いてもらう方法」「収入の2割を自動的に貯める方法」など、お金に関する基本的な知識が学べる2時間の無料のセミナーが毎日のように行われてますので、一度参加してみる事をおすすめします。

これまで全くお金の勉強していない方であればお金の知識を身につける事で考え方が大きく変化するはずです。無料の2時間程度のセミナーですが、内容は濃いのでおすすめです。
お金に関する教養無料セミナー

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

※入院生活から復活しました!!またできるだけ返信しますのでよろしくお願いします(^^)

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

  1. SALLU

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