アイキャッチは「人目を引く」といった意味があるように、サイトの装飾を華やかにし、トップの記事やサイドバーなどに利用すればアクセスアップにも繋がります。

しかし、Twenty Twelveではアイキャッチ画像を指定すると、デフォルトサイズのでかでかとした画像が記事の上にどーんと表示されてしまう。

記事で使用している画像をアイキャッチに使うと、同じ画像が出て来てもう何がなんだかという状態。元々、Twenty　Twelveはトップやアーカイブは全文表示なので、その設定であれば記事上に大きな画像が出てくるのは悪くないのかもしれない。

しかし、同じ画像が出てくるのは好ましくないので、アイキャッチは使用している画像以外を使えということか。

アイキャッチ自体はとても便利な機能なので使わない手はないのだが、とにかく、このままじゃ使いにくい。そこで、何とかカスタマイズをしたいところ。

「どういじくるか」というのは、「どうしたいか」にもよるし、同じ目的でも手段はいくつかある。とりあえず、色々検討した中で分かりやすいのを選択しました。

【参考にさせて頂いたサイト様】
【Twenty Twelve】アイキャッチ画像の表示位置カスタマイズ1

アイキャッチの指定場所

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

省略

まず、デフォルトのアイキャッチは指定されているのかというところ。場所はcontent.phpの上記の箇所で、ハイライトされている行がそのコード。単純にこれを取っ払ってしまえば、アイキャッチは表示されなくなる。

そして、これを移動すれば表示場所は変えられるだろうということも考えられる。

アイキャッチのサイズの変更

場所を移動する前に、もう1つネックとなっていたデフォルトではフルサイズになっているアイキャッチサイズの変更も考えておきたい。

the_post_thumbnail() の()の引数が指定されていないが、パラメータを使うことで、【設定】⇒【メディア】で設定しているサイズを指定可能。

thumbnail：サムネイル表示
medium：中サイズ表示
large：大サイズ表示
full：フルサイズ表示

<?php the_post_thumbnail('thumbnail'); ?>

よく使われるアイキャッチ画像のように、サムネイル表示にしたければ上記のようになる。

表示場所の変更（抜粋表示）

<div class="entry-summary"><?php the_post_thumbnail('thumbnail'); ?>
    <?php the_excerpt(); ?>
        </div><!-- .entry-summary -->
        <?php else : ?>
        <div class="entry-content">
省略

個人的には、トップページやアーカイブは抜粋表示にすることが多く、Twenty Twelveもそうカスタマイズしています。

Twenty Twelveのトップページを抜粋表示の一覧にする方法

上記の箇所は、条件文を増やしてトップやアーカイブも抜粋表示にした箇所。抜粋表示にしている場合は、entry-summaryの後ろにアイキャッチ表示のコードを挿入してあげれば、タイトルの下にアイキャッチ画像が表示される。

サムネイルサイズのアイキャッチを抜粋タイトル下に表示させることができたが、記事はその下に表示されているので、少し間延びした感じになる。（サンプルが良くないのでちょっと分かりにくいです）

このままで良ければこれ以上手を加える必要はないが、さらに画像の右に文章を回り込ませるように表示させたい。

レイアウトの設定

.entry-summary .attachment-thumbnail {
  float: left;
  margin-right: 15px;
  margin-bottom: 10px;
}

style.cssに上記のコードを追記すれば完了。

画像の右に文章を回り込ませました。

次ページは別のパターンについて