今までワタクシ、記事の全文を表示する設定にしていたので気が付きませんでしたが、記事一覧にすると、記事本文に貼り付けた画像が一覧表示の時にサムネイルとして表示されるのですね。そして、それがアイキャッチ画像と言われるのですね。
そんなことも知らなかったワタクシ・・・。アフェリエイトとか言う前にブログの作り方から勉強した方がいい？でも座学だけでは限界があるのです。実践あるのみ！！それにこの件を調べようと思ったきっかけが、テキストだけのアフェリエイトリンクを貼ったのが始まりです。テキストと思ったら画像として挿入されてました。そして、それが白紙の画像として表示されてました。
今後の事を考えると早めに気づいてよかったよ！！
はてなブログの記事一覧のサムネイル（アイキャッチ）は何が選ばれる？
ダッシュボードの設定→詳細設定でアイキャッチ画像が登録できます。そこには
注目エントリーやSNSシェアなどで利用されるアイキャッチ画像を設定できます。
記事ページでは記事ごとに指定したアイキャッチ画像が優先して表示されます。
と書いてあります。画像の登録はしましたが、画像が見切れた状態で放置してました。どこで使われるかあまり知らなかったので。
調べました。
- 記事一覧に表示される画像は、記事本文に張り付けた一番上の画像が基本設定
- 詳細設定で登録した画像は、記事本文に画像が無かった場合でも、記事一覧のサムネイルとしては使用されない。
- 詳細設定で登録した画像は、記事本文に画像が無かった場合、Twitterなどにシェアした時にTwitterなどのアイキャッチ画像として使用される。
- ただし「画像を自動で作成する」にチェックを入れていると、アイキャッチ画像を登録していても、その画像は使用されずに自動で作られた画像が使われる。
- 記事本文に貼り付けた画像のサイズをドラッグして拡大縮小しても、アップロードしたサイズが元になるので、見た目のサイズは関係が無い
これが基本なのかな？
で、ここからが本題なのですが、
記事一覧のサムネイル画像のサイズはどうトリミングされるの？
基本的には、ハテナブログの記事一覧に使用される画像サイズは
500 x 500px
の正方形となるみたいです。
それを知って、長方形の画像を、このサイズ以下の画像に縮小して登録しました。しかし、画像が見切れる！！なぜ？
原因が判明しました。それは
500 x 500pxの正方形の内側がそのまま表示される訳ではない
てっきり上記サイズ以内で、そのサイズの正方形の中に入ってる画像であれば、そのまま表示されると思ってました。これが原因でした。
そして、どうなってるのか悩みました。
そこではてなブログの記事一覧に使われるアイキャッチ画像の検証です。
テーマはデフォルトの「smooth」です。
画像は全て記事本文に貼り付けてます。
個別にアイキャッチ画像は選択してません。
正方形の画像の検証をしてみた
正方形(1:1)画像から行ってみます。
テスト１ 500 x 500px の画像
これはそのまま表示されます。
テスト２ 250 x 250px
これも見切れる事なく表示されます。ただし、500 x 500pxが基本となってるので、このサイズまで拡大されて表示されます。なので、小さい文字などが入ってる画像の場合、ボヤけます。
テスト３ 750 x 750px
これは500 x 500px以上のサイズなので、中心から500 x 500pxのサイズでトリミングされて表示すると思っていたので、750 x 750pxの下地の中に500 x 500pxの画像を貼り付けて試しましたが、違いました。
それ以上のサイズの場合は500 x 500pxに縮小されて表示されました。
正方形(1:1)なので、まだわかりやすいです。
正方形画像の検証結果
正方形(1:1)の画像であれば、どれだけ大きな画像であっても500 x 500pxに縮小されて見切れる事なく表示される。500 x 500pxより小さな画像であれば、500 x 500pxまで拡大されて表示される。ただし、あまりに小さい画像だとボヤける。
長方形(横長)画像の検証をしてみた
これがワタクシの頭では理解が難しかった。頭で考えてもイメージできないので実践です
正方形の画像の中に長方形の画像を入れてみた
Windowsのペイントを使って750 x 750pxの無地の下地を作る。
黒色で塗り潰す。
その中に収まるように750 x 351pxの画像を入れて保存。中に入れた画像は正方形の中心です。
こうすれば、中の画像が長方形だったとしても、外枠を正方形として作ってるので500 x 500pxのサイズに縮小されて表示されます。
なので、長方形の画像言っていいか微妙ですが、見切れずに表示されます。
テスト４ 750 x 750(750 x 351)px
下地を黒色にしてるのでこんな感じになりますが、下地を白色もしくは透明にすると、こんな感じで長方形の画像のみが表示されたように見えます。実際は750 x 750pxの正方形の画像です。
テスト５ 下地が白色
では、正方形の画像の中に入れずに750 x 351pxの長方形の画像をそのまま記事本文に貼り付けます。
テスト６ 750 x 351px
こんな感じで見切れたアイキャッチ画像になります。
悩みました。
横幅は750pxなので、500px以上。なので、この画像の中心を基に500 x 500pxでトリミングされて、足りていない縦幅(500-351=149px)は空白(白色)で表示されると思っていました。しかし結果は上記の通り。
そしてワタクシは冒頭で書きましたが、500 x 500pxの枠内の画像であれば、そのまま表示されると思っていたので、この750 x 351pxの画像を500 x 234pxに縮小しました。
500÷750≒0.6667
0.6667x351≒234
しかし結果は同じ。
なぜに？
と、思い悩んでた次第です。
調査の結果、縦横幅のどちらかが500px以下の画像の場合、最小幅の辺が500pxに拡大されるみたいです。そして、元の画像比率により、500px以上あった辺も拡大されます。その拡大された画像の中心から500 x 500pxのサイズでトリミングされるとの事。なので超ドアップ画像になってしまいます。文章で読んでもよく分からないので実践です。
750 x 351pxの画像が以下のサイズにされます。
500÷351≒1.425
750x1.425≒1,069
最小幅が351pxなので、500pxにする為に1.425倍されます。
1,069 x 500pxの画像に拡大です。この大きさの画像の中心から500 x 500pxのサイズでトリミングされます。
下の左側の画像はペイントのアプリでトリミングされるであろう部分を枠で囲ってみた画像です。右側が記事一覧のアイキャッチ画像です。
テスト７ 1069 x 500px
ではこのアイキャッチ画像と750 x 351pxのアイキャッチ画像を比べてみます。
同じですね。
縦幅は500pxにされてるので、画像の見切れは無いです。ただ、横幅は長くなった上で500px幅に中心からトリミングされるので、かなり見切れてしまいます。
この、横縦幅のどちらかが500px以下の場合、短い幅の方が500pxに拡大され、500px以上の長い幅の方も、元の画像の比率に応じて拡大される。そして、その中心から500 x 500pxのサイズにトリミングされる。が理解できずに苦しみました。
では縦横共に500px以上の長方形の画像だった場合はどうなるのか？
同じ画像で検証です。
750 x 351pxなので単純に倍にしました。
1500 x 702pxです。
その中心から単純に500 x 500pxのサイズでトリミングしました。そのイメージ画像が左側の青枠内で、右側はこの画像のアイキャッチ画像です。
テスト８ 1500 x 702px
そして、今度は縦幅を500pxになる様に縮小しました。
500÷702≒0.7122
1500x0.7122≒1,068
同じ画像で同じ縦横比率なので、小さい画像を拡大した時と同じサイズになります(小数点以下の比率で発生する誤差の1pxは無視して下さい)。
で、そこから500 x 500pxのサイズでトリミングです。
これは「テスト７」と全く同じな検証なので画像は飛ばして、1500 x 702pxの画像を記事本文に貼り付けた時のアイキャッチ画像と比較です。
750 x 351pxの時のアイキャッチ画像と同じですね。
正方形の時と同じで500 x 500px以上の画像の場合、その大きさ(この場合は1500 x 702px)の中心から500 x 500pxをトリミングするのではなく、短い辺が500pxになるように縮小され、元の画像比率で長い横幅も縮小される事が判明しました。
と、いう事は、正方形以外の画像であれば、必ず見切れる部分が出てしまう。
なので、長方形の画像の全てを、記事一覧のアイキャッチ画像に表示させたい場合は、冒頭にある正方形を作って、その中に画像を入れて保存する方法を使うって事です。
CSSを編集すれば、その限りではないかもしれませんが、ワタクシは当面、この方法でいこうと思います。
しかし、正方形の中に長方形の画像を入れた物を、そのまま記事本文に貼り付けると無駄な空白部分が出来ます。なのでお次は記事本文の画像ではなく個別にアイキャッチ画像を設定したいと思います。
ではでは
