私が昨日掲載した「WordPressの外観テーマをCocoon（コクーン）に変えてみた」の中で、「カテゴリー記事一覧や、関連記事のところに、画像を表示させるには、それぞれの記事にアイキャッチ画像(eye-catching photos)を設定する必要がある。」と書いたが、一瞬、1400記事にも及ぶコラムのすべてにアイキャッチ画像を手作業で設定しないといけないのかと思った。
確かに、無味乾燥な「NO IMAGE」が並んでいるよりは、サムネイル画像があったほうが見映えが良いに決まっているが、それにしても・・・と心の中で毒づいていた。
しかし、今どきそんなことをしなくても大丈夫だった。
アイキャッチ画像(eye-catching photos)とは
アイキャッチ画像(eye-catching photos)とは、文字通り、目を惹くための画像という意味で、ブログ記事に誘導しやすいように設定するものだ。
例えば、グルメの記事なら美味しい料理の写真、旅行の記事なら旅立ちを想定させるような乗り物の写真などで、訪問者の読みたい気持ちを掻き立てるツールとなっている。
これが、あるのとないのとでは、記事へのアクセス数が大きく違うと言われていて、クラウドワークスでブログ記事作成を請け負っていたときも、設定は必須と言われていた。（仕事で言われていながら自分の個人ブログではやってなかった・・・苦笑）
WordPressでアイキャッチ画像を手動で設定
自動設定方法と銘打っておきながら、いきなり手動設定を紹介するとは何事だと怒られそうだが、ブログを始めたばかりで記事数が少なく、かつ、今後もアイキャッチ画像(eye-catching photos)を手動で設定したいという方は、WordPressの右サイドバーにある「アイキャッチ画像」というところで設定するのが最も確実だ。
十数記事しかなければ、自分の持っている画像ファイルをアップロードして、設置するといいだろう。
余計なプラグインをインストールする必要もなく、初級者でも十分に対応できると思う。
ここで注意しないといけないのは、著作権フリーの画像を持ってくる場合、アフィリエーターや小遣い稼ぎを目的に、広告を設置している人は、商用利用可能のものを使わないと法的なトラブルになる可能性があるので、その点は確認してから利用して欲しい。
Cocoon設定の画面でアイキャッチ画像を自動設定
基本設定
WordPressの外観のテーマとして、Cocoon（コクーン）を有効化している場合は、「Cocoon設定」の画面でアイキャッチ画像(eye-catching photos)を自動的に設定する機能を使うのが最も容易だろう。
- WordPressの左サイドバーの「Cocoon設定」から「画像」タブを選択する。
- 「アイキャッチの自動設定」のところにある「アイキャッチ自動設定を有効にする」にチェックをする。
これをすることにより、本文に最初に挿入した画像が自動的にアイキャッチ画像となる。 - 本文中に画像が存在しない記事は、「No Image 設定」で画像を指定することにより、自動的にアイキャッチ画像が挿入される。
指定しない場合は、NO IMAGEのままになるので、後で適宜処理するといいだろう。 - 「変更をまとめて保存」をクリックする。
この方法だと、本文に最初に入れた画像が自動的にアイキャッチ画像となるため、手動で設定する場合に比べて、その分だけ省力化になる。
但し、Cocoon設定によるアイキャッチ画像の自動設定は、これらの設定をオンにした以降に更新した記事にしか適用されないので、過去に掲載した記事がたくさんある場合には、プラグインをインストールする方が望ましい。
ちなみに、過去の記事が少ない場合は、さかのぼって一つ一つ記事を更新すれば、本文に入れた最初の画像が、アイキャッチ画像として反映される。
画像の囲み効果
「Cocoon設定」から「画像」タブをクリックしたときに、「画像の囲み効果」という選択肢がある。
これは、白地の画像（例えば、操作画面のスクリーンショットなど）は、記事の本文に貼り付けると、双方が保護色になって見分けがつきにくいので、枠線を色付きにしてわかりやすくする効果がある。
しかしながら、現時点で、特定の画像だけの個別設定ができないので、どうしても必要なときはAdobe Photoshop Elementsなどの画像処理ソフトを使って自作することになる。
Auto Post Thumbnailプラグインを使う方法
私のように過去の投稿記事が1400（そこまでなくとも）にも及ぶと、すべての記事について、アイキャッチ画像(eye-catching photos)を手動で設定するわけにはいかない。
プラグインのインストール
ここで過去の記事のアイキャッチ画像もすべて自動で設定してくれるプラグインがAuto Post Thumbnailというものだ。
これを使えば、過去の記事も含めて、本文に入れた最初の画像をアイキャッチ画像として自動的に設定してくれる。
- WordPressの左サイドバーにある「プラグイン」から「新規追加」を選択する。
- 「プラグインを検索」のところに、Auto Post Thumbnailと入れると、500件以上のプラグインがヒットするので、製作者である「Aditya Mooley」か「Tarique Sani」で検索する。
- 該当のプラグインが出たら、インストールから有効化までを行う。
- WordPressの左サイドバーにある「設定」からAuto Post Thumbnailを選択して、Generate Post Thumbnailsのボタンをクリックする。
- しばらく待って、100％になったら完了、私の場合は総記事数が1400近かったので、30分から40分くらい時間がかかった。
この方法を使った場合は、本文中に画像がない記事については、NO IMAGEと表示されるだけになるので、後から画像を本文に追加して更新すれば、それがアイキャッチ画像としても認識される。
アイキャッチ画像のダブリを解消
前出の「Cocoon設定の画面でアイキャッチ画像を自動設定」の機能と、Auto Post Thumbnailを併用すると、アイキャッチ画像が本文中でダブることがあるので、これを解消するために次の処理を行うと良い。
- WordPressの左サイドバーにある「Cocoon設定」から「画像」タブを選択する。
- 「本文上にアイキャッチを表示する」のチェックを外す。
- 「変更をまとめて保存」をクリックする。
この設定を行うと、後からWordPressの右サイドバーにある「アイキャッチ画像」というところに画像を登録しても本文には反映しない。
つまり、動画がメインの記事などで、記事一覧などにサムネイル画像だけ表示させたいときも使える機能である。
Adobe Photoshop Elementsを使った画像の枠線の設定
ここは、私の備忘録の意味で書いておくので、同じソフトをお持ちの方以外は参考にならないかもしれない。
ちなみに、私の持っているのは、Adobe Photoshop Elements 14である。
- Adobe Photoshop Elementsが起動したら、エキスパートモードに切り替える。
- メニューバーの「ファイル」－「開く」から加工する画像を展開させる。
- メニューバーの「レイヤー」－「新規」－「背景からレイヤーへ」を選択する。
- 画面左側に展開されている「長方形選択ツール」を使って、画像全体を囲む。
- メニューバーの「選択範囲」－「選択範囲を変更」－「境界線」で、幅を20ピクセル程度に設定する。
- メニューバーの「レイヤー」－「新規塗りつぶしレイヤー」－「べた塗り」を選択してOKをクリックする。
- カラーピッカー（べた塗りのカラー）ダイアログボックスが出るので、枠線として相応しい色を選択してOKすると、外側から20ピクセルの範囲でべた塗りされた枠線が引かれる。
最後に
私の場合、特に、初期の頃のブログは、画像を入れることをあまりしていなかったので、今更ながら10年前の記事に画像を入れ直すかという命題にぶち当たっている。
今どきのブログはビジュアルも重要視されているので、訪問者の皆様におかれては、記事の内容は元より、構成もしっかりと研究して、より良いものを仕上げていただきたいと思う。
最後に余談になるが、アイキャッチ画像というのを英訳するときは、eye-catching photosか、eye-catching picturesとなるので、間違ってもeye-catch imageとは言わないようにして欲しい。
和製英語の氾濫が日本人の英語力を低下させている一つの原因なんだよね。
コメント