タイトル文字に影をつけて読みやすくする


※下記の情報は、2014.8.13まで使用されていた旧レイアウトをご利用の場合のみ該当します。予めご了承ください。

 

「ヘッダーに画像を入れたら、

サイトタイトル文字がイマイチ見にくい~っ」

そんな状態に陥っている人はいませんか?

 

画像の加工ができてしまえば、ベストですが、

画像ソフトを使うハードルがちょっと高い。

そんな方の為に、右のような縁取りを、画像を加工なしで、簡単に作れる方法をご紹介します。(実際は、シャドウ=影を入れる方法です)

 

▼やり方は簡単♪

「設定」→「ヘッダーを編集」を開いて、下記の内容を貼り付けるだけ。

↓ここからコピペどうぞ

 

<style type="text/css">

/*<![CDATA[*/
#emotion-header-title
{
text-shadow: 2px  2px 5px darkblue,
            -2px  2px 5px darkblue,
             2px -2px 5px darkblue,
            -2px -2px 5px darkblue;
}
/*]]>*/
</style>

 

 

darkblueの箇所は、色指定です。 #000088と掲載してもOK.。

色設定のバリエーションは、「文字のサイズや色を変更する」ページでご確認ください。

 

 

【独り言】

文字の縁取りも試したみたのですが、影と比べるといまいち綺麗に表示されませんでした。

縁取りの文字を使いたい場合は、やはり画像ソフトで作成がよさそうです。