今回は、Twenty Twelve のアイキャッチを記事タイトル下に移動する方法をお教えします。

Twenty Twelve の記事タイトルはアイキャッチ画像の下にあります(以下の画像を参照)。

Twenty Twelve のアイキャッチを記事タイトル下に移動3

まぁ、これでも全然、悪くはないのですが、個人的には記事タイトルはなるべく上の方にあった方がいいと思います。というのは、クローラーは上からテキストを読み込んでいくだろうし、最近のSEOはスマホのファーストビューが大切と言われているので、ファーストビューでも記事タイトルが上にあった方がいいからです。

というわけで、Twenty Twelve のアイキャッチ画像を記事タイトルの下に移動するカスタマイズを行いたいと思います。

アイキャッチ画像を記事下に移動

まず、ワードプレス管理画面から外観、テーマ編集へと移動し、そこから『content.php』に移行します。

外観 > テーマ編集 > content.php

この中から以下の記述を探しだし、コピーします。コピー後はこの記述部分だけを削除してください。

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

同じく、『content.php』の中にある『<div class=”entry-content”>』の記述部分を探しだし、その『上』に、先ほどコピーした記述を貼ります(コピペ)。

Twenty Twelve のアイキャッチを記事タイトル下に移動4

コピペしたら更新をクリックします。無事、更新が完了すればアイキャッチ画像は記事タイトル下に移動されています(以下の画像を参照)。

Twenty Twelve のアイキャッチを記事タイトル下に移動5

しかし、このままだとアイキャッチ画像と記事文の間が狭いので、スタイルシート (style.css)にて調整します。調整するタグは以下の通りです。

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

このタグをスタイルシート(style.css)の最下部に貼ります。これでアイキャッチ画像が記事タイトルの下にきて、文章との間にも適度なスペースができて、バランスが良くなりました。

以上で、Twenty Twelve のアイキャッチ画像を記事タイトル下に移動するカスタマイズ手順は終了です。

SPONSORED LINK