ブログタイトルを画像に変える際の基本や【絶対やってはいけないこと】

vanillaice (Akira)

2017-09-01

カスタマイズ

0 Comments

ブログタイトルを画像に変更する

というのは比較的ポピュラーなカスタマイズかと思います。
その際にやってはいけないことがいくつかあるんですね。
やってはいけないというか、「やるとマズいことになる」と言った方が正しいか。

背景画像とロゴは切り分けるべき
掲載に利用するのは CSSプロパティのbackground-image ではなく htmlタグのimg

今回はこの2つに的を絞って説明しようと思います。
もちろん条件はレスポンシブデザインであること。

背景画像とロゴは別の画像として用意するべし

こういうことをしてしまう方がいらっしゃるんです ↓

背景とロゴ(ブログタイトル)を組み合わせてロゴの位置も確定し、背景つきの一枚画として作ってしまう。
あとはこれをヘッダーのところに入れて完成、という考え方だと思いますが、
この考え方はレスポンシブデザインでは通用しません
これをしたいなら固定幅テンプレートを選ばないと (´・ω・｀)
実際には固定幅を選んだとしてもよろしくないですよ。
単純に「見た目だけ考えれば良い」ということならそれでも良いんだけども。

レスポンシブデザインでこれをやりたいならば、最低でも

こうして別々にしておかないと (´・ω・｀)

レスポンシブの背景画表示範囲は流動的 - background掲載の場合

まずレスポンシブでヘッダーに画像を入れる際の基本はこちらの記事で ↓

ヘッダー背景画像カスタマイズ時の考え方 - カスタマイズ

物の考え方についてです。a way of thinking, a point of view です。ヘッダーの背景に画像を入れたいなぁもしくは既に設置されている背景を変更したいなぁと考えた時、どんな画像をどのような形で収めるかこの思考作業のフローチャートというんでしょうか。URLを入れ替えただけでしっくり来ることもあれば、そうでない場合もあるわけなので、壁にぶち当たった時に「どう考えれば良いのか」というのを導く記事 (´・ω・｀)画像の見...

仮に準備した一枚画を background として掲載するとします。
これは何故かというと、思考の流れとして

デフォルトでヘッダー部位に背景が入っている
↓
その背景をロゴつきに丸ごと差し替える

こういう感じかしら。
まず、レスポンシブでの背景画像表示、その表示される範囲というのが非常に流動的であるというのを知っておかないといけませんね。
そちらについてはブログカードのリンク先ページ内容を熟読して頂くとして。
そもそもヘッダー背景というのは通常 background あるいは background-image としてCSS指定されています。
これがもうダメ。何故ダメかは次章で説明します。

じゃあ実際に差し替えてみましょうか。

えっと。ブログタイトルはどこですか (´・ω・｀)

タブレットサイズだとかろうじて見えますね。すっごい上の方に。

切れとるしー。ブログタイトルの左側が見切れとるしー。

上記サンプルは画像位置合わせを center center の水平・垂直中央合わせにしています。
ブログタイトルの見切れを防ぐために left top に変更すると以下のようになります。

ブログタイトルは見きれませんが、右のオブジェクトがおざなり。
オブジェクトのために right center に変更… なんてことをやると結果はもうおわかりだと思いますので載せませんが、今度はブログタイトルが確実に見切れます。

こんな感じで、レスポンシブデザインでの背景表示範囲というのはコントロールがとても難しいんですね。
ですから固定幅の一枚画でなんとかしようと思うのであれば、テンプレートを固定幅に変更して頂く、と。
それが最適解になるかと思います。

ただこれね、ヘッダーのbackgroundとしてブログタイトルを入れてしまったら、リンクは一体どうするんですか?
ヘッダー全体に当ててしまいますか？
ヘッダーの上にナビゲーションがある場合はどうするんですか？

ブログタイトルは背景画像として設置するべきではない

というわけで次の章。

ブログタイトル画像(ロゴ)はbackgroundではなくimgで掲載すべし

これはもう基本中の基本です。

background(または background-image)の特徴

印刷に出てこない
マウスドラッグによるコピーができない
Google botは画像の内容(オブジェクトが何か, どんなテキストが描かれているか)を読み取れない

backgroundというhtmlタグでマークアップされている画像というのは、印刷をする際には無視されます。
つまり出てこない。
印刷することはまず無いでしょうかこれは別に問題ないとして。
コピーについても特に問題ないですかね。本件に大きく関連しているわけではないので。

問題は
botに情報を伝えられないとう点です。
ロボットに、画像の中にあるテキストを読み取ってくれ、というのは無理筋です。
ですからブログタイトルを画像に置き換える場合には

imgタグを用いて、alt属性を確実に記す

のがベストです。
というかそれ以外の選択は無い。
もしあなたが単純に
「ヘッダーにもともとあった背景画像をロゴ付き一枚画に置き換えた」のならば、すぐに辞めましょう。
検索ロボットが、ページ内のどこにあなたのブログタイトルがあるのか判断することができません。
もっと言えば記載があるのか無いのかすら判断ができませんので、backgroundで掲載してしまうというのは避けなければいけません。

上記サンプルを background から img に置き換えてみます。
画像の縱橫全て見きれなく表示させると以下のようになります。

縮尺で掲載していますのでわかりにくいですが、縦幅がすっごい大きいです。
画面サイズが大きくなればそれに比例して画像も大きくなりますので、大型画面のパソコンだとヘッダーが巨大になります。

タブレットでもやはりヘッダーが大きいですね。

逆に小さい。パソコンと比べるとヘッダーがスマホではとても小さくなります。
パソコンだとほぼほぼ全画面ヘッダーなのに、スマホだと小ぢんまり。
そして最大の難点はブログタイトルまで小さくなってしまうことです。
画像が縮尺されるのですから、当然テキストも小さくなります。
テキストは小さくしたくないんじゃないですか？フツーは。

だから一枚画で作成してはいけないんですね。

背景は background で、ロゴは img で掲載

これが一番なんです。
背景は元画像の拡・縮尺にしてしまうとヘッダー自体のサイズがそれに左右されてトンデモなことになります。
ロゴは元画像の拡・縮尺によってテキストサイズが変化してしまう。
これら不都合を解消しようと思えば
背景 --- background
ロゴ --- img
という選択が最も適しています。
そうすれば、背景画像はオブジェクト(サンプルでは白いテーブル)のことだけを考えて表示位置を合わせれば良し。
ロゴは縮尺がかかった時のサイズ調整を単独で行えば良し。
別々にすればなんとでもなる。

ロゴのマークアップ

背景とロゴを切り分ける必要性についてはご理解頂けたとして。
ホントにね、ロゴに大きな背景つけたらアカン。マジで(笑)

背景に使用したい画像はヘッダーの画像とURL差し替えで行ってください。
これは簡単ですよね。
で、ロゴに関してはCSSだけでなんとかするのは不可能ですので、htmlの追加が必須です。

例)

<header>
  <h1>
    <a href="ブログアドレス">
      ブログタイトル
    </a>
  </h1>
</header>

まぁ、大抵こんな感じだと思うのですけれども。
こう変える ↓

<header>
  <h1>
    <a href="ブログアドレス">
      <img src="ロゴ画像アドレス" alt="ブログ名">
    </a>
  </h1>
</header>

赤字の alt属性ですが、ここに入れるのはブログタイトルです。
私ならば、ブログ名が「The other way round」ですから
alt="The other way round"
ですね。
ここに「ブログロゴ」「ロゴ画像」「ブログタイトル」
とかは入れない。ブログ名を記してください。

今度はCSSです。
idやclass名を用いた方がホントは良いのですが、今回はやめておきます。

h1 img {
  width: 100%;
  max-width: 最大数値px;
}

緑部分が重要です。
基本は100%表示です。
スマホでは100%にしておかないと、横320px程度しかありませんので横はめいっぱい使う、と。
そのままですとパソコンでも画面サイズの100%まで拡大されてしまいますので、それを防ぐために横幅の最大値を設定してください。
max-width: 500px;
ならば、ロゴ画像は横幅500px以上になることはありません。

ロゴ画像は解像度を保つために大きめに作ってください。
最大値を500pxに設定するのであれば、実寸は1000px。
倍のサイズで作っておきましょう。
でないと高解像度ディスプレイで閲覧した際に画像が不鮮明(ぼやける)になってしまいます。

ロゴの上下位置についてはheader側の上下padding で操作すると良いと思います。
そしてくれぐれも alt属性を忘れない。