ヘッダー画像変更でブログタイトルが見づらくなってしまった場合の対処法

ケース紹介

画像の変更、あるいは 元々背景色だけの画像なし でデザインされていたものに画像背景を敷いた場合でも同じことが言えます。例えば以下のテンプレートをご覧ください。

デフォルト画像を以下のように変更したとします。

ブログタイトルが非常に不明瞭。これをなんとかしよう、というのが本記事の主旨です。
* サンプルに利用したテンプレートは、実際には予めある程度の対策を行っていますのでサンプルのような結果にはなりません。

Pinboard - FC2ブログテンプレート

Pinboardテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...

vanillaice000.blog.fc2.com

対処法

対処としては

• テキストの色を変更する
• テキストに背景色を設定する
• テキストにシャドウをつける
• 画像の上にテキストと反対色のオーバーレイを追加する

テキスト色の変更は該当箇所さえわかれば簡単なので、今回は説明を省きます。テキストへの背景色指定は場合によってはかっこいいデザインに仕上がることもありますが、逆に浮いたりかっこ悪くなることもあり諸刃なので説明を省きます。

テキストにシャドウをつける

テキスト色と背景色が共に 白系 の場合におすすめの方法。

テキストにあたる セレクタ を調べたら、以下の内容をテンプレートスタイルシートに追加します。

.xxx {
  text-shadow: 2px 0 2px rgba(0,0,0,.7);
}

ポイント① テキストのセレクタ名を調べる

.xxx はクラスセレクタで、テンプレートによって異なりますので調べる必要があります。

ポイント② シャドウの見た目

2px 0 2px rgba(0,0,0,.7) は 水平方向(x軸) 垂直方向(y軸) ぼかし 色 を意味しています。サンプルコードは x方向右に2pxのズレ、y方向ズレなし、ぼかしが2px、色は不透明度 0.7 の黒 という指定です。

x軸プラス値は「右」マイナス値は「左」、y軸プラス値は「下」マイナス値は「上」へ移動します。
xy軸にズラしを設定すると、反対側はシャドウがつかない状態になりますので、全方向へシャドウが必要な場合は xy を 0 に、ぼかしを大きめに、不透明度を低めに設定すると良いでしょう。シャドウのxy軸移動なしの場合は「縁取り」の状態になりますので、避けたい場合はぼかしの強弱と不透明度の強弱で調整を。
例) text-shadow: 0 0 4px rgb(0,0,0,.4);

rgb(0,0,0,.4); の .4 が不透明度です。透明度ではなく 不透明度。1 で完全不透明、つまり透けない。0 で完全透明。.5 なら本来の色からちょうど半分透けてる、ということです(小数点の前(整数)のゼロは表記を省略でき、省略が推奨されています)

テキストシャドウなし

テキストシャドウあり 2px 0 2px rgba(0,0,0,.7)

この方法のデメリット
フォントサイズが小さいとシャドウ同士がぶつかって見た目が煩わしくなることがある。
* letter-spacing などで解消できることもあります。

この方法が黒系フォント + 黒系背景 に向かないのは、背景が黒いとシャドウを場合によっては白系で設定せざるを得ず、白いシャドウはデザインが浮いてしまいがち。

画像に色々な色が点在している場合もあまり向かない方法です。

画像の上にテキストと反対色のオーバーレイを追加する

こちらの方法は視認性を確保するのに最適と言っても良いかもしれません。

白系・黒系を問わず汎用的に使える方法

テキストシャドウよりも若干手間がかかるのと、テンプレートの構造によっては難易度の高いカスタマイズになることもあります。そしてテンプレートのデフォルト内容を注意深くチェックする必要があります。

まずは画像が収まる領域のセレクタを調べ、以下の内容をスタイルシートに追加します。

.xxx {
  position: relative;
}

ポイント① デフォルトスタイルをチェック

対象セレクタに既に position プロパティが記されており、値が relative 以外の場合、例えば absolute などになっている場合は使えない可能性もあります。また、値が static の場合、本来この値はデフォルト値なので記す機会は非常に少ないです。それが敢えて記されているとしたら何らかの意図があって、変更するとまずいことになるのかもしれません。

条件をクリアできていると仮定してすすめると、次に以下の内容を同じくスタイルシートに追加します。

/* before または after */
.xxx::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0,0,0,.3);/* オーバーレイ背景色 */
}

ポイント② 対象セレクタの疑似要素をチェック

疑似要素 というのはCSSの手法で、htmlの操作(主に追加)を行わず、擬似的に要素を作成したり、一部にスタイルを充てたりします。代表的なのは ::before ::after ::first-line ::first-letter など。今回チェックするのは ::before と ::after です。

対象セレクタが .xxx だと仮定して、テンプレートのデフォルトスタイルシート内に .xxx::before と .xxx::after の両方が記されている場合はこの方法(オーバーレイ作成)は使えません。いずれも無ければ使えます。いずれか一方の場合はもう一方を利用して使える可能性があります。
例) .xxx::before が既にある場合は .xxx::after で作成

次に、テキストの方に以下の処理を追加します。

.yyy {
  position: relative;
  z-index: 3;
}

ポイント③ 重なり順序を整理

ヘッダー上テキストはブログタイトルだけとは限りませんので、ヘッダーに含まれる全てのテキストに対し指定が必要です。この処理を怠ると、オーバーレイがテキストの「上」に被さってしまいますます読めなくなりますし、リンクも効かなくなります。また、既に対象セレクタに position プロパティが存在しており、その値が relative absolute sticky などの場合は z-index: 3 のみ指定します(positionを上書きしないよう注意)

オーバーレイ無し 白テキスト

オーバーレイ無し 黒テキスト

オーバーレイ黒 rgba(0,0,0,.2) 白テキスト

オーバーレイ白 rgba(255,255,255,.4) 黒テキスト

この方法のデメリット
オリジナル画像の色彩を犠牲にすることがあります。
テンプレート構造によっては利用できなかったり、難易度が高くなる可能性があります。

まとめ

画像を犠牲にしたくない、という場合は ヘッダー画像の上にテキストが乗らないタイプのテンプレートを選ぶ のが一番です。例えば自分で描きあげたイラストなど。テキストというのはデバイスが変われば行の見た目が変わります。つまり 文章の折り返し などが発生しますので、もしかすると「一番見せたい部分、見て欲しい部分」にテキストが乗って画像の大事な部位が見えなくなってしまうかもしれません。カスタマイズを パソコンでの見た目だけを頼りに行ってしまう と発生しがち。

レスポンシブデザインテンプレートをパソコンでカスタマイズする際は、ブラウザの横幅をマウスで大きくしたり小さくしたり して、色々な画面サイズで確認することが大切です ('0')/

* vanillaice (Akira) 作のテンプレート以外をご利用の方のご質問はご遠慮ください(テンプレート構造の解析が必要になるため)
各テンプレートの製作者様に直接お尋ねくださいね。

* 本記事は予約投稿です。