アフィーロード

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

*

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

    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

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

  関連記事

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

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

ブログのファビコンを変更しました

ブログのファビコンをSTINGER5のまま放置していたので、そろそろ変えることに …

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

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

「SyntaxHighlighter Evolved」と「SH TinyMCE Button」を使ってコードをスマートに表示する

相変わらず四苦八苦しているのですが、今回はソースコードをどうやって綺麗にブログに …

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

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

リビジョンは便利機能だけど、溜まり続けるので何とかするプラグイン「Revision Control」と「Delete Revision Manager」

記事を書いていると、保存する前にうっかりページを移動したり、閉じてしまう事があり …

Google Analytics by Yoastを使えばトラッキングコードを貼るのも簡単です!

解析ツールの定番Google Analytics(アナリティクス)を導入するとき …

ワードプレスのロゴ
エックスサーバーにWordPressをインストールする

サーバーを借りました、ドメインも取りました、次が何をするの? それは、WordP …

変更不可能なWordPressのログインIDを変えてセキュリティアップする方法

ログインIDなんてニックネームみたいなものだからと、適当に付けている人は多いので …

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

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