ジゴワットレポート

映画とか、特撮とか、その時感じたこととか。思いは言葉に。

はてなブログで記事に存在しない画像をサムネイル(アイキャッチ)に設定する方法

FOLLOW ME 

たまには、ブログ更新における小ネタのようなものも書いてみようかな、と。

 

はてなブログに引っ越してきて間もなく2年になりますが、日々ブログを運営する中でその恩恵を強く感じるのが、Amazon商品画像を簡単に記事に挿入できるところ。PC編集画面だと、画面右の編集サイドバーから、Amazonに限らず、過去記事やiTunesの視聴、Twitterのツイート等を手軽に挿入することができる。

 

f:id:slinky_dog_s11:20190612172131p:plain

 

上のように、「Amazon商品紹介」から商品を検索して選択、「貼り付け形式」の「画像」を選び、「選択した商品を貼り付け」。「画像」形式だと、文字通り画像がベタッと貼り付けられる。

 

はてなブログ Perfect GuideBook

 

下は「詳細」形式。私はこれを多用している。

 

はてなブログ Perfect GuideBook

はてなブログ Perfect GuideBook

 

 

「商品名」形式はこんな感じ。本当にそのまま、リンクが埋め込まれた商品名の文字列のみ。

 

はてなブログ Perfect GuideBook

 

スポンサーリンク

 

 

 

次に、こうして挿入した画像を、サムネイル(アイキャッチ)に設置する。

 

サムネイルとは「縮小された画像」を指し、サイドバーの記事一覧等に表示される、小さい画像。アイキャッチは、文字通り目(アイ)を引き付ける(キャッチ)ことを意味し、Twitter等でシェアされた際に表示されるもの。厳密には違うのですが、はてなブログ的にはイコールで考えても特に問題はない。

 

 

このように、TwitterやFacebookに記事更新を投稿すると、設定したアイキャッチが表示される。これがあるのとないのとでは、クリック率は大きく異なる。ブログのアクセスを気にする人は、アイキャッチをしっかりと設定した方が良い。

 

設定の仕方は簡単。先と同じく、右にある編集サイドバーから、「編集オプション」を選択。「アイキャッチ画像」から、画像をひとつ選択する。これだけで、記事を更新した際に、事前に選んでおいたものがアイキャッチとして設定される。

 

f:id:slinky_dog_s11:20190612172140p:plain

 

この「アイキャッチ画像」に一覧で表示される画像は、①ブログ運営者が事前に設定しているアイキャッチ画像、②記事で1番目に使われている画像、③記事で2番目に使われている画像、④記事で3番目に・・・ という並び。ここから任意に選ぶ他、URLを直接入力して画像を指定することも可能(使ったことないけど)。何も選ばなければ、自動で②で決定される。

 

そして機能的に面白いのはここからで、この「アイキャッチ画像」で一度指定した画像は、後の編集過程でその画像が文中から消えても、設定が残り続けるのである。

 

つまり、通常の手順で画像をアップしたりAmazonの商品画像を「画像」形式で挿入したりして、それを「アイキャッチ画像」に設定してしまえば、後からその画像が消えようが何しようが、Twitterにツイートした時はその画像が表示されるし、記事一覧ページでもその画像が表示されるのである。実際にこの記事は、記事内に存在しない画像を設定しているので、気になる人はご確認いただきたい。

 

なんでわざわざこういうことを書いているかというと、サムネイルやアイキャッチの設定において、老婆心ながら、損をしてしまっているブログをよく見かけるから。

 

サムネイル等に用いられると、それは当然、元の画像を縮小していることになる。なので、元の画像が荒いと、更に荒くなる。「アイキャッチ画像」設定は、Twitter等で大きく表示されることを見越して、なるべく大きく解像度の高い画像を用意することが望ましい。そうでないと、せっかく表示されたアイキャッチが、解像度が低くボケた感じになってしまうのだ。

 

はてなブログ Perfect GuideBook

はてなブログ Perfect GuideBook

 

 

よくあるのは、上の「詳細」形式で貼り付けたAmazon商品画像がアイキャッチになってしまっているパターン。自動で②に該当していると思われる。これだと、特にTwitter等で横幅が広く表示されると、画像が解像度に耐えられない。

 

なのでこの場合は、ひと手間かかってしまうが、一度「画像」の大きなサイズで貼り付けて、それを「アイキャッチ画像」に設定し、後に削除してしまう。記事のバランスやレイアウト的に「詳細」形式のみで貼り付けたい場合でも、「画像」形式の大きな画像をアイキャッチに使用することができる。

 

本当に小ネタの小ネタですが。こういう些細なことに気を配るのも、ブログ運営の面白さなのかな、と思っています。

 

サムネイル (劇場盤)

サムネイル (劇場盤)