本ブログはGoogleのBloggerというプラットフォームで運営されています。
デフォルトのテンプレートは少々使いにくかったりするのですが、くうく堂様によってQooQという優れた日本語テンプレートが提供されており、本ブログも使わせてもらってます。（ありがたや）
QooQはカスタマイズ性にも優れており、凝ったカスタマイズのやり方を提案してくれる方もたくさんいます。
自分は貰ってばかりだったので、たまには何か貢献できないかと考えまして、本日はヘッダー画像について、うまく行ってる方法を紹介します。
ヘッダー画像って何さ？
表示速度重視のQooQユーザーは使ってない方も多いですが、記事やトップページが表示された時に一番上（ヘッダー部と呼ばれる）に表示される画像です。
ブログの印象を決めるもので、個別記事の内容を印象付けるヒーローイメージと共に、大事なものと考えています。
QooQのヘッダー画像の設定について
基本的にはBlogger独自のヘッダー設定から
Bloggerではレイアウト編集画面からヘッダーの設定がGUIで出来るようになってて、QooQを導入しても、引き続き利用可能です。
それぞれの詳細は以下の通り。
- タイトルと説明の背後：タイトルと説明をテキスト表示させて、その背景に画像を表示させるもの。
- タイトルと説明の代わり：ブログタイトルと説明をテキスト表示させず、画像のみとするもの。従って、ブログタイトルと説明を、画像に埋め込んでおくことが望ましい。
- 説明を画像の後に表示する：画像を表示した後に（下に）、説明のみがテキストとして表示される。従って、ブログタイトルのみ、画像に埋め込んでおくのが望ましい。
Blogger独自のヘッダー画像設定のデメリット
画像の配置でどの選択肢を選んでも、基本的にはCLS（Cumlative Layout Shift）という現象が発生します。
このCLSがどのように起きているか一例をステップ・バイ・ステップで書いてみると、
- テキストが表示され、
- ユーザーが読み始めたところ、
- その上部に遅れて画像が読み込まれて、
- 読んでたテキストが画面外に消えてしまい、ユーザーに不利益となる
となります。こういうのが積み重なって、CLSとなります。これはSEO的にも不利とされてます。
現状のCLSを確認してみよう
これまでは、３番目の選択肢である「説明を画像の後に表示する」をとりあえず使ってました。
で、たまに２の「タイトルと説明の代わり」を試したりもしましたが、いずれにしても、必ずCLSが発生してしまう状況でした。
CLSについては、具体的には、Google製のPageSpeed Insightで確認できます。
試しに、２の「タイトルと説明の代わり」で設定していた時の、本ブログの１つの記事を分析してもらうと、CLSについて以下の画像のような指摘が入りました。
「▲レイアウトが大きく変わらないようにする ー １件のレイアウト シフトが見つかりました」
はい、まず一番上のヘッダー画像の読み込みに応じてCLSが発生していることが、横並びの８枚の連続写真で示されてます。
そしてその原因が、右下に書いてある「メディア要素に明示的なサイズが含まれていません」となります。
要は、ヘッダー画像に高さ情報（<img … height="240" >みたいなやつ）が付記されてないから、あらかじめブラウザ側で画像スペースを用意できなくて、CLSが発生してしまってるよ、ということかと。
しかしながら、そもそもBloggerのレイアウトの設定画面で、高さ情報をどうやって設定するのさ？無理じゃね？？となりました。
改めて対策を考える
ということで、改めて考えてみます。２の「タイトルと説明の代わり」でも、３の「説明を画像の後に表示する」でも、いずれもCLSが発生してしまい、自分には回避方法はわかりませんでした。
そこで、最後に残っている１の「タイトルと説明の背後」で考えてみたいと思います。
まずは高さ方向スペースの確保
繰り返しで恐縮ですが、普通に１の「タイトルと説明の背後」でやっても、そのままではCLSが発生してしまいます。
一方で、１は「タイトルと説明の（テキストの）背後」に画像を表示させる仕組みであるため、そのタイトルと説明のテキストだけで、画像の高さ以上の枠（スペース）を確保しておけば、画像はその枠内に収まり、CLSは発生しないのではないか？と期待しました。
説明のテキストに改行を入れてみるぜ
まず、次のように改行しつつ数字を入れてみました。
結果を表示させてみると、次のように数字は横に並んでしまい、設定画面で入力した改行は消えてしまうことがわかりました。もちろん\nや\rを入れても改行されませんでした。
QooQのヘッダー部のCSSを修正してみるぜ
次に、入力内容はそのままで、以下のように#header-innerのパディングの下部の部分を5emにしてみました。すると、
おお、4 5 6の下部に隙間ができました！（そりゃそう？）
つまり？
#header-innerのCSSに変更を加えることで、そのスペースを確保できるということがわかりました。
実際はemの指定では管理しにくいので、以下のようにheightで240pxを指定して確保することにしました。
- #header-inner{
- padding: 1em 0 1em 0;
- height: 240px;
- }
そして画像を挿入してみる
高さは240pxとしたので、それに沿った画像を用意します。まずは800x240pxの画像を用意しまして、その画像をレイアウト設定に入力します。別に直接PCからアップロードしてもいいし、URL指定でもかまいません。
すると、画像が表示されましたが、タイル状に繰り返し表示になってしまいます。あと、グレー背景に黒文字なので読みにくい。。
で、この繰り返し表示については、#header-innerに次のスタイルを追加することで解決されます。
- background-repeat: no-repeat;
- background-size: contain;
- background-position: bottom;
ついでに、画像サイズが800x240pxだと横幅が各記事のヒーローイメージと同じで見た目がイマイチになるため、1200x240pxに変更しました。実際に表示させるとこんな感じになりました。いい感じです。。
ちなみに、背景は画像に合わせて黒くしまして、文字色は読みやすくライトブルーっぽくしてあります。そのCSSの設定は以下の通りです。
- #header{
- background: #000000;
- color: $(brand.font);
- }
- #header-title{
- font-size: 180%;
- font-weight: bold;
- color: #00f3ff;
- text-shadow: #000 1px 0 10px;
- }
- #header-text{
- font-size: 100%;
- font-weight: bold;
- color: #00f3ff;
- text-shadow: #000 1px 0 10px;
- }
モバイルにも対応させるよ
この場合、問題なのはモバイルビュー。
モバイルモードでプレビューすると、height=240の設定が残ってしまうので、このように上に黒い空間ができてしまう。
これはこれでいいかもしれないけど、モバイルでこんなにスペース取られてユーザーに無駄にスクロールを強いるのは良くないですね。
ってことで、モバイルでアクセスした場合の設定を別に用意しておきます。
モバイルの場合のため、ヘッダー部のCSSに以下を追加します。まず、heightを半分の120pxにしました。background-sizeはcontainでなくcoverとして、高さ120pxにはまるように両サイドをカットして表示する感じとします。またtitle文字と説明テキストがはみ出さないように、でもモバイルでも見えるように、サイズ等を調整しました。
- @media ( max-width : 768px ) {
- #header-inner{
- padding: 1em 0 1em 0;
- height: 120px;
- background-repeat: no-repeat;
- background-size: cover;
- background-position: bottom;
- }
- #header-title{
- font-size: 120%;
- font-weight: bold;
- color: #00f3ff;
- text-shadow: #000 1px 0 10px;
- }
- #header-text{
- font-size: 80%;
- font-weight: bold;
- color: #00f3ff;
- text-shadow: #000 1px 0 10px;
- }
- }
これによって、モバイルでのプレビューは以下の通りスッキリ。
改良後のCLSを確認してみよう
まず、レポート上のCLS（次図の右下）はゼロになりました！合格です！（意義の大きさは別として、素直に嬉しい）
横並びの8枚画像によるCLSの可視化でも、最初に黒いバックグラウンドが表示され、そのスペースにヘッダー画像がピタッと追加され、CLSが全く生じてないことがわかります。これも嬉しい！
最後に
なかなかBloggerとかQooQネタを書く機会がなかったのですが、Bloggerにはもっと盛り上がってほしいですし、QooQには感謝もいっぱいですので、本記事が何かお役に立つと幸いです。
もちろん私のやり方がベストである保証はありません、むしろ下手だろうと思いますし、スマートなやり方を誰かが紹介して下さる日も来るだろうと思います。それも合わせて、いろんなやり方がネット上で共有されると良いなと思います。
ではでは。