いまやブログにおいてアイキャッチ画像は無くてはならない存在になりつつあります。
特にWordPressにおいては、基本的にアイキャッチ画像を設定することが出来るようになっているテーマがほとんどです。
しかし、その幾度となくどれにしようか選びに選んだアイキャッチ画像ですが多くの場合は記事内には表示されません。（テーマにもよります。）
そこで…。
メルカリ招待コード：
プロモーションを含みます
WordPressアイキャッチ画像を自動で投稿記事に表示する方法
Stinger6 Stinger7 WordPress カスタマイズ カスタマイズ 伝えたいこと 備忘録This session is using IPv4 is established in
今日は2025年6月5日です。
この記事は2017年2月7日のものです。現在は状況が異なる可能性がありますのでご注意ください。
2025年6月5日 (木曜日)本日の人気記事トップ１０
2025年6月5日 (木曜日)↓における週間月間人気記事トップ３は？↓
- 本日
- 週間
- 月間
-
シガーライターがない車にシガーライターソケットの付け方と増設方法 5PV
ここのところ最近の車にはシガーライターソケットもしくはシガーライター自体が付いていない車があります。 そんな時には、昨今ではスマホの充電などでも車のシガーライターソケット電源は必須とも言えます。 しか…
-
エクストレイルT32マイナーチェンジ後ステアリング外し方 4PV
エクストレイルT32型（NT32も含め）がマイナーチェンジしてから早いもので、もうすぐ2年になります。エンジンなどの大きな変更などはなく、室内の内装デザインや外装のちょっとしたデザイン変化、そして、一…
-
ECUをリセットする方法。アイドリング不安定だったのでしょうがなく 3PV
過去の記事で、車も人間と同じようにメンテナンスは大事です。 と記載しました。 ですが、メンテナンスのし過ぎもいかがなものかという感じになりました。（メンテナンスしないのはもっと悪いですが…。） その記…
-
初めての経験でした。（汗）…。 キーレスエントリー、キーレスリモコンがついた鍵がエンジンを回す時にボキッと折れてしまいました。（汗）…。 プラスチックの本体部分と鉄のキー部分が分裂してしまいました。 …
-
ECUをリセットする方法。アイドリング不安定だったのでしょうがなく 29PV
過去の記事で、車も人間と同じようにメンテナンスは大事です。 と記載しました。 ですが、メンテナンスのし過ぎもいかがなものかという感じになりました。（メンテナンスしないのはもっと悪いですが…。） その記…
-
エクストレイルT32やエクストレイルT33などでは純正LEDヘッドライトが採用されているグレードや車種があります。メーカーオプションのLEDヘッドライトだと光軸調整が難しいと思われる方のいらっしゃるか…
-
ECUをリセットする方法。アイドリング不安定だったのでしょうがなく 19PV
過去の記事で、車も人間と同じようにメンテナンスは大事です。 と記載しました。 ですが、メンテナンスのし過ぎもいかがなものかという感じになりました。（メンテナンスしないのはもっと悪いですが…。） その記…
-
初めての経験でした。（汗）…。 キーレスエントリー、キーレスリモコンがついた鍵がエンジンを回す時にボキッと折れてしまいました。（汗）…。 プラスチックの本体部分と鉄のキー部分が分裂してしまいました。 …
-
エクストレイルT32やエクストレイルT33などでは純正LEDヘッドライトが採用されているグレードや車種があります。メーカーオプションのLEDヘッドライトだと光軸調整が難しいと思われる方のいらっしゃるか…
テーマで自動的にアイキャッチ画像を記事内（記事直上など）の任意の位置に自動的に表示させる方法です。
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度手間をかける必要はありません。
せっかくのアイキャッチ画像です。
是非、是非、試してみてください！(^-^)！
あなたにおすすめ
¥2,463 （2025/05/22 19:48時点 | Amazon調べ）
ポチップ
あなたが訪問してから
⏰ 0 秒経過 🎉
入学入社まであと…入学入社祝いはどんなPresent（プレゼント）でどのように過ごされますか？
ホワイトデープレゼントは以下などの豊富なキャンペーン商品から選ぶと良いと思います。
今週の人気記事トップ１０
ECUをリセットする方法。アイドリング不安定だったのでしょうがなく 
車のキーナンバー確認方法。キーレス紛失や壊れた時 
エクストレイルフォグランプが下を向きすぎている光軸調整方法 
エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ 
カーメイトのエンジンスターターでエラー15表示と対処方法 
エクストレイルT32おすすめエアコンフィルター交換方法 
エクストレイルT32マイナーチェンジ後ステアリング外し方 
エクストレイルT32おすすめバッテリーPanasonicカオスバッテリー 
シガーライターがない車にシガーライターソケットの付け方と増設方法 
エクストレイルT32ヘッドライト光軸調整方法
ブログサービスが始まってから:
おすすめの記事一部広告
- キッチンシンク下がドブ臭い下水臭い原因と解決方法178
- エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ88
- ECUをリセットする方法。アイドリング不安定だったのでしょうがなく80
- 車のキーナンバー確認方法。キーレス紛失や壊れた時71
- アイドリングストップシステム異常警告灯表示対処方法50
- ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法46
- カーメイトのエンジンスターターでエラー15表示と対処方法45
- ステアリング交換とステアリングスイッチの増設と外し方後期型仕様に35
- エクストレイルT32で電動レカロをバッ直でなく車に取り付ける方法33
- シガーライターがない車にシガーライターソケットの付け方と増設方法32
Total650
よろしかったらシェアよろしくお願いします。
コメントを閉じる
comment
This site uses Akismet to reduce spam. Learn how your comment data is processed.
新着コメント