アフィーロード

アフィリエイトがあるじゃないか!

*

アイキャッチ画像を記事の先頭に自動で表示させる簡単な方法!

    2015/09/13

記事の先頭に画像があると、見栄えが良さそうだなと思います。

しかし、アイキャッチ画像を用意するのも面倒なのに、さらにもう一枚となると結構な手間になりそうなので考えてしまいます。。。

アイキャッチ画像・・・そう記事一覧のサムネイルです。

記事の掴みようの画像なので、トップ画像としても適しています。これを併用すればいい訳ですよ!

直接記事の先頭に貼り付けても良いのですが、自動で貼り付けてくれる方法があるので楽しましょうw

その方法は非常に簡単。設定したアイキャッチ画像は、記事一覧のサムネイル以外に、新着記事や関連記事にも表示されているので、同じ方法を使って記事本文の先頭に挿入するだけです。

サムネイルを本文先頭に自動で表示させる手順

単一記事に関するコードはsingle.phpに記述されています。親テーマを直接編集するより子テーマを編集した方が、後々良いのでそうします。詳しくは、WordPressのテーマをカスタマイズするなら、まず子テーマを作ろう!を参考にしてください。

  1. single.phpの子テーマを作成する。
  2. 子テーマのsingle.phpに親テーマのsingle.phpの内容を全てコピーする。
  3. 子テーマのsingle.php内に<?php the_post_thumbnail();  ?>を挿入する。
</div> 
   <?php the_post_thumbnail(array(640,480)); ?> //アイキャッチ
   &nbsp;
   <?php the_content(); //本文 ?>

解説

the_post_thumbnail();はアイキャッチに設定した画像を表示するための関数です。()内の引数は、’thumbnail’・’medium’・’large’・’full’(シングルクォーテーションで囲む)、もしくは幅と高さをピクセル単位で指定した配列になります。

例では、array(640,480)としていますが、この場合、画像の幅が650pxかつ高さが320pxを超えない範囲いっぱいに表示します。アイキャッチ画像が一覧用の大きさに合わせている様な場合は、’full’でいいでしょう。

画像に枠を付けている場合は、記事ブロックの幅より少し小さくします。また、高さが長過ぎると鬱陶しくなるので、小さめにした方が良さそうです。

&nbsp;は画像と本文との間隔を空けるために追加したものです。

本文を画像の右に回りこませる

画像を小さ目サイズにして、横のスペースに本文を表示したい場合の方法です。

single.php

<div id="topimg">
   <?php the_post_thumbnail(array(650,320)); ?> //アイキャッチ
</div>
<?php the_content(); //本文 ?>

style.css

#topimg {
   float:left;
   margin-right:10px;
   margin-bottom:10px;
}

 画像表示部分を<div>で囲って、CSSでfloatを使って回り込ませ、右と下に余白を取っています。

まとめ

サムネイル作りは凝り出すと時間もかかって面倒ですが、読者の目を引かせる重要な要素なので頑張って作りましょう。

でも良い画像が思いつかない時は、適当でもいいよねw

 - WordPress, テーマ

Message

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

  関連記事

Akismetでスパムコメントをフィルタリングする

我がブログ最初の訪問者はスパムサイト様でした(笑)どこから嗅ぎ付けるの分かりませ …

サイドバー広告を表示させ続ける追尾広告の実装方法【STINGER5】

アフィリエイトについて扱ってるブログなのに、今まで広告を全く掲載していませんでし …

目次
「Table of Contents Plus」プラグインで目次を簡単に作成!

雑誌を読む時は、まず目次から見るという人は多いと思います。 目次を見ると、記事の …

ヘッダー画像を広げたブログ幅に調整する【STINGER5】

ブログの一番上に付けるヘッダー画像を変更しました。 だた、そのまま変更したのでは …

WordPressのテーマをカスタマイズするなら、まず子テーマを作ろう!

そろそろブログのデザインをどうにかしたいなと思うわけですが、どうやらいきなりテー …

STINGER5
STINGER5をWordPressのテーマに選んでみた

WordPressをインストールして、まずやるべきは記事を書くことではなく、ブロ …

ビジュアルエディタのレイアウトをブログと同じにする

記事を書いてはプレビュー、また書いてはプレビュー・・・・・ 少々几帳面なのか、文 …

WordPressで定番のメールフォーム用プラグイン「Contact Form 7」を導入する

ブログには、お問い合わせ用のメールフォームが必須ですよね。 記事の内容に関する問 …

STINGER5の子テーマでCSSが上手く反映されない原因を解決!

子テーマを作ったので、取り合えず文字サイズでも変更してみようと思ったのですが、な …

WordPressをインストールした後やっておきたい事のまとめ

新しいサイトを作って、WordPressをインストールした後に毎回しておくべき事 …