attention admin about comments trackbacks you may also like

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

2019年07月02日
カスタマイズ
3
初心者向け Education トラブル対処 Tips

FC2ブログはテンプレートのhtmlが統一されているわけではありませんので、「これこれこうすればオッケー!」というわけにはいかないのが悩みどころではないかと思います。

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

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

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

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

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

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

縦幅の維持とは

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

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

【スマートフォン】赤い部位のアスペクト比は約3:2
【パソコン】赤い部位のアスペクト比は約3:2

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

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

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

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

縦横比を固定したい時

縦横比固定が必要と思われるパターン
画像の全体像を表示したい場合
採用条件
横幅に最大値指定が行われている
横に対する縦の比率が40%以下(5:2)
テキストが含まれていない(または予測し得る文字数で収まる)

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

縦横比固定が不要(あるいは行わない方が良い)と思われるパターン
画像の全体像を表示させる必要が無い場合(見切れが生じても良い場合)
テキストが含まれている場合で、かつ、その文字数が予測不可の場合
採用条件
画像内のオブジェクトの意味が失われない

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

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

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

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

テキストを含む
テキストを含まない

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

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

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

テキスト量が多い場合

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

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

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

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

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

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

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

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

【パソコン】赤い部位は横幅100%(ブラウズサイズと同等)

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

【パソコン】赤い部位に最大値を設定(その数値以上は大きくならない)

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

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

サンプル1

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

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

スマートフォン
パソコン

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

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

スマートフォン
パソコン

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

サンプル2

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

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

スマートフォン
パソコン

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

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

スマートフォン
パソコン

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

まとめ

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

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

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

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

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

関連する記事
vanillaice (Akira)
Author: vanillaice (Akira)
* Internet Explorerはサポートしておりません。
* メールでの返信をしておりません。
ブログ内で必ずお返事はしておりますので
ご面倒ですがリコメの確認に再度お越しくださいね *

コメント(3)

There are no comments yet.

Janedoe1471  

2019/07/02 (Tue) 16:36

レスポンシブのヘッダー画像は難所

おっしゃるように、レスポンシブの場合、縦横比固定は、heightが足りなくなる問題があるので、画像の上にタイトル文字と説明文が来る場合には、なかなか、難しいです。
また、縦横比固定を守り抜こうとすると、最終的には、スマホでは、画像自体が異様に小さくなってしまうので、ヘッダー画像の意味合いを閲覧者にぱっと理解してもらうという「目的」を達しているとは、言えなくなってしまう場合が、多いです。

私のテンプレートの場合は、初心者さんが対象なので、カスタマイズの方法については、あまり細かいことは、指定しないようにしています。
初心者さんの「目的」というのは、自慢の画像の「意味合い」が、ぱっと見で、閲覧者さんにわかればいい、だいたいそういうことだろうと思います。
細かいことを言いすぎると、初心者さんは、「難しくてできそうにない」と思って、本当は、ヘッダーにはめたい自慢の画像があるのに、諦めてしまったりすると。
ゆえに、私の場合は、文字数(タイトルと説明文)の分量は、最初からは、あまり気にせず、はみ出たという場合には、個別相談で対処しよう、と^^
また、縦横比をある程度固定して見せたいという人がいれば、それも、個別相談で対処するつもりで。
それは、私の場合は、今の段階では、ダウンロード数が少ないので、個別相談でもできるだろうと、思っているからで、Akiraさんのように、自作のテンプレートの利用者が多ければ、個別対処をしていくことは、難しいだろうと思います。

また、画像のここからここまでをどうしても見せたいという、細かい希望があるような人の場合には、おおむね、そういう方自身が、知識のある方のはずなので、放っておいても、自力でできる、と思うので、そういう人の心配は、私は、あまりしていないのです^^

ヘッダー画像というのは、レスポンシブをいじるようになってから、かなり神経を使う部分で、これは、固定幅なら、どんなにラクかと、思いますが、そして、画像と文字を分離してしまったほうが、ラクには決まっているのですが、たぶん、初心者さんの場合ほど、画像の上に文字が乗っかっているほうを、好むのではないか、という気がしています。

いつも、勉強になる記事を、ありがとうございます^^

Janedoe1471  

2019/07/02 (Tue) 16:50

連投すいません

連投ですいません。
例えば、拙テンプレートを利用してくださっているこの方ですが
https://morry2688.blog.fc2.com/

自力でヘッダーを設置された方ですが、拝見したときに、あまりにもばっちりキマっていたので、驚いたくらいです。
縦横比は、固定ではありませんが、スマホの段階になっても、ヘッダー画像の目的が果たせていると、自慢の四駆の一部分と、道路が見えているから、何をしているブログなのかということが、ほぼわかる、サファリストさんである、と、個人の無料ブログの場合は、だいたいこういう感じで、いいのではないだろうか、と。

ヘッダー画像の見せ方について、あまり細かい注文のあるような方は、それこそ、お金を払ってプロに頼むか、自分で勉強をするか、どちらかにするしかないのではないかと、思います。

Akira  

2019/07/02 (Tue) 17:36
vanillaice (Akira)

To Janedoe1471さん

Janedoe1471さん、こんにちは ('0')/

今ちょうど「ヘッダー画像」のカスタマイズのお問い合わせが来ていて、その方に読んで頂くと良いかなぁ、と思いまして。
「変更」は良いんですが、「追加」の場合のお手伝いはなるべくお断りしたいんですね。なので「自分の画像と相談して『URL差し替え』で済むテンプレートで検討を」とお伝えしたんですが、検討っつってもどう検討すりゃ良いんだよ、って感じなので説明した次第(笑)

やっぱり多くの方は感覚的に「画像全体が見える」「横と縦のサイズをデフォルトの画像と同じにすれば良い」と考えている方が多いですね。それはレスポンシブでは無理だよ、という説明をなんとか平たく… と思いますがこれがなかなか難しい。
個人的にはbackground-size使っときゃ良い、と思ったりしてるんですが、中にはテキスト入りのものがあったり、見切れたらまずいよなぁ、というものもあったりで ^^;
そして私の全文タイプテンプレでは「差し替えでOK」にあたるものが少ないんですよね。なので他製作者さんのテンプレートも視野に入れて頂ければ、と思って土台選びのコツを書きました。本来はテンプレートを選んでからカスタマイズを考えるというのが定石ですが、それでもヘッダー画像にこだわりの有る方ならば順序が逆になっても仕方がないかと思って。
助けになれば良いのだけれど (´・ω・`)

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です。
ご質問の前に 必ずお読みください
テンプレートに関するご質問時のお願い

必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧(表示タイプ別)