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

アイキャッチ画像を記事タイトル文の左横に表示する方法について。

content.phpファイルにあるアイキャッチ画像を表示するthe_post_thumbnail()の位置はそのままにして引数にthumbnailを設定します。

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

次にstyle.cssファイルを編集します。

.entry-header img.attachment-thumbnail {
	float: left;
	margin-right: 15px;
}
.entry-header .entry-title {
	display: inline;
}
.entry-header:after {
	content: ""; 
 display: block; 
 clear: both;
}

タイトル文の長さや画像の大きさにより、改良していく必要がありますが、とりあえず上記コードをstyle.cssファイルに追加することで画像例のような表示をすることができます。※タイトル下のボーダーは、上記コードに無いので別途追加が必要です。