いまやブログにおいてアイキャッチ画像は無くてはならない存在になりつつあります。
特にWordPressにおいては、基本的にアイキャッチ画像を設定することが出来るようになっているテーマがほとんどです。
しかし、その幾度となくどれにしようか選びに選んだアイキャッチ画像ですが多くの場合は記事内には表示されません。（テーマにもよります。）
そこで…。
スポンサーリンク
人気記事
車のキーナンバー確認方法。キーレス紛失や壊れた時
143,589件の PV
ECUをリセットする方法。アイドリング不安定だったのでしょうがなく
103,204件の PV
Windows10,Windows8.1プロダクトキー確認方法
75,172件の PV
Windows10でエラーコード0x800705b4の対処方法
67,186件の PV
スロットルポジションセンサー調整で不安定なアイドリング調整
39,518件の PV
車から異音の原因。カラカラ、カタカタ、コトコトなど…。
38,021件の PV
ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法
37,945件の PV
Office2010・2013でプラダクトキー紛失して確認・再発行してもった方法
37,185件の PV
ハンドルのセンターがズレている時の直し方タイロッドエンド調整による方法
35,614件の PV
カーメイトのエンジンスターターでエラー15表示と対処方法
30,128件の PV
テーマで自動的にアイキャッチ画像を記事内（記事直上など）の任意の位置に自動的に表示させる方法です。
2つの方法があるのですが、
基本的なテーマなどの場合には以下のコードを自分が記事内で出力させたい場所にコピー・アンド・ペーストでOKです。
以下のコードになります。
<!? ここからアイキャッチ画像 ?>
<div class=“post-thumbnail”>
<?php the_post_thumbnail(‘full’);?>
</div>
<!? ここまでアイキャッチ画像 ?>
このコードを例えば…。
single.php内の自分が表示させたい部分に貼り付けるだけで、自分が悩んで選びに選んだアイキャッチ画像を自動的に表示させることができます。
ただアイキャッチ画像はそのまま100%（full）の状態で出力されて表示されるので、
ちゃんと、
アイキャッチ画像の大きさを考えてのアイキャッチ画像設定をしていないとやたらと大きな画像になってしまいます。orz
次に、アイキャッチ画像にスタイルを適用させて大きさを調整させる方法です。
こちらも基本的には、
上記と同じなのですが、class指定でCSSによって大きさを任意に調整することが可能になります。
まずはsingle.php内に任意の場所に追記するコードです。
<!? ここからアイキャッチ画像 ?>
<div align="center">
<div class="st-eyecatch"><?php the_post_thumbnail('full'); ?>
</div>
</div>
<!? ここまでアイキャッチ画像 ?>
ここで、class指定をst-eyecatchと設定しました。
なので、
style.CSSにも該当となるclassのcssを追記します。
今回の場合は以下のコードのようになります。
.st-eyecatch
{
margin: -20px -15px 15px;
}
.st-eyecatch img
{
width:100%;
background-color: #000;
}
参考）
今回はStinger6のテーマを使わせていただいているのでst-eyecatchとしました。class指定のネーミングは他とかぶらなければ任意のclass名で大丈夫です。
pickup）
アンダーライン赤色の部分の数字を100%から自分のブログやデザインに合わせてパーセンテージを上げたり下げたりして調整してみてください。
最後に、
これまで、
アイキャッチ画像をせっかく悩んで選びに選んで設定してきたのに、記事を読んでくれる人にはそのアイキャッチ画像を見てもらえない…。
だから、2度手間をかけて投稿記事のはじめに自分でアイキャッチ画像と同じ画像を設定していた方々などはもう2度手間をかける必要はありません。
せっかくのアイキャッチ画像です。
是非、是非、試してみてください！(^-^)！
comment