賢威の投稿ページで記事上部にアイキャッチ画像を表示

公開日: 2014年02月15日
最終更新日: 2014年02月16日

アイキャッチ

時間的にも作業的にも何かと面倒なアイキャッチ画像。トップページだけにしか表示されないのは、もったいない!ということで、投稿ページ上部にもアイキャッチ画像を表示させるよう、PHPファイルをカスタマイズします。

はじめに

みなさん、アイキャッチ画像は設定していますか?

アイキャッチ画像

私は今まで色んなブログを運営してきましたが、アイキャッチ画像に関しては、今回inosh blogで初めて挑戦してみました。

理由は、何か面倒くさそうだったからです。

そして導入してみて思ったのは、やっぱり面倒くさいです。

何が問題かというと、私はビックリするくらいデザインセンスがないので、こういうのは苦手なのです。

私は幼い頃から10代後半くらいまでは、嫌なことから徹底して逃げてきました。

そんな私は小学生のころ、お絵かき?デッサン?みたいな時間に、書いては消して書いては消して、結局たった1本の線すら書けずに授業が終わった…なんてこともたびたびありましたw

それくらい、お絵かき系は苦手で、Webデザインにしても、イラスト作成にしても、全然ダメなんですよね^^;

だけど今は、興味があるし、上手くなりたいんです

めんどくさそうだな~と思ってたし、実際にめんどくさいですが、アイキャッチ画像を導入することで、1つの記事を書くたびに嫌でも1つのアイキャッチ画像を作らないといけない(またはどこかから拾ってこないといけない)ことになりますので、必然的にデザイン力が上達すると思うんです。

拾ってくるとしても、色んなイラストや写真を見比べることになりますし、探す過程で今まで知らなかった素材サイトに出会えることもあります。

また、単純にアイキャッチ画像がある方がブログのデザイン的にも良いですよね。

今はまだアイキャッチ画像がイケてないので、逆に素人感まる出しかもしれませんけどw

でも、これからイケてるアイキャッチ画像を作れるようになるため、頑張っていきたいと思っています。

と前置きが長くなってしまいましたが、せっかく苦労して作ったアイキャッチ画像。
トップページにしか表示されないのは、もったいないですよね?

こんな感じでトップページにはアイキャッチ画像が表示されているのに↓
ブログのトップページ

投稿ページにいくと、いきなり記事本文に入ってしまいます↓
投稿ページ

こ、これは・・・

もったいなーい

もったいない

出典:http://www.au.kddi.com/

ということで、投稿ページの上部にもアイキャッチ画像を表示させるようにしましょうよ、と。回りくどくなってしまいましたが、つまりはそういうことです。

私が使用しているテーマ「賢威」でアイキャッチ画像を導入するまでの手順を、例として以下に紹介したいと思います。

single.phpに、アイキャッチ画像を読み込む関数を記述する

まずは、投稿ページの上部にアイキャッチ画像を読み込むためのコードを、single.phpに記述します。

アイキャッチ画像(別名:サムネイル画像)を呼ぶための関数は、
<?php the_post_thumbnail(); ?>
です。

これを、以下のように記述します。

single.php(賢威のデフォルト)

<div class="post">
<h2 class="post-title"><?php the_title(); ?></h2>
<p class="post-meta"><span class="post-data"><?php the_time('Y年m月d日') ?></span> <?php if (!is_attachment()) { ?>[<span class="post-cat"><?php the_category(', ') ?></span>]<?php } ?></p>
<?php get_template_part('social-button'); ?>

下矢印

single.php(コード追記後)

<div class="post">
<h2 class="post-title"><?php the_title(); ?></h2>
<p class="post-meta"><span class="post-data"><?php the_time('Y年m月d日') ?></span> <?php if (!is_attachment()) { ?>[<span class="post-cat"><?php the_category(', ') ?></span>]<?php } ?></p>
<?php the_post_thumbnail(); ?>
<?php get_template_part('social-button'); ?>

これにより、記事投稿日とカテゴリー名などの下に、アイキャッチ画像が追加されました。
投稿ページにアイキャッチ画像が表示された

あとは、CSSでちょこちょこってやって、自分通りのデザインにすれば良いですね!

私の場合、記事の抜粋部分(meta description)を自動取得ではなくて1つ1つ手書きで書きたい派なので、アイキャッチ画像の右側にそれを表示させようかな~とか思ってます。

なので、このアイキャッチ部分のカスタマイズに関しては、次回の記事でやりたいと思います^^

\(^o^)/ ぼっけぇシェア \(^o^)/

コメントを残す

サブコンテンツ
ページトップへ戻る ページエンドへ進む