【Twenty Twelve】アイキャッチ画像の表示位置カスタマイズ1

Twenty Twelveでアイキャッチ画像は、記事タイトル上に表示されます。
そのアイキャッチ画像の表示位置を記事本文の横に表示するカスタマイズについて。

Thumbnail

content.phpファイルにあるthe_post_thumbnail()を「div.entry-content」の後ろに移動させます。また、the_post_thumbnail()に引数を「’thumbnail’」を設定します。

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

style.cssファイルに以下のコードを追加します。

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

【追記】

トップページで記事を抜粋表示するときは、div.entry-summaryのあとにthe_post_thumbnail()を配置する方法もあります。

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

レイアウトを設定するには、style.cssファイルに下のコードを追加します。

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です