Life Jam

専門知識ゼロの初心者がWordPressに挑戦中

WordPress

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

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

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

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

スポンサーリンク

ビフォーアフター

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

STINGER PLUS+ アイキャッチ 記事最上部

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

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

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

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

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

最初の方にある、上記のコードをコピーし、

少し下にあるタイトルと本文の間、このコードでいうと14行目に貼り付けてください。

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

スタイルシート(style.css)で調整

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

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

上記のコードを追記してください。

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

まとめ

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

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

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

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

-WordPress

スポンサーリンク