現在の接続環境は
です

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

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

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

スマホファースト

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

所要時間目安：約2分

This session is using　 IPv4 　is established in

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

目次に行く･戻る

2025年4月2日 (水曜日)本日の人気記事トップ１０

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

  • 本日
  • 週間
  • 月間

  1. エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ 4PV

    車の購入後、乗ろうが乗らまいが経年劣化というものは付きものなのですが、特にプラスチック部分や両面テープ部分などは経年劣化がどうしても起きてきてしまいます。 そんな車でも長めにお気に入りの愛車となれば長…

    もっと読む

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

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

    もっと読む

  3. 純正シートベルトバックル

    シートベルトがきついのでシートベルト延長（バックル延長） 4PV

    すべての車に付いているシートベルト…。 ですが、体型や車種によってシートベルトのバックルが短いとシートベルトを締めた際にきつくて運転自体がしにくくなってしまいます。 それでは、せっかくの安全装置である…

    もっと読む

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

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

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

    もっと読む

  2. エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ 24PV

    車の購入後、乗ろうが乗らまいが経年劣化というものは付きものなのですが、特にプラスチック部分や両面テープ部分などは経年劣化がどうしても起きてきてしまいます。 そんな車でも長めにお気に入りの愛車となれば長…

    もっと読む

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

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

    もっと読む

  1. エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ 4PV

    車の購入後、乗ろうが乗らまいが経年劣化というものは付きものなのですが、特にプラスチック部分や両面テープ部分などは経年劣化がどうしても起きてきてしまいます。 そんな車でも長めにお気に入りの愛車となれば長…

    もっと読む

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

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

    もっと読む

  3. 純正シートベルトバックル

    シートベルトがきついのでシートベルト延長（バックル延長） 4PV

    すべての車に付いているシートベルト…。 ですが、体型や車種によってシートベルトのバックルが短いとシートベルトを締めた際にきつくて運転自体がしにくくなってしまいます。 それでは、せっかくの安全装置である…

    もっと読む

カーメンテナンスWAKO'S

今日は2025年4月2日です。

メルカリ招待コード：

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

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

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

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

Windows10サポート終了まで

【AmazonスマイルSALE】！


3/28(金)9時から4月1日（火）23時59分まで、「AmazonスマイルSALE」開催予定

3月28日(金曜日) ～ 2025年4月1日(火曜日) 23:59まで

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

パブリックDNSサーバーでマルウェアブロックとアダルトサイトブロック設定方法IPv6

Android iPhone PC Windows10 インターネット スマホ セキュリティ ツール 伝えたいこと 備忘録 設定

iPhone、Androidでもフィッシング対策などDNSサーバー子供や家族を海外サイトやマルウェアから守る

プロバイダによっては、時々DNSサーバーの不具合でインターネットにつながらない時が生じることがあります。その他にもフリーWi-Fiスポットなどではセキュリティーの問題もあります。セキュリティーを気にし…

もっと読む

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

スマホファースト

スマホ 伝えたいこと 備忘録

アクセス数を増やす方法!!それはスマホ…。

ブログやホームページなどのサイトを運営していると、やはり気になるのがアクセス数だと思いわれます。ここ2年から3年で一般人や普通の人？（表現が曖昧ですが無礼のないように）でも、 はてなブログやWordP…

もっと読む

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

フリー素材モデル茜さや

インターネット 伝えたいこと 備忘録

フリー素材モデルが誰なのか調べてみた…。

ここのところ（ここ数年）よく見かけるアイキャッチ画像があると思います。 そんなアイキャッチ画像や文章の途中に画像を表示したりして、読者にアクセントをつけて飽きさせない効果もあると言われる画像（フリー素…

もっと読む

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

最善策

AFFINGER4Pro WordPress テーマ 伝えたいこと 備忘録 時事ネタ

テーマ選びは何が最善策なのか？迷う時はどうした良いのか！？

人生において迷うことは多々あると思います。絶対にあります！！と言い切れますよね。 生まれてから義務教育を終えて高校受験からどの高校に行こうかなどの時が人生においての初めての最善策を選択するのに迷うこと…

もっと読む

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

スマホにサイドバー非表示にする方法

AdSense STINGER PLUS+ Stinger6 Stinger7 WordPress カスタマイズ スマホ 伝えたいこと 備忘録

スマホやモバイル端末でサイドバー非表示・削除にする方法

これまでいろいろなことをブログのカスタマイズについて考えてきました。 現在のブログにおいてはレスポンシブデザインに対応しているサイト・ブログがほとんどかと思われます。 その際に、ブログの場合（当ブログ…

もっと読む

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

鼻毛

伝えたいこと 備忘録 治療

鼻毛脱毛と処理におすすめなワックスGOSSO ゴッソ (ブラジリアンワックス鼻毛脱毛セット)

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━◆◇◆セルフ鼻毛脱毛なら【KING's NOSE WAX】◆◇◆ 一瞬で飛び出た鼻毛とサヨナラ！ 人と話すと必ず目に入る重要部分だからこそ…

もっと読む

あなたが訪問してから

⏰ 0 秒経過 🎉

「Stinger6, Stinger7, WordPress, カスタマイズ, カスタマイズ, 伝えたいこと, 備忘録」の人気記事

入学入社まであと…入学入社祝いはどんなPresent（プレゼント）でどのように過ごされますか？

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

おすすめ！！

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

詳細ページへ

No.1シェアAmazon

おすすめ2

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

詳細ページへ

楽天市場

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


カウントダウンタイマー

おすすめの記事一部広告


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

Multiplex 広告

Total571


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

目次に戻る

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

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

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

目次に戻る

目次に戻る

コメントを閉じる

comment

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


This site uses Akismet to reduce spam. Learn how your comment data is processed.