Loading…

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

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

本日の人気記事BEST10

所要時間目安:2


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

スマホファースト

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

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

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

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

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


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

おすすめの記事一部広告

関連記事

YouTube

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

YouTube動画が遅い。重い時、掲載しても遅くならない方法

すごいっ!! YouTubeの動画をブログに貼り付けても重くならない・遅くならない方法があったなんて…

もっと読む

LINEブロックされてもメッセージを送る方法

LINE 伝えたいこと 備忘録

LINEでブロックされてもメッセージを送る方法

  今は、多くの人が無料アプリのLINEを使用している方々が多いと思います。 私も、スマホ…

もっと読む

鳥越俊太郎さん女性疑惑否定

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

鳥越俊太郎さん週刊文春の記事を否定。当たり前だと思うけど…。

(アイキャッチ画像はhttps://news.tbs.co.jp/newseye/tbs_newse…

もっと読む

マイクロカプセルとゲリラ雷雨ゲリラ豪雨水害

伝えたいこと 備忘録

ここ10年のゲリラ豪雨やゲリラ雷雨、経験したことのない水害(雨)に思うこと

ここのところ毎年のように水害による被害が、日本のどこかで起こっています。全国的にどこで台風被害や突然…

もっと読む

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

おすすめ!!

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

おすすめ2

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

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



この記事が良かったら
いいね!お願いします(#^.^#)

WordPressデビュー津々浦々の
最新情報をお届けします

言えないことはTwitterで!!



目次に戻る


コメントを閉じる

comment

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

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