暇人クオの形だけのブログ

書きたいことを書きたいときに書いています。

ブログにサムネをつけてみた話

気の迷いで、一部の記事にそれっぽいサムネをつけてみました。忘れないように、やり方を書き残しておきます。

同じ気の迷いを起こして迷い込んで来た方がいましたら参考にしてください。

サムネをつけた記事

※本記事の公開時点

ここでいうサムネは「別途作成した、記事の概要等が本文を読まなくても伝わるようにした画像」だと思ってください。

サムネをつけるメリット

一般的な話をすれば、分かりやすいサムネイル画像があることで読者の興味を引き、閲覧数が増えてウッハウハってところなんでしょうが、当ブログの話をすれば特にアクセス数が増えた形跡はないですね。

YouTubeとかだとトップページのオススメが目につくところにあって、知らんチャンネルの動画もよく流れてきますから、サムネを工夫するメリットもあるでしょう。

はてはブログもトップページを見れば色々と凄そうな記事が載っていますが、どれも編集部が選んだ上で、さらに興味を引くようなコメントを載せてくれているんですね。このコメントでサムネに求められる役割は代行してくれている形です。しかも大半のものはサムネは記事の中の画像、またはデフォルトのものです。つまりはてなブログにおいては内容の方が大切ってことです。

まあ、この下の埋め込み内のサムネ画像が(スマホから見ると?)正方形にトリミングされている時点でサムネがどう思われているか想像できるかとは思いますが。端のトリミングってどこかのSNSだと訴えられていませんでしたっけ?

はてなブログ内でも、ちゃんと出るところもあるにはあるんですけどね。

サムネのつけ方

さて、ここまで読んだ上でまだサムネをつけたい意欲がある方に、手順を説明しましょう。

この記事には「サムネ作る」と大きく書かれたサムネが設定されていますが、記事のどこにもそのような画像はないはずです。

記事にある画像であれば「アイキャッチ画像」の「記事内の画像から選択」から選択すればよいですが、記事にないもの(コメントアウト含む)は選択できません。

しかし、すぐ下に「画像URLで指定する」なる記載がありますね。つまり、これさえ分かればいかなる画像でもサムネにすることが出来ます。別に記事のトップに載せてしまえばいいじゃんと思った方、是非そうしてください。

はてなブログにアップした画像ははてなフォトライフというサイトにアップロードされています。

そちらにアクセスしたら、「マイフォト」を押します。


「フォルダを編集」を押します。


恐らく各々がはてなブログにアップした画像がずらっと並んでいることと思います。端に公開前の記事の画像が写り込んでいますが、今は気にしないでください。
今回は「サムネ作る」と書かれた画像をサムネにしたいので、そちらを押して選択します。

その状態で「ブログに貼り付ける」を押します。

「HTMLタグ」に表示された内容をコピーして、メモ帳等に貼り付けてください。

img srcの""内のURLをコピーします。https://〜.jpgって部分です。

<a href="https://f.hatena.ne.jp/allsum13_quotation/20240505215548"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/a/allsum13_quotation/20240505/20240505215548.jpg" alt="20240505215548"></a>


あとは先ほどの「画像URLで指定する」の場所にペーストするだけです。

もちろん、終わったら保存や投稿はちゃんとしましょう。

終わりに

分かってしまえばなんて事ない手順だとは思います。ただ、はてなフォトライフへの導線がなく、面倒なことには変わりないため、うちのブログでは基本は適当に選択、気が向いたら作ってつけていくスタンスになるかと思います。

メリットを感じた方や、これくらいの手間は惜しまない方はお好きにどうぞ。

おまけ: サムネを作る

ツールはお手持ちの絵が描けるツールなら何でもいいと思います。筆者は「アイビスペイントX」を使っています。

どういうサムネがいいかは、そもそも実績のない当ブログで説明することではありませんが、取っ掛かりとしては大手のものを真似て、自己流を編み出していくのがよいでしょう。「守破離」というやつです。
まさに大手が解説している動画がありましたので、見てみました。

この動画を参考にして完成したものがこちらです。

流石にそのまま過ぎる。
*1
ので、どうにかならないかと思い、もうちょっと調べてみました。某公式チャンネルへのコンサル動画です。

なるほど、動画の伝えたい内容が簡潔にまとまっていれば良いのか。

そうして完成したのが今のサムネです。

これも見た事ある。
*2

申し訳ありませんが、サムネの作り方は他を当たってください。(終)

*1:例:

*2:例: