【STINGER PLUS+】記事最上部のアイキャッチ画像をタイトル下に移動してみた

STINGER PLUS+では、「STINGER管理」から設定を行うことで、記事の最上部にアイキャッチを表示させることができます。

そのアイキャッチ画像をタイトル下、つまり記事本文の直前に移動してみました。

以前のバージョンのSTINGERでは、タイトル下にアイキャッチが表示されていたので、こちらの方が見慣れているという人もいるかもしれませんね。

ビフォーアフター

言葉で説明するよりも、カスタマイズ前後のキャプチャ画像を見た方が分かりやすいですよね。

まず、こちらがアイキャッチ画像が記事最上部にあるデフォルトの状態。

そして、こちらがアイキャッチ画像をタイトル下に移動した状態。

どちらが見やすいかというのは、人それぞれ好みによるんでしょうか…。個人的には、タイトル下にアイキャッチがある方が好みなので、カスタマイズしていきます。

個別投稿（single.php）でアイキャッチ画像の位置変更

WordPress管理画面で「外観」⇒「テーマの編集」⇒子テーマ「single.php」の編集画面へ。

<?php //アイキャッチ画像を挿入
if( is_single() or is_page() ){
	$postID = $wp_query->post->ID;
	$eyecatchset = get_post_meta( $postID, 'eyecatch_set', true );
}else{
	$eyecatchset = '';
} 
if ( has_post_thumbnail() && (( isset($GLOBALS['stdata53']) && $GLOBALS['stdata53'] === 'yes' ) || ( isset( $eyecatchset ) && $eyecatchset === 'yes' ))) { ?>
	<div class="st-eyecatch"><?php the_post_thumbnail('full'); ?>
	</div>
		
<?php } //アイキャッチ画像を挿入ここまで ?>

<h1 class="entry-title"><?php the_title(); //タイトル ?></h1>

<div class="blogbox <?php st_hidden_class(); ?>">
	<p><span class="kdate"><i class="fa fa-pencil" aria-hidden="true"></i>
             <time class="entry-date date updated" datetime="<?php the_time(DATE_W3C); ?>">
		<?php the_time( 'Y/m/d' ); ?>
	</time>
	<?php if ( $mtime = st_get_mtime( 'Y/m/d' ) ) {
		echo ' <i class="fa fa-repeat"></i> ', $mtime;
	} ?>
	</span></p>
</div>



<div class="mainbox">

	<?php the_content(); //本文 ?>

コピー元のコードは、削除もしくは「<?php /*」と「*/ ?>」で囲んでコメントアウトしておいてください。

スタイルシート（style.css）で調整

「single.php」を編集し、アイキャッチの位置が変更されたので、余白等の調整を行います。

子テーマ「style.css」の編集画面へ。

/* アイキャッチ画像の調整 */
.st-eyecatch {
    margin: 20px 0px; /* 上下の余白 左右の余白 */
}
.st-eyecatch img {
    border-radius: 0px; /* 画像を角丸に */
}

これで、本文と同じ幅のアイキャッチがタイトル下に表示されます。上下の余白はお好みで調整を。

まとめ

記事のイメージを伝えるアイキャッチ。

魅力的なアイキャッチ画像を設定することで、SNS経由でのアクセスが増えたり、回遊率が上がったりします。

きちんと設定していますか？

記事内での位置で大きな影響はないと思いますので、デフォルトのままかタイトル下に移動するか、好みに合わせて変更してみてください。