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

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

こういうことをしてしまう方がいらっしゃるんです ↓
背景 + ロゴの一枚画

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

レスポンシブデザインでこれをやりたいならば、最低でも
背景用 ロゴ部分 こうして別々にしておかないと (´・ω・｀)

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

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

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

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

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

じゃあ実際に差し替えてみましょうか。
パソコン 1238px えっと。ブログタイトルはどこですか (´・ω・｀)

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

スマホ 375px(iPhone6相当) 切れとるしー。ブログタイトルの左側が見切れとるしー。

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

位置合わせ left top
パソコン 1238px タブレット 768px スマホ 375px(iPhone6相当)

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

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

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

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

というわけで次の章。

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

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

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

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

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

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

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

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

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

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

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

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

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

背景は 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属性 を忘れない。

パソコン 1238px スマホ 375px(iPhone6相当)

まとめ

背景画像というのは「装飾」でしかありませんが、ブログタイトルは装飾ではありません。
ですから適切なマークアップがあります。
それを無視して見た目だけでやってしまわないことです。

背景画像とロゴは別々で作成しましょう。
ロゴに背景つけたらアカンで！
という記事でございました。

Education Instruction CSS 初心者向け