Loading…

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

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

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

スマホファースト

所要時間目安：約2分

This session is using　 IPv4 　is established in

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

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

カーメンテナンスWAKO'S

  • 本日
  • 週間
  • 月間
  1. 年末年始渋滞予想

    年末年始の渋滞予測・渋滞予想は、名神・東名は1月2日、3日がピークで55km…。 2PV

    さてさてもうそろそろ、年末年始の帰省ラッシュ時期に近づいてきました。年に幾度となくこの帰省ラッシュという言葉が踊るのでしょうか。 まずは今回のように年末年始、そして夏のお盆時期の会社が夏休みの時期が大…

    もっと読む

  2. 間違いメールと迷惑メールとフィッシング詐欺メール判断方法

    免責事項 2PV

    免責事項当サイトを利用することで発生した損失や損害・その他トラブルに関しては一切の責任を負いかねます。あらかじめご了承くださいますようお願いいたします。 掲載しているコンテンツの内容が間違っている場合…

    もっと読む

  3. スマホファースト

    スマホファースト用にStinger6Stinger7をカスタマイズ 2PV

    WordPressはカスタマイズ性が優れているのは周知の事実だと思います。function.php内にしていする関数？などによっていろいろな事が出来るようになります。 また、テーマによってカスタマイズ…

    もっと読む

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

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

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

    もっと読む

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

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

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

    もっと読む

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

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

    もっと読む

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

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

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

    もっと読む

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

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

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

    もっと読む

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

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

    もっと読む

本日の人気記事トップ１０

目次に行く･戻る

メルカリ招待コード：

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

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

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

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

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

所要時間表示閲覧時間表示

伝えたいこと 備忘録

ヒトってなに？人って何？人間ってなに？成長て何？

ヒトなのだから・・・。 女性でも男性でも同じ人間であってヒトなのだから・・・。 そして発生学的には、はじめはみんなメスなのだから・・・。

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

インターネット セキュリティ 伝えたいこと 備忘録 光コラボ 時事ネタ

光ファイバー通信速度が301Tbpsになるかも10Gbpsの3万1000倍

現在のインターネット光ファイバー通信速度は各社によって異なります。1Gbpsだったり10Gbpsだったりプランにもよりますが最大通信速度として謳われているのは10Gbpsです。しかも、10Gbpsとい…

もっと読む

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

福島第一原発排気筒100兆ベクレル

伝えたいこと 備忘録 時事ネタ

原発排気筒の中は100兆ベクレル!って…。本当なの!?倒壊リスクなど。

今はもう…。原発と言うと、 東日本大震災の時の甚大な日本に及ぼした天災による被害のひとつであるということを思い浮かべる方も多いかと思われます。特に福島第一原子力発電所の1号機・2号機・3号機・4号機の…

もっと読む

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

ブログのデザイン夕日と夕焼けで考える

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

ブログデザインがセンスの良いレイアウトやデザインにならない。Simple is Bestにしたい…。

人に見ていただくのでブログ運営においてデザインも重要です。自分の備忘録のみであれば、然程デザインやユーザビリティにこだわらなくても良いのかもしれません。テーマを変えてみようと思いましたが、これまでのカ…

もっと読む

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

AMP画像

SNS WordPress インターネット カスタマイズ 伝えたいこと 備忘録

AMP化する方法プラグインなしで対応してみる

今年の初め頃にGoogleがスマホやモバイルユーザーに特化したサイト表示ができるようになるAMPというものを発表しました。 その後もHTTPS everywhere（SSL化）などもありますが…。 は…

もっと読む

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

コマンドrobocopyバックアップ

PC Windows10 カスタマイズ 備忘録

Windows10でWindows.old削除でなくバックアップ方法

多くの方々がWindows10にアップグレードした後に、 Cドライブ直下に「Windows.old」というフォルダがあり、 さらに結構な容量があります。 なので、 HDD容量が少なめの方やWindow…

もっと読む

Stinger6, Stinger7, WordPress, カスタマイズ, カスタマイズ, 伝えたいこと, 備忘録」同じカテゴリーの記事一覧

おすすめの記事一部広告


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

Multiplex 広告

Total368


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

目次に戻る

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

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

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

目次に戻る

目次に戻る

コメントを閉じる

comment

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

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

Windows10 Windows10起動が遅い時早くする2つの方法,起動ロゴ非表示設定と自動サインイン

エアコンパネルLED化方法 エアコンパネルLED化

You may choose to prevent this website from aggregating and analyzing the actions you take here. Doing so will protect your privacy, but will also prevent the owner from learning from your actions and creating a better experience for you and other users.