ヘッダー画像を作成する前に注意したいこと

ヘッダー画像作成に関する『考え方』についてこれまでいくつか記事を重ねてきました。そのまとめ的なものとして本記事を記しています。

はじめに

『ヘッダー画像を変更する』というのは比較的ポピュラーなカスタマイズで、簡単そう、初心者でもできそう、というイメージがあるかもしれません。ところが 難易度が高くなることがある んですね。思ってたんと違う!というやつですね。

画像を作成してしまう前に読んで頂きたいな、と思います。作っちゃってから「これじゃ駄目だ」では悲しいですからね (∵`)

あと、本記事で『ブログタイトル』と言うときは『ブログ説明文』も含まれている、と思って読み進めてくださいね。

ヘッダー画像は『背景』です

多くの方が考えるのが「画像を変えるだけ」という感覚。HTMLに画像タグ(img要素)が記されており、それがヘッダー画像だろう、と考えるわけです。ところが実際は ヘッダー画像の基本はHTMLのimg要素ではなくCSSのbackground-imageプロパティ です。

なんでかというと、多くの場合『ヘッダー画像』というのは装飾であって、文書構造に於いてとても重要な意味を持つ、といったものではないですよね。その場合はHTMLでの定義よりも CSS によるスタイリングの方が適しています。なので「HTMLをちょこっと変えるだけ」という感覚でできるものではないですし、すべきでもない、と。

ブログタイトルはHTMLの見出し要素です

一方『ブログタイトル』というのは文書構造においてとても重要な意味を持ちます。いわゆる 大見出し, 最上位見出し として扱われます。ということは HTML なんですね。ブログタイトルは原則HTMLであり、画像は原則CSSである、ということです。なので「同時にドン!で簡単に変えられる性質なのか?」という点に気づいてほしい。だって利用する言語が違うのだからー。

テンプレートのデフォルトスタイルに注目

カスタマイズの難易度別で2つつづテンプレートのキャプチャを掲載します。

ブログタイトルと画像が完全分離 + 横幅制限あり

難易度

この2テンプレートのヘッダーの特徴は ブログタイトルと画像が完全に分離している という点。それぞれに専有範囲が設けてあるので画像変更による干渉・衝突はまず起こりません。

加えて、縦横比が固定されている 点も共通しています。画像がブラウザの横幅いっぱいを使い切っていないですよね。何故なら縦横比を固定した場合に横幅を無制限にしてしまうと、大型パソコンでは果てしなくバカでかくなってしまうためです。なのである程度の横幅に到達したらそれ以上大きくしない、つまり 横幅最大値の指定が行われてる わけです。

ただ、必ずしもオリジナルの縦横比と同じにしなければいけない、ということもありません。例えばオリジナルのままだとちょっと高さが大きすぎるな、というときは少し高さを削った比率にする、などもできます。4:3を4:2にする、とか。

ブログタイトルと画像が完全分離 + 横幅制限なし

難易度

こちらもブログタイトルと画像とが完全分離しています。左は縦横比を固定していますのでPCとスマホで見た目が同じです。一方右の方は非固定なのでPCとスマホの画像表示範囲が随分違いますね。

ちなみに先程説明したように「必ずしもオリジナルの縦横比を採用する必要はない」ということで、左の画像は以下がオリジナルです。

ヘッダー画像として表示される際はオリジナルの上下が見切れていますね。こうした場合大抵は画像の中央部位を軸に表示位置調整されていますので、上下あるいは左右にオブジェクト(画像の主役となる対象物)が配置されているものは避けた方が良い。でないと見切れる可能性大。見切れが発生しても『意味がわかる』『なんなのかわかる』『違和感が無い』画像選びが必要です。縦横比を固定しない場合はPCとスマホで表示範囲に大きく差が出る可能性が高いので、それに対応できる画像選びが必須です。

画像上にブログタイトル

難易度

これまではブログタイトルと画像が分かれて配置されていました。その場合の 高さ なんですが、さきほどから『縦横比固定』なるキーワードを出しています。縦横比を固定すれば当然それに応じて自動的に高さが生まれます。固定されていない場合は height プロパティ(HTML属性ではなくCSSプロパティ) でもって調整が行われるのがほとんどです。

ですが本章のように 画像上にブログタイトル という場合は 縦横比指定による高さ出しや、height指定による高さ出しは悪手 という点をご理解頂けるでしょうか。何故なら、指定した数値を守れるとは限らないからです。以下は縦横比あるいはheight指定で高さを設定した場合の結果です。

ブログタイトルや説明文が長い人もいれば短い人もいます。なのでテンプレート制作者としては高さを決定してしまうわけにはいきません。右のように溢れ(オーバーフロー)を起こす可能性があるからです。

そこで高さ出しに使われるのが padding というCSSプロパティ、『内側余白』の指定です。まず文章(タイトル, 説明文)が記載されることでその文章分の高さが出ます。その文章の上下に20, 50pxなど余白をとっておけばそれが高さにプラスされます。そうやって高さが決まります。つまり流動的な高さです。あまりに文章量が少ないと高さがあまり出ませんので、デザインによっては min-height プロパティでもって『最低でも(文章量が足りずとも)何pxは確保』といった指定が行われているかもしれません。

ただしそれはあくまでもテンプレート制作者の懸念材料なのであって、個人が使用する際、当然自身のブログタイトル及び説明文の文章量というのは把握できていますよね。他者のことを考慮する必要はありませんので、あくまでも自身の環境・条件だけを考えればOK。となればもしかすると固定しても上手くいくかもしれません。とはいえ結構難しい。何故なら 文章は折り返しが起こる ので、特に説明文はPCで見ると2行かもしれませんが、スマホで見ると4行とか5行とかになる可能性がありますよね。

こういった事情で、分離タイプと比較すると難易度は若干上がります。難しいといっても『画像選びがシビア』という感じでしょうか。「なんか… この部分表示したいのに上手くいかんなぁ…」とかね。そういうことが起こりやすいのがこのタイプ。PCとスマホで画像表示範囲が大きく異なってくるのもこのタイプ。

デフォルト画像が無い

難易度

このタイプは星1程度の労力で簡単に済む場合もあります。背景画像を指定する場所さえわかれば簡単です。ただ画像の位置調整で若干時間を食う可能性があります。

サンプルのテンプレートは、ナビゲーションが上部に固定されている んですね。そうなるとナビの高さ分画像上が見えなくなりますので、下に下げる表示調整をするなどの作業が必要になるかもしれません。私自身がナビは上部(あるいは下部)に固定してすぐにアクセスできるようにして欲しい、という考えなので弊テンプレートではこのタイプがとても多いです。また、高さが足りないときなどはpaddingを新たに設ける、あるいは数値を増やすなどの処理も必要になるかもしれません。

背景画像の設置については弊テンプレートの場合は .header-banner への指定追加で概ね可能です。そしてこのタイプは 横100%使用 するヘッダー画像になります。制限をつけたい場合は難易度が少し上がったり、HTMLの追加あるいは修正の必要が生じて難易度ダダ上がり、ということもあります。

横100%を使うデザインの場合は何度も触れていますが、画像の選定が非常に重要 になりますのでその点に留意しましょう。

背景とブログタイトルの合成画像は難易度が一気に上がる

これまでの「ヘッダー画像」と「ブログタイトル」の組み合わせは 「画像ファイル」と「テキスト」 の組み合わせです。ここからは ヘッダー画像とブログタイトルを1つの画像として作成 した、いや、してしまった場合の説明です。難易度が跳ね上がります。

難易度

ここからは実物のサンプルがありませんので、擬似的に画像を作成しています。以下のような画像を作成したとします。

お花柄の上に、webフォントにも無いような特殊なフォントを画像化したものを載せて一枚の画像として仕上げてあります。これを

このテンプレートのヘッダー画像と差し替えたいとします。ここで既にいくつかの問題が発生。

  1. HTMLのimg要素として掲載するのですか?それともCSSのbackground-imageですか?
  2. リンクの範囲はどうするのですか?
  3. PC, タブレット, スマホ どの端末から見ても収まり良くできていますか?

まず①の問題について。これはもう HTMLとしての掲載 しかないと思います。CSSのHTMLの見出し要素として掲載すればGoogleのクローラーはしっかり『見出しである』と判断してくれます(alt属性の指定必須)が、CSSのbackground-imageでは何も伝わりません。ここにブログタイトルがあります、と判断してもらえませんし、後続の見出しの順位が狂ってしまいます

トップページでのブログタイトルは概ね h1 の最上位見出しとして定義されますが、それが無くなれば「h1見出しが存在しないがh2やh2はある」というおかしな文書構造になってしまいます。なのでHTMLの見出し要素としての掲載が最適解。

ここから「たぶんみなさんこういう思考で作業を進めるのではなかろうか」という仮定に沿って、実際のHTMLやCSSを参照しながら作業していきます。

テンプレートのブログタイトルに関するマークアップは以下の通りです。

<h1>
  <a class="blog-title-anchor" href="<%url>"><%blog_name></a>
</h1>

このテンプレートの実際はもっと複雑な構造になっていますが簡素化して説明を進めます。このHTMLソースコード中の

<a class="blog-title-anchor" href="<%url>"><%blog_name></a>

これがブログタイトルを出力する『FC2独自変数』と呼ばれる文字列です。これを画像に変えたい、ということになりますよね。やってみましょう。ソースコードは以下のようになります。重要なのは緑部位の alt属性 の値です。ブログ名を直接書くか、FC2独自変数で出力します。

<a class="blog-title-anchor" href="<%url>"><img src="画像URL" width="横幅実寸" height="高さ実寸" alt="<%blog_name>"></a>

あ、駄目だこりゃ。現段階でわかる問題点は少なくとも以下のような感じ。

まず 横幅が足りない という点。じゃあ大きく作り直せば良いかというと…。答えを先に言うと この画像はボツにせざるを得ません これは作り直しとかいう問題ではない。どう頑張っても悔いの残るレイアウトになってしまいます。それでもとにかく進めてみましょう。横幅が全然足りませんがこのまま使います。しかもこのテンプレートのヘッダー画像は 横いっぱい使い切るデザイン なのですから、実存するPCを考慮して横5000pxとか6000pxとかで作成すれば対応できるかもしれませんが、アップロード制限がありますし、いずれどこかのポイントで 画像が拡大表示されて解像度が落ちます

上下の余分な余白 についてはCSSですからテンプレートのスタイルシートを操作する必要が生じます。ですがこれはめんどうなだけで可能な作業。

デフォルト画像が残っている のはスタイルシートから排除しなければいけませんね。

ブログ説明文との共存不可 については、不可です。いや実際はできるけれども、もはやプロにお金を出して依頼するレベルの調整(笑)

というわけで、取り除けるものは取り除き、横幅は足りませんが無理やり横100%という指定でもって対応してみます。

クッソでかい (∵`) これはアカンやつ。これ今縦横比が固定されている状態なので、縦横比を操作しないといけませんね。つまり高さを削る必要がありそうです。ただしこれは画像ですから、画像の縦横比を変更してしまうと歪んでしまいます。従って親要素の高さを調整して、はみ出る分は非表示にする、という方法を取るしかなさそうです。めんどうだがやるしかない(笑)

うーん、それなりになった… かなぁ。これなにをしたかというと、

  • 先祖要素の縦横比を固定(aspect-ratio, overflow)
  • 親要素から余白を取り除き、横幅を先祖要素と同じにする(padding, width, max-width)
  • 不要な『ブログ説明文』に関するHTMLを削除する(HTML操作)
  • img要素の横幅を親要素と同じにし、位置を上へ引き上げる(ネガティブmargin, width)

利用したプロパティはカッコ内に書いてますが、これを果たして初心者さんが思いつけるのか、という点。結構無理やりな調整なので有識者の助言が必要になるでしょうし、修正部位も多くて大変です。そしてやはり画像が拡大されてしまうので見た目もよろしくない。高解像度ディスプレイで見ればボケボケの粗悪な画像になってしまいます。それでも手を入れた甲斐がありスマホでは以下のような感じに調整できました。

でも毎回こんな風に なんとなく上手くいくとは限らない からね (∵`)
このサンプルにしても大型パソコンから見ればブログタイトルがめっちゃ大きくて圧迫感半端ないですし。

で、リンクの範囲 なんですが、ヘッダー全体がクリック範囲です。img要素をaタグで囲っているのですから、当然画像全体がリンク範囲です。ヘッダーがいかに大きくなろうとも全範囲です。それが嫌でリンクを取ってしまうというのは暴挙。ブログタイトルをクリックすればホームに戻れるというのは誰もが直感的に考えることですから、リンクはやはり必要です。

背景画像とタイトル画像は分けて作成

じゃあどうすれば良かったのか、なんですが、背景画像とブログタイトル画像を別々に作成すれば良かった のです。やってみましょう。

こちら背景用画像ですね。このタイプの画像の場合は シームレス(つなぎ目なし)であることが絶対条件です。一枚画の全面敷では大画面に対応し辛いので繰り返し表示(repeat)を行うと良いですね。

多色の画像を使うときは上に乗るブログタイトル(今回はテキストではなく画像)の視認性を確保するために半透明白あるいは半透明黒などのマスクをかけておくと良いと思います。CSSでもできますが今回はどのみち画像を作成しているのですからついでにマスクも合成してあります。

こちらはブログタイトルです。透過PNGまたは透過GIF が鉄則です。サンプルも実際は背景が透過されていますが、ダークモードで見えなくなってしまうためCSSで背景を加えています。サイズは大きめに作成。よほど長いタイトルでなければ横1000px程度で良いかと思います。サンプルも縮尺表示していますがオリジナルは横1000pxあります。

  1. HTMLのテキスト部位をimg要素に変更
  2. スタイルシートに画像に関する指定を追加(width, max-width)
  3. スタイルシートのヘッダー画像URLを書き換え、若干の追加指定を行う(background-size)

これだけで済みます。3の『若干の追加指定』については、何もしなければ背景画像は左のような状態になります。お花が大きすぎるなぁ、と思えば background-size: 80% auto; とか追加で入れておくと良いですね。右のようになります。こういった背景だけの調整というのはタイトルがくっついていると不可能です。背景を大きくすればタイトルも大きくなり、逆もまた然り。別々であれば独立した調整が可能です。

もうこれが最適解と言いたいと思います。背景画像とタイトル画像を合体させない が簡単カスタマイズの近道です。合体させてしまうからめちゃくちゃ難しくなってしまうのです。

このタイプは背景とタイトル合成不可

難易度

『不可』と言いながら難易度つけました。プロならできる。プロなら例え無理やりだとしても大概のことはクリアできます。

このタイプのテンプレートで何故合体画像が駄目なのかというと、一番の理由は リンク です。

背景画像上のいくつものリンクが乗っていますね。これまで記したように単純に画像をaタグで囲ってしまうと、a要素でヘッダー全体がリンクになっており、さらに上にリンクが点在している、という最悪な状況に陥ります。HTMLではできません。構文エラー、しかもレイアウトを崩壊させる類のエラーです。CSSで無理矢理実現(リンクonリンク)することは可能だとしても致命的なユーザビリティエラーになります。

というわけでまずHTMLを諦めなければいけない。つまりbackgroundで掲載せざるを得なくなりますね。当然大見出しが失われます。h1要素のテキスト空白とかテキスト入れてdisplay:noneとかは下手をすればGoogleからペナルティ喰らいます(クローキング等)

なのでこのパターンであれば 背景画像とタイトル画像を分けて作成するのが絶対条件 と言って良いでしょう。それなら簡単カスタマイズ。星1から2というところで円滑に作業できるはずです。

さいごに

作ってしまってからでは遅いので、既に書いたことのある内容ですができれば目に付くようにと再度UPしました。あまりにも強引なカスタマイズ、テンプレートの構造を著しく変えてしまうようなカスタマイズのご相談は受けられませんので、事前の対策としてお読み頂ければと思います。

コメントに関する注意事項
  • テンプレートに関するご質問は各テンプレート専用記事でのみ受付致します。また、よくある質問をまとめているページも事前にご参照ください。
  • 専門的なご質問の場合、記事内容と明らかに関連の無い内容はお控えください(雑談の場合はその限りではありません)
  • 第三者が不快と感じる内容や論調でのコメントはお控えください(性的,高圧的,暴力的など)