n2apps.jp

≪モバイル・ネット全般の話題から、ライフハック的な記事まで≫ 気が向いたときに、思うままに書いています。

【STINGER3】で、記事本文の上にアイキャッチ画像を表示する方法

      2014/07/10

アイキャッチ画像を表示

WordPressテーマの「STINGER3」を利用して、色々とカスタマイズしています。

STINGERは、WordPressの初心者の方でも簡単にSEOに強く、アフィリエイトも出来るテンプレートです。 …

今回は、記事のトップにアイキャッチ画像を表示する方法について書きたいと思います。

SPONSORED LINK

アイキャッチ画像について

アイキャッチ画像とは

「ブログ記事の顔」となる画像のことです。

大抵のブログで使われているので分かるかと思いますが、ブログの訪問者などに「この記事が読みたい!」と思わせるために、記事ごとに設定する画像のことです。

記事の内容をイメージできるような画像がよく使われます。

訪問者の”目を惹きつける”ということで、”アイキャッチ”画像というわけです。

「STINGER3」におけるアイキャッチ画像の役割

WordPressテーマ「STINGER3」において、アイキャッチ画像の役割は大きいものです。

STINGER3では、アイキャッチ画像を表示する領域があらかじめ確保されており、設定していないと「NO IMAGE」というつまらない画像が表示されます。

noimage

このような「NO IMAGE」がたくさん並んだブログ、なんだか味気ない気がします。

そのため、STINGER3を利用する方は「アイキャッチ画像を設定する」ように気を付けているのではないでしょうか?

アイキャッチ画像を記事トップに表示する

テーマを編集する

WordPressの「外観」-「テーマ編集」から、「単一記事の投稿(single.php)」を編集します。

<?php the_content(); ?>と書かれている部分(記事本文が表示されるところ)を探して、その上に次のようなコードを追加します。

<p>
  <?php the_post_thumbnail('medium'); ?>
</p>

「medium」という部分は、ミディアム。

つまり、「中サイズ(300px)」ということを示しています。

画像サイズを変更する

「medium」の部分を変更することで、サイズを変えることができます。

the_post_thumbnail();                  // パラメータなし -> サムネイル

the_post_thumbnail('thumbnail');       // サムネイル
the_post_thumbnail('medium');          // 中サイズ
the_post_thumbnail('large');           // 大サイズ

the_post_thumbnail( array(100,100) );  // 他のサイズ

 - WordPress , , ,

Message

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

  関連記事

moreタグ
【WordPress】 moreタグの「続きを読む」が「(さらに…)」と表示される原因と対策

WordPressで運営している別のサイトで、記事の途中に moreタグ(&lt …

モバイルバナー
【STINGER3】で、スマホ向けに「320×50 – モバイル バナー」を表示する方法

WordPressテーマの「STINGER3」を利用して、色々とカスタマイズして …

stinger3
WordPressテーマ「STINGER3」を導入してみた(いろいろテスト)

WordPressのテーマ「STINGER3」を導入してみました。 ということで …

stinger5
WordPressテーマを「STINGER3」から「STINGER5」に変更しました(カスタマイズ内容まとめ)

当サイト「n2apps.jp」のWordPressテーマを「STINGER5」に …

n2apps.jp RSS
WordPressのRSS Feedに「アイキャッチ画像」を追加 & moreタグまでを表示する方法

WordPressのRSS feedは「全文を表示」と「抜粋のみを表示」から設定 …