Sorairo

photo credit: thisismyurl via photopin cc

テーマを自作する〜その②〜アイキャッチ画像に関するあれこれの1回目。

今日は、WordPressのアイキャッチ画像について、自作テーマを作成する中で調べてみたことをエントリーします。

ひと昔前はブログの記事ひとつひとつにいちいち画像を設定するなんてことはしてなかったと思いますが、最近というかここ数年の流行というかどこまで主流になっているのかは分かりませんがどのブログを見ても必ずと言っていいほどアイキャッチ画像が設定されていますね。
かく言う私も必ず入れていますけどね。
印象として、何となく記事が読みやすくなる気がします。

というわけでWordPressのブログでアイキャッチ画像を設定する方法(特にテーマを自作する際にやること)についてご紹介します。

advertisement

アイキャッチ画像とは

突然ですが、アイキャッチ画像に明確な定義とかってあるんでしょうかね。
「アイキャッチ」は英語で書くと「Eye Catch」となるので、人の心を掴むと同様に人目を掴む、人目を引くみたいな意味でしょうか。
イメージとしては、記事に関連した画像を表示することで、その記事の内容がひと目で分かるようになり、記事も読みやすくなる、そんな気がします。
その辺については以下の記事が参考になりました。

テーマを自作する際に必要なこと

さて、ここからは自作テーマにおいてアイキャッチ画像を使えるようにするために必要なことをご紹介します。
自作以外のテーマ(デフォルト、無料、有料問わず)を使っている方は恐らく何も意識しなくて良いかと思いますが、自作テーマの場合、自分で設定しなければいけません。
まずは、テーマファイルに「functions.php」を追加し(すでにある場合は追加しなくて大丈夫です)、その中に以下のコードを入力します。

次に、アイキャッチ画像を表示したい箇所に以下のコードを入力します。

これだけ。
これだけでアイキャッチ画像が表示されるようになります。
簡単ですね!

アイキャッチ画像について細かく設定する

ここまで紹介したコードではアイキャッチ画像がアップロードしたままのサイズ(フルサイズ)で表示されます。
では、アイキャッチ画像のサイズを変更するにはどのようにしたらよいのでしょうか。
これも比較的簡単です。

一番簡単なのは、アイキャッチ画像を表示したい箇所に記入したコードに以下の青文字の部分を追記します。
追記した部分は、WordPress管理画面の「設定」→「メディア」で指定しているサイズに対応しています。

どのサイズで表示したいかによって上のコードのどれかを入力します。
ページによってアイキャッチ画像のサイズを変えたい時には便利な方法です。

画像のサイズをもっと細かく指定する

上のやり方でも比較的自由な大きさに変更できるのですが、本文中の挿入する他の画像との兼ね合いもあるため、アイキャッチ画像のみサイズを弄りたい時にはfunctions.phpに入力したコードに以下のように追記します。

例:横幅250px、縦幅100pxにしたい場合

ちなみに、画像を縮小する際に切り抜きをする場合は「true」、しない場合(元画像をそのまま指定したサイズに縮小する)には「false」を指定します。
デフォルトはfalseなので、切り抜きをする場合だけ「true」と入れればいいんでしょうね。

こうすることで、アイキャッチ画像を表示させたい箇所に

と入力すれば、横幅250px、縦幅100pxの画像が表示されます。

ここまでは以下の記事を大いに参考にさせていただきました。

最後に

いかがでしたでしょうか。
難しそうでしたけど、意外と簡単だったかもしれません。
長くなりましたので今日はここで終わりますが、次回はアイキャッチ画像に使える写真サイトのご紹介と、アイキャッチ画像のキャプションについてエントリーしたいと思います。

advertisement

related posts

WordPressの記事中に内部リンクと外部リンクを出力するショートコード

WordPressの内外部リンクについてショートコードを実装してみましたのでご紹介します。

jQueryプラグインのLightboxを導入しました。

画像を表示するときにフワッと拡大表示させるjQueryプラグインのLightboxを実装しました。

jQueryを使って記事中の目次を開閉式にしました。

目次が開閉式だとどんなメリットがありますかね。表示領域が広がるくらいですか。

WordPressの記事中にプラグインなしで目次を追加しました。

プラグインを使わずに記事中に目次を追加しましたのでご紹介します。

WordPressのテーマをLION MEDIAに変更しました。

WordPressのテーマをLION MEDIAに変更しましたのでご紹介します。

テーマを自作する〜その③〜アイキャッチ画像に関するあれこれの2回目。

WordPressのアイキャッチ画像に使える写真サイトの紹介と、キャプション表記についてのコツについてご紹介します。

私のブログ更新作業環境まとめ。

ブログを書く環境って大事ですよね。継続することの難しさはその環境のせいもあるかもしれません。

WordPressのオリジナルテーマを自作しました。

テーマを変えたら自分でも作りたくなったので作ってみました。

テーマを自作する〜その①〜投稿日などの日付表示を英語表記にする方法。

WordPressのテーマを自作するにあたり、色々な壁にぶつかります。その解決法について自分の忘備録も兼ねてシェアしていきたいと思います。

WordPressにプラグインなしで色々と実装する方法

プラグインは便利ですけど重たくなる場合があるためできるだけそれに頼らずテーマ作成を行いました。