現在の接続環境は
です

記事内にプロモーションが含まれています。

Windows10サポート終了まで
国民総株主
¥1,650 （2024/11/30 16:49時点 | Amazon調べ）
Amazon
楽天市場
Yahooショッピング
メルカリ

プロモーションを含みます

Stinger6 Stinger7 WordPress カスタマイズ カスタマイズ 伝えたいこと 備忘録

スマホファースト

WordPressアイキャッチ画像を自動で投稿記事に表示する方法

所要時間目安：約2分

This session is using　 IPv4 　is established in

この記事は2017年2月7日のものです。現在は状況が異なる可能性がありますのでご注意ください。

カーメンテナンスWAKO'S

2025年1月13日 (月曜日)↓における週間月間人気記事トップ３は？↓

  • 本日
  • 週間
  • 月間
  1. エクストレイルフォグランプの光軸調整後

    エクストレイルフォグランプが下を向きすぎている光軸調整方法 2PV

    人気車種のSUVで日産エクストレイルT32型のフォグランプは、光軸が下を向きすぎているためせっかくLEDフォグランプにしたりHIDにしたりしてもその恩恵をあまりかんじられません。要は、ボンネットが少し…

    もっと読む

  2. アイドリングストップシステム異常警告灯表示対処方法 1PV

    2010年前後以降の車に搭載されていることの多いアイドリングストップシステム。各自動車メーカーによって呼び名は異なりますが、機能としては信号待ちが長い時や停止時間が長い時などに勝手に（自動的に）アイド…

    もっと読む

  3. エクストレイルT32ヘッドライト光軸調整方法 1PV

    エクストレイルT32やエクストレイルT33などでは純正LEDヘッドライトが採用されているグレードや車種があります。メーカーオプションのLEDヘッドライトだと光軸調整が難しいと思われる方のいらっしゃるか…

    もっと読む

  1. エンジンスターターリモコン

    カーメイトのエンジンスターターでエラー15表示と対処方法 38PV

    夏冬に特に重宝するのが、エンジンスターターです。 メーカーはCARMATEやCOMTECユピテルなど各社ありますが、一番のオススメはリモコンから多くの情報を得ることができるカーメイト製品です。 なぜか…

    もっと読む

  2. カーナビテレビが見れなくなったICカードが正常に動作しませんでした

    ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法 32PV

    本日ではなく昨日になってしまいますが、それまでカーナビで地デジ対応のナビで突然エンジンをかけなおしたら・・・・・・。 「ICカードが正常に動作しませんでした。販売店にお問い合わせください。」 なんてい…

    もっと読む

  3. アイドリングストップシステム異常警告灯表示対処方法 22PV

    2010年前後以降の車に搭載されていることの多いアイドリングストップシステム。各自動車メーカーによって呼び名は異なりますが、機能としては信号待ちが長い時や停止時間が長い時などに勝手に（自動的に）アイド…

    もっと読む

  1. エンジンスターターリモコン

    カーメイトのエンジンスターターでエラー15表示と対処方法 38PV

    夏冬に特に重宝するのが、エンジンスターターです。 メーカーはCARMATEやCOMTECユピテルなど各社ありますが、一番のオススメはリモコンから多くの情報を得ることができるカーメイト製品です。 なぜか…

    もっと読む

  2. カーナビテレビが見れなくなったICカードが正常に動作しませんでした

    ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法 32PV

    本日ではなく昨日になってしまいますが、それまでカーナビで地デジ対応のナビで突然エンジンをかけなおしたら・・・・・・。 「ICカードが正常に動作しませんでした。販売店にお問い合わせください。」 なんてい…

    もっと読む

  3. アイドリングストップシステム異常警告灯表示対処方法 22PV

    2010年前後以降の車に搭載されていることの多いアイドリングストップシステム。各自動車メーカーによって呼び名は異なりますが、機能としては信号待ちが長い時や停止時間が長い時などに勝手に（自動的に）アイド…

    もっと読む

今日は2025年1月13日です。

目次に行く･戻る

2025年1月13日 (月曜日)本日の人気記事トップ１０

メルカリ招待コード：

いまやブログにおいてアイキャッチ画像は無くてはならない存在になりつつあります。

特にWordPressにおいては、基本的にアイキャッチ画像を設定することが出来るようになっているテーマがほとんどです。

しかし、その幾度となくどれにしようか選びに選んだアイキャッチ画像ですが多くの場合は記事内には表示されません。（テーマにもよります。）

そこで…。

アドセンス336pxPC閲覧記事下表示1つ目コード


この記事を読む方へのオススメ


テーマで自動的にアイキャッチ画像を記事内（記事直上など）の任意の位置に自動的に表示させる方法です。

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度手間をかける必要はありません。

せっかくのアイキャッチ画像です。

是非、是非、試してみてください！(^-^)！

バレンタインまであと…VALENTINEはどんなPresent（プレゼント）でどのように過ごされますか？

バレンタインプレゼントは以下などの豊富なキャンペーン商品から選ぶと良いと思います。

おすすめ！！

世界中でNo.1のシャアを誇るAmazonでのお得なお買い物でお得をしよう！！ネット通販なので、もちろん24時間年中無休です。健康商品から食品、車カスタマイズ商品、大手家電メーカー商品やパソコンの自作サプライ商品、その他アマゾン・プライムでは映画やドラマなど多くの作品や番組を見ることができます。マスクなど衛生商品も今では必須アイテム。一番信用できて一番商品数の多いAmazonでの買い物が絶対にオススメ！！

詳細ページへ

No.1シェアAmazon

おすすめ2

楽天による季節特集です。それぞれの季節ごとにお得なお買い物商品やお得な旅行商品、その他にもAmazon同様に国内最大の買い物ポータルサイトです。楽天をメインにお買い物されている方はポイントやSPUも貯まりさらにお得に！！楽天カードや宇佐美系列のガソリンスタンドでも楽天ポイントが今では貯まります。それらのポイントを貯めてお得にお買い物や旅行商品その他にもパソコンサプライや車カスタマイズ商品など楽天も充実しています。

詳細ページへ

楽天市場

ブログサービスが始まってから:

0

カウントダウンタイマー

あなたにおすすめな関連記事

🎉 Counting Up! 🎉
Loading...
奇跡という日常

伝えたいこと 備忘録

ありふれた奇跡。それが日常だったのかな…。奇跡の連続が…。

奇跡って、辞書などで引かなくても（調べなくても）誰もが当たり前に使っている言葉だと思います。でも、その奇跡っていう事象・事柄の連続が毎日毎日その都度その都度に起こっていて、その積み重ねが日常なのかな。…

もっと読む

インフィード広告アドセンス

PC カスタマイズ カスタマイズ ツール 伝えたいこと 備忘録

ma4からmp3に音声変換動画変換無料オンラインツールサービスサイト

スマホやガラケーなどでの留守番電話などの音声録音の保存形式の拡張子は、ma4という拡張子が多いです。 ma4拡張子は現在開発段階でありますが、将来的にma4拡張子になるのかなとも感じています。 ただ、…

もっと読む

インフィード広告アドセンス

フォルダアイコンサイト

PC カスタマイズ 伝えたいこと 備忘録

フォルダアイコン変更方法とフリーアイコン素材で作業効率アップ

さてさて、いまさらですがWindowsのフォルダアイコンって一律に決まっていますよね！？ そんなフォルダアイコンをカラーバリエーション豊富に？変更して見易さをよくしてどのフォルダが重要でどんな内容なの…

もっと読む

インフィード広告アドセンス

自動車税納税通知書

メンテナンス 伝えたいこと 時事ネタ 車

自動車税納税通知書が来ない…。再発行してもらった方法と自動車税一覧

新年度も始まり1ヶ月が過ぎました。 5月と言えば自動車税の納税通知書が来る月でもあります。そして、納付期限も同じ5月末日までです。ゴールデンウィークも明けて通常通りの営業や運行・運用に戻った世の中です…

もっと読む

インフィード広告アドセンス

バイラルメディア風SNSボタン

Stinger6 Stinger7 WordPress カスタマイズ テーマ 伝えたいこと 備忘録

Stinger6、Stinger7でバイラルメディア風ボタン設置方法

ここのところ、よくブログサイトや大手企業のニュースサイトなどの記事の下に、 上記の画像のようなバイラルメディア風のSNSボタンが設置されているのをよく見かけると思います。 これまでは、とくに気にしなか…

もっと読む

インフィード広告アドセンス

PC カスタマイズ メンテナンス 不具合 伝えたいこと 備忘録

左クリックチャタリングと接触不良富士通マウスM-U0019分解方法

以前にも同じマウス（富士通マウスM-U0019の左クリックと右クリックがうまく反応しなくなり、変なところで勝手にクリックしてしまったりチャタリングを起こしてしまい始めてきて他のバッファロー製品マウスや…

もっと読む

あなたが訪問してから

⏰ 0 秒経過 🎉

あなたが訪問してから

0 秒

おすすめの記事一部広告


お小遣い稼ぎにアンケート。

Multiplex 広告

Total472


アドセンス336pxPC閲覧記事下表示1つ目コード

目次に戻る

よろしかったらシェアよろしくお願いします。

この記事タイトルとURLをコピー

-Stinger6, Stinger7, WordPress, カスタマイズ, カスタマイズ, 伝えたいこと, 備忘録

目次に戻る

目次に戻る

コメントを閉じる

comment

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。