いまやブログにおいてアイキャッチ画像は無くてはならない存在になりつつあります。
特にWordPressにおいては、基本的にアイキャッチ画像を設定することが出来るようになっているテーマがほとんどです。
しかし、その幾度となくどれにしようか選びに選んだアイキャッチ画像ですが多くの場合は記事内には表示されません。（テーマにもよります。）
そこで…。
メルカリ招待コード：
プロモーションを含みます
WordPressアイキャッチ画像を自動で投稿記事に表示する方法
Stinger6 Stinger7 WordPress カスタマイズ カスタマイズ 伝えたいこと 備忘録This session is using IPv4 is established in
今日は2025年5月15日です。
この記事は2017年2月7日のものです。現在は状況が異なる可能性がありますのでご注意ください。
2025年5月15日 (木曜日)本日の人気記事トップ１０
2025年5月15日 (木曜日)↓における週間月間人気記事トップ３は？↓
- 本日
- 週間
- 月間
-
初めての経験でした。（汗）…。 キーレスエントリー、キーレスリモコンがついた鍵がエンジンを回す時にボキッと折れてしまいました。（汗）…。 プラスチックの本体部分と鉄のキー部分が分裂してしまいました。 …
-
ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法 3PV
本日ではなく昨日になってしまいますが、それまでカーナビで地デジ対応のナビで突然エンジンをかけなおしたら・・・・・・。 「ICカードが正常に動作しませんでした。販売店にお問い合わせください。」 なんてい…
-
2010年前後以降の車に搭載されていることの多いアイドリングストップシステム。各自動車メーカーによって呼び名は異なりますが、機能としては信号待ちが長い時や停止時間が長い時などに勝手に（自動的に）アイド…
-
エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ 31PV
車の購入後、乗ろうが乗らまいが経年劣化というものは付きものなのですが、特にプラスチック部分や両面テープ部分などは経年劣化がどうしても起きてきてしまいます。 そんな車でも長めにお気に入りの愛車となれば長…
-
初めての経験でした。（汗）…。 キーレスエントリー、キーレスリモコンがついた鍵がエンジンを回す時にボキッと折れてしまいました。（汗）…。 プラスチックの本体部分と鉄のキー部分が分裂してしまいました。 …
-
エクストレイルT32やエクストレイルT33などでは純正LEDヘッドライトが採用されているグレードや車種があります。メーカーオプションのLEDヘッドライトだと光軸調整が難しいと思われる方のいらっしゃるか…
-
エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ 31PV
車の購入後、乗ろうが乗らまいが経年劣化というものは付きものなのですが、特にプラスチック部分や両面テープ部分などは経年劣化がどうしても起きてきてしまいます。 そんな車でも長めにお気に入りの愛車となれば長…
-
初めての経験でした。（汗）…。 キーレスエントリー、キーレスリモコンがついた鍵がエンジンを回す時にボキッと折れてしまいました。（汗）…。 プラスチックの本体部分と鉄のキー部分が分裂してしまいました。 …
-
エクストレイル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度手間をかける必要はありません。
せっかくのアイキャッチ画像です。
是非、是非、試してみてください！(^-^)！
あなたにおすすめな関連記事
-
2025年4月1日から「車庫証明ステッカー」廃止、交付手続きは従来通り
これまで1991年に導入された車庫証明の車の貼り付ける車庫証明ステッカーシールは廃止されます。車のナンバーから車庫証明の有無が確認できるようになったためのようです。ただし、新車購入時や中古車購入時など…
-
Windows10無償アップグレード終了後大幅なアップデートで不具合はないか…。
Windows10が昨年2015年7月29日に正式にリリースされて、先日マイクロソフトはWindows10ユーザーが3億人を突破したと公表しています。また、同じくしてWindows7、Windows8…
-
Windows10アップグレード通知、ウイルスかとも…。あまりに酷すぎて（強引とも…。）
Windows10が正式にリリースされてから10ヶ月と半月になります。 3月後半ころから多くのWindows7とWindows8（Windows8.1）ユーザー（ユーザ）から悲鳴のような声が上がってい…
-
Windows10でスタートアップ登録してアプリ自動起動する方法すべてのユーザと自分のみがユーザの場合
かれこれWindows10がリリースされてあと約2ヶ月で早いもので2年になってしまいます。昨年の夏にはAnniversaryUpdateのメジャーアップデートがあり、その前にはリリースされた2015年…
-
ページ表示速度が遅いのでphotonが使いたくてJetpackプラグインをインストールしてみた…。
ここのところ、サイト（ブログ）のページ表示速度が気になってしまいます。以前に運営していたBloggerブログでも同様のことを考えたりしていました。ですが、サイトのページ表示速度が少しくらい遅くても時代…
人気の商品が日替わりで登場。毎日お得なタイムセール「Amazonタイムセール全体」
¥2,749 （2025/05/08 05:43時点 | Amazon調べ）
ポチップ
あなたが訪問してから
⏰ 0 秒経過 🎉
入学入社まであと…入学入社祝いはどんなPresent（プレゼント）でどのように過ごされますか？
ホワイトデープレゼントは以下などの豊富なキャンペーン商品から選ぶと良いと思います。
今週の人気記事トップ１０
キッチンシンク下がドブ臭い下水臭い原因と解決方法 
エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ 
車のキーナンバー確認方法。キーレス紛失や壊れた時 
Office2010・2013でプラダクトキー紛失して確認・再発行してもった方法 
多要素認証を楽天証券、SBI証券、松井証券などのネット系証券会社やSMBC日興証券など 
2025年4月（先月）のETCトラブルNEXCO中日本が方針転換で後払いでの料金請求しない 
ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法 
スロットルポジションセンサー調整で不安定なアイドリング調整 
エクストレイルT32マイナーチェンジ後ステアリング外し方 
帯状疱疹かと思ったけれど蕁麻疹で治らない時にデルマクリン軟膏とアンテベート軟膏
ブログサービスが始まってから:
おすすめの記事一部広告
- キッチンシンク下がドブ臭い下水臭い原因と解決方法213
- エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ92
- 車のキーナンバー確認方法。キーレス紛失や壊れた時79
- ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法66
- アイドリングストップシステム異常警告灯表示対処方法54
- エクストレイルT32マイナーチェンジ後ステアリング外し方50
- 多要素認証を楽天証券、SBI証券、松井証券などのネット系証券会社やSMBC日興証券など45
- エクストレイルT32おすすめバッテリーPanasonicカオスバッテリー44
- カーメイトのエンジンスターターでエラー15表示と対処方法44
- ECUをリセットする方法。アイドリング不安定だったのでしょうがなく37
Total624
よろしかったらシェアよろしくお願いします。
コメントを閉じる
This site uses Akismet to reduce spam. Learn how your comment data is processed.
comment