いまやブログにおいてアイキャッチ画像は無くてはならない存在になりつつあります。
特にWordPressにおいては、基本的にアイキャッチ画像を設定することが出来るようになっているテーマがほとんどです。
しかし、その幾度となくどれにしようか選びに選んだアイキャッチ画像ですが多くの場合は記事内には表示されません。（テーマにもよります。）
そこで…。
メルカリ招待コード：
Stinger6 Stinger7 WordPress カスタマイズ カスタマイズ 伝えたいこと 備忘録
プロモーションを含みます
WordPressアイキャッチ画像を自動で投稿記事に表示する方法
2025年6月27日 (金曜日)本日の人気記事トップ１０
This session is using IPv4 is established in
今日は2025年6月27日です。
この記事は2017年2月7日のものです。現在は状況が異なる可能性がありますのでご注意ください。
2025年6月27日 (金曜日)↓における週間月間人気記事トップ３は？↓
- 本日
- 週間
- 月間
-
初めての経験でした。（汗）…。 キーレスエントリー、キーレスリモコンがついた鍵がエンジンを回す時にボキッと折れてしまいました。（汗）…。 プラスチックの本体部分と鉄のキー部分が分裂してしまいました。 …
-
TOYOTAキーレスリモコンの設定方法とキーナンバー（キー番号） 3PV
この度は（今回は？）、プラスチックの経年劣化により車のキーレスリモコンキーの送信機側（トランスミッター）のみをなくしてしまった場合です。（まだスマートキーやインテリジェンスキーと言われる前のキーレスリ…
-
ECUをリセットする方法。アイドリング不安定だったのでしょうがなく 2PV
過去の記事で、車も人間と同じようにメンテナンスは大事です。 と記載しました。 ですが、メンテナンスのし過ぎもいかがなものかという感じになりました。（メンテナンスしないのはもっと悪いですが…。） その記…
-
初めての経験でした。（汗）…。 キーレスエントリー、キーレスリモコンがついた鍵がエンジンを回す時にボキッと折れてしまいました。（汗）…。 プラスチックの本体部分と鉄のキー部分が分裂してしまいました。 …
-
エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ 32PV
車の購入後、乗ろうが乗らまいが経年劣化というものは付きものなのですが、特にプラスチック部分や両面テープ部分などは経年劣化がどうしても起きてきてしまいます。 そんな車でも長めにお気に入りの愛車となれば長…
-
アイドリングストップシステム異常警告灯表示対処方法 20PV
2010年前後以降の車に搭載されていることの多いアイドリングストップシステム。各自動車メーカーによって呼び名は異なりますが、機能としては信号待ちが長い時や停止時間が長い時などに勝手に（自動的に）アイド…
-
初めての経験でした。（汗）…。 キーレスエントリー、キーレスリモコンがついた鍵がエンジンを回す時にボキッと折れてしまいました。（汗）…。 プラスチックの本体部分と鉄のキー部分が分裂してしまいました。 …
-
エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ 32PV
車の購入後、乗ろうが乗らまいが経年劣化というものは付きものなのですが、特にプラスチック部分や両面テープ部分などは経年劣化がどうしても起きてきてしまいます。 そんな車でも長めにお気に入りの愛車となれば長…
-
アイドリングストップシステム異常警告灯表示対処方法 20PV
2010年前後以降の車に搭載されていることの多いアイドリングストップシステム。各自動車メーカーによって呼び名は異なりますが、機能としては信号待ちが長い時や停止時間が長い時などに勝手に（自動的に）アイド…
テーマで自動的にアイキャッチ画像を記事内（記事直上など）の任意の位置に自動的に表示させる方法です。
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度手間をかける必要はありません。
せっかくのアイキャッチ画像です。
是非、是非、試してみてください！(^-^)！
あなたにおすすめ
¥1,980 （2025/06/22 12:34時点 | Amazon調べ）
ポチップ
あなたが訪問してから
⏰ 0 秒経過 🎉入学入社まであと…入学入社祝いはどんなPresent（プレゼント）でどのように過ごされますか？
ホワイトデープレゼントは以下などの豊富なキャンペーン商品から選ぶと良いと思います。
今週の人気記事トップ１０
車のキーナンバー確認方法。キーレス紛失や壊れた時 
エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ 
ECUをリセットする方法。アイドリング不安定だったのでしょうがなく 
アイドリングストップシステム異常警告灯表示対処方法 
TOYOTAキーレスリモコンの設定方法とキーナンバー（キー番号） 
ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法 
キッチンシンク下がドブ臭い下水臭い原因と解決方法 
エクストレイルT32おすすめエアコンフィルター交換方法 
エクストレイルでカーテシランプ新設、増設取り付け方法 
アルミテープチューン貼る場所で燃費向上と走行性能アップTOYOTAの特許を試してみた
おすすめの記事一部広告
- エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ93
- ECUをリセットする方法。アイドリング不安定だったのでしょうがなく92
- 車のキーナンバー確認方法。キーレス紛失や壊れた時86
- キッチンシンク下がドブ臭い下水臭い原因と解決方法44
- ステアリング交換とステアリングスイッチの増設と外し方後期型仕様に42
- カーメイトのエンジンスターターでエラー15表示と対処方法42
- ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法34
- エンジンオイル漏れ止めのおすすめはPlus91評価レ PV32
- アイドリングストップシステム異常警告灯表示対処方法30
- エアバック（タカタ製？）交換方法と後期型仕様に27
Total678
よろしかったらシェアよろしくお願いします。
コメントを表示（0）
新着コメント