自分力ブログ

糖質制限で加齢の食い止め、睡眠の短時間化、ビジネススキルの向上を目指します٩( ᐛ )و

【Stingerのカスタマイズ】アイキャッチ画像を記事トップに表示させる

      2015/12/27



アイキャッチ画像を設定しよう

 

グーグルアドセンスの申請中だったので外部サイトの写真やリンクは控えてました。その間、ブログの見た目が寂しいこと、寂しいこと。画像がないってこんなに寂しいもの?

 

こんな感じの殺風景なブログになってました。

eyecatch

 

この度、広告許可が下りたのでさっそくアイキャッチ画像を各記事につけました。画像をつけると、ご覧のとおり。

gazou
 

おぉ!!かなり見栄えがよくなりました!!文章たいしたことなくても、画像が入るといっちょまえのブログに見えるから不思議。

 

記事の上にも画像が表示されてるかな。。。

 

ん??画像は記事紹介のちっちゃい画像(サムネイル)だけなのね。。。記事には画像は入らない。うーん、ちょっと寂しいなあ(´Д` )

 

と思ってたときにふと、記事内の画像を自動でアイキャッチ画像に設定してくれるプラグインが便利!!という記事を読んだことを思い出した。

 

それができるんならその逆もできるはず。つまり、アイキャッチ画像に設定した画像を記事のトップに貼り付ける方法が。。。たまにはいいこと考えるじゃん、自分と思った瞬間。

 

記事上の画像設定が自動でできるようになった

 

今回見つけたありがたいブログ記事。

wordpressのstinger5の記事冒頭にアイキャッチ画像を表示する為の改造

 

やっぱり同じことを考えていた人がいたのかという喜び。stinger5というメジャーなテーマ(テンプレート)のおかげで無事問題解決できてほっとしました。

 

このサイトを参考にしながら下記コードをsingle.phpにコピペしていきます。

 

外観→テーマの編集で単一記事の投稿(single.php)を表示させたら検索です。Ctrlキー+fキーで右上に検索窓ができるので、the_content();を入力すると色がついてすぐ見つけられます。その上に下記コードをコピペするだけ(´∀`)

 

ペーストした後<?php the_content(); //本文 ?>が重複しないように注意。

<! ここからアイキャッチ画像 >
<div class=“post-thumbnail”>
  <?php the_post_thumbnail(‘full’);?>
</div>
<! ここまでアイキャッチ画像 >
<?php the_content(); //本文 ?> ←これ重複しないように注意!!

 

私の場合は抜粋文・クレジット表記は必要なかったので、上記のコードを貼り付けただけです。

 

本文の上に画像を表示させるだけならスタイルシート(CSS)は触らなくて大丈夫です。

 

保存してサイトを表示させて、記事のページを見ると。

 

おぉーーーーーー!!!画像がちゃんと出てるーーー!!と興奮したのでした。

 

PHPがさっぱりわからない私では解決できない問題でしたが、今回参考にしたブログ記事のおかげでちゃんと画像が表示されました。ありがとうございます(´∀`)

 - stingerカスタマイズ

グーグルアドセンス 記事下

スポンサーリンク

グーグルアドセンス 記事下

スポンサーリンク

Comment

  1. 隊長 より:

    やっぱ画像は重要ですよねー

    たったこれだけで全然印象がかわるんですからねー

  2. girigiri26 より:

    ひーさん、こんばんは

    おぉ、前回もアイコン付いたとコメントしましたが、今回はアイコンも画像も付きましたねぇ。凄い。
    やはり、画像が記事に入るとちょっと違いますねぇ。
    良いですぅ。で、この写真がステキです。

  3. tattsun より:

    はじめまして、こんにちは。

    記事参考になりました!すぐ使わせていただきます^^
    かく言う私も整体をしているものです。
    またお邪魔させていただきます!

  4. […] wordpressのテーマstinger5の記事冒頭にアイキャッチ画像を表示する為の改造 |… […]

  5. むーち より:

    以前使っていた有料テーマからスティンガー6に変えた際、
    記事上の画像が消えてしまい、困っておりました。
    (記事一覧には表示されていました)
    大変役に立つ記事をありがとうございました!

Message

メールアドレスが公開されることはありません。

  関連記事

サイドバーの人気記事をStinger5と同じ仕様にしてみたよ

やっぱりデザインが統一されてないと気持ちが悪い   先日プラグイン(W …

【Stingerのカスタマイズ】プロフィール欄をつくろう

スティンガーのカスタマイズでお困りの方は   Stingerのカスタマ …

ワードプレスが全くわからない1年前の自分に読ませたい記事を書きました

去年の今頃私は焦ってました。   ワードプレスでブログを始めようとした …

【Stingerのカスタマイズ】グローバルナビゲーションをつけたい

グローバルナビゲーションをつけて分かりやすく メニューバー、ナビバーなどいろいろ …

ブログの表示速度が遅くなっているですと!?原因は画像の重さ?『EWWW Image Optimizer』を設定

グーグルさんが表示速度遅いですよ!!と教えてくれた   いつものように …

ワードプレスの個人情報って簡単に流出しちゃうんですね(汗)今回私がした対策

とあるブログに助けられた。無知って怖い。。。   とあるブログとは、私 …

【Stingerのカスタマイズ】Googleアドセンスを初めてブログに貼ってみた

ブログを始めたらGoogleアドセンスに申し込み ブログを始めて記事を書いたらG …

意外な盲点!!文字を大きくするだけで読まれるブログになる!!

既にある自分の強みをテーマに考えてました。   見つけました。私が人に …

【Stingerのカスタマイズ】『WordPress Ping Optimizer』でPing送信をする

Ping送信ちゃんとしてますか?? ブログを始めたばかりで右も左もわからない。黙 …

【Stingerのカスタマイズ】文字を大きく・行間を広くする

【Stingerのカスタマイズ】で私が最初にやったこと   ワードプレ …