テンプレートのヘッダー画像を変更する際のヒント

さらに言うと、変更したい画像が既に手元にある場合、どのテンプレートが向いているか も少し考えた方が良いと思います。といってもヘッダー画像を第一にしてテンプレートを選ぶということ自体は賢明ではないんですが、理屈が理解できれば「向いていない」ものを「向くようにする」ことも可能かもしれません。そして キーワードとなるのは縦のサイズ です。

画像表示の仕方は大別して3種

• 縦横比を維持する
• 縦横比を維持しない
• アートディレクション

必ずこのいずれかを選択することになります。アートディレクションについては聞き慣れない方もいらっしゃると思います。簡単に言えばパソコンとスマホとで表示する画像を変える(サイズではなく見た目の修正も行う)ことですが、難易度は中級以上だと思いますので今回は割愛します。

これらの選択で大きく異なる点は 縦幅の状態 です。

レスポンシブテンプレートの場合は1000pxを超えるパソコンから320px程度のスマートフォンまで、極端なデバイス画面幅全てをサポートしなければいけません。

縦幅の維持とは

画像は縦横の比率(アスペクト比)というのが必ずあります。1:1なら正方形ですし、3:2の横長や2:5といった縦長もありますよね。
* htmlやCSSでアスペクト比を提示する際の通常は 横:縦 で表します。

縦横比を固定する とは、画面サイズ(デバイスサイズやブラウザサイズ)が変更されても表示比率が変わらない という意味です。

赤い部分をヘッダー画像だと仮定し、その比率はスマートフォン・パソコン共に同じです。しかしデバイス幅が違うとこれだけ画面占有率が違うんですね。スマートフォンの画面は縦長 ですから同じ比率でも画面の約1/3程度で収まっています。一方 パソコンの画面は横長 でスマホとは真逆ですから、同じ比率でもほぼ画面いっぱいを占有しています。

要はスマホでは大変こぢんまりと収まっているものが、パソコンではとても大きく目立つ存在になることがある、ということです。ですから縦横比を固定する場合は 縦の占有率 を重視しなければいけません。

デザイナーはどんな時に固定し、どんな時に非固定にするか

デザイナーは常にこういう選択をしながら制作をしています。いわば戦いです(笑)

縦横比を固定したい時

縦横比固定が必要と思われるパターン

画像の全体像を表示したい場合

採用条件

横幅に最大値指定が行われている

横に対する縦の比率が40%以下(5:2)

テキストが含まれていない(または予測し得る文字数で収まる)

縦横比を固定しなくても良い時

縦横比固定が不要(あるいは行わない方が良い)と思われるパターン

画像の全体像を表示させる必要が無い場合(見切れが生じても良い場合)

テキストが含まれている場合で、かつ、その文字数が予測不可の場合

採用条件

画像内のオブジェクトの意味が失われない

言葉にしてしまうと小難しくなってしまうんですが、実際は至って当たり前というか。

最も重要なのは テキストを含む可能性があるかどうか、あるとすれば予測可能かどうか です。

ブログタイトルなどがヘッダーの「中」にあるのか「外」にあるのかに着目

テキストを含むのか含まないのかの違いは簡単に言うとヘッダーが以下のどちらに該当するのか、です。

ヘッダーというのは大抵このいずれか。ヘッダー画像の上にブログタイトル等のテキストが記載されているか、分かれているかです。

中でも製作者側では ブログ説明文の文章量は予測不可 なんですね。この文言は各ユーザーが自由に決めており、文字数も制限がありません。ある人は短文かもしれませんが、ある人は非常に長文かもしれません。

こういった予測不可能なテキスト量に対してヘッダー背景の縦横比を固定してしまった場合。「縦横比を固定する」というのは 「横幅と縦幅を決める」のと同義ですから、仮にブログタイトルや説明文が長いと以下のような結果になることも。

縦幅が足りないので オーバーフロー(はみ出し) が起こっています。これが発生すると 後続の内容と干渉(重なる) してしまいます。

このあたりはFC2ブログテンプレート製作者のほとんどが上手く調整しています。例えばブログタイトルだけならば長くとも7行、8行にも及ぶことはまずありませんし、デバイス幅が狭くなった時のフォントサイズ調整 なども有効です。文字が小さくなれば折返しの回数も減らせます。これもコントロールの方法のひとつです。

注意したいのはみなさんが「もっとブログタイトルを大きくしよう」と思って単純にフォントのサイズを大きめサイズに変更してしまった場合など。「ヘッダー画像縦横比固定 + テキスト」の場合文字数によってははみ出しが起こりますので、必ずスマートフォンでの見た目を確認しながら行うようにしてください。

というわけで、多めの文章をヘッダー内に取り込んである場合には縦横比固定は向かない、ということになります。この場合は縦幅を auto値(文章量に応じて下へ伸びる) ようにしておく必要があるからです。

縦横比を固定するならなるべく横に長い画像を

本記事の最初の方に掲載したサンプル画像のように、縦幅が大きいと画面幅が大きくなった時の占有率が非常に高いので、なるべく横に長いものを選ぶと良いですね。ただし縦が短すぎると今度は スマホで小ぢんまりしすぎる など見た目に難ありになる場合がありますので、バランスを良く考えて画像選びをされると良いと思います。

縦横比固定の場合は最大値設定の有無に着目

最初のサンプルをもう一度掲載します。

これだと巨大ヘッダーになってしまいますが、以下のように横幅に制限がついていればそうはなりません。

サンプル画像がそれぞれどちらに適しているか

まず、縦横比固定の場合は説明した通り 最大値指定(max-width)が必須 だと思ってください。仮にあなたのパソコンの横サイズが1140pxで見た目が最適のように見えても、閲覧者の中には2000pxを超える大画面パソコン利用者もきっと居ます。その場合は最大値指定が無いとヘッダーがデカすぎてビビる(笑)

サンプル1

この画像なら 縦横比固定に向いている のではないでしょうか。

使用テンプレート Generic --- 縦横比非固定

スマホではバッチリなんですがパソコンではちょっとわけわかんない。

使用テンプレート Blowing --- 縦横比固定

縦横比固定によって画像の全体像が見えるようになりました。ただ結構横に長い画像ではありますが、パソコンのサイズによってはこのぐらい大きくなります。参考までに。

サンプル2

この画像なら 縦横比は固定しなくとも良い かもしれませんね。

使用テンプレート Generic --- 縦横比非固定

パソコンでは大部分が見切れていますが、肝心なオブジェクトは表示されており、ぼかしの雰囲気も特に壊れているわけではないので無理に固定する必要はない、と私なら判断します。

使用テンプレート Blowing --- 縦横比固定

これはちょっと難ありですね。やはり縦が大きすぎるようです。スクショでは確認できませんが、パソコンの方はスクロールしてもまだ画像が続いている状態です。といってももちろん縦横比を固定するにしても、画像と全く同じ比にする必要は無いですよ。縦を幾分かカットするよう設定すれば体裁も良くなります。そういったイレギュラーな場面も巡ってきますが、あくまでも「縦横比を固定したい」という大抵の理由は「画像の部分的カットを防ぎたい」という理由が多いため、そのメジャーケースに対する説明をしています。何にでも「例外」はあります。

まとめ

最後に今回の記事の主旨なんですが、ヘッダー画像変更を如何に簡単にすませるか です。カスタマイズをササッと済ませようと思えばこれらの「ポイント」を押さえておくことがコツになるんですね。

で、最初に書きました通り「画像がキレイだったから」「画像が簡単に変えられそうだから」という理由でテンプレートを選ぶと後々の失敗に繋がることもあるもんですから、なるべくそいうったススメはしないようにしたいところです。とはいえヘッダー画像ぐらいはオリジナルにしたいですよね。

ヘッダー画像変更は「初心者向け」のカスマイズという感じなんですが、実は製作者側としても画像選び・画像の表示上の処理というのは非常に毎回頭を悩ませるところだったりするんです。それには使用を予定する画像の特徴を踏まえ、どうするのが最適なのかを考えるのがキモになります。

みなさんが「画像を変更したいけれどどれを土台にしたら良いか」と悩まれました際には 最終目的に最も近いと思われるもの を選ぶと良いですね。それは画像が似ているという意味ではなく 表示の状態 のことです。表示の状態が目指すものに近ければ 画像URLを差し替えるだけ という超簡単カスタマイズで済むことになります。

縦横比が固定されているかどうかはブラウザの横幅を変更してみればすぐにわかります。どのサイズでも同じ部位が同じように表示されていればその画像は「縦横比が固定されている」と思ってください。そして自分が使用したい画像はどう表示するのが最適かを考える、場合によっては選び直しも視野に入れるということです。