ブログの見た目を大きく変えるヘッダ画像。
カラフルな物やお気に入りの写真に変えてみたいと思いませんか？
私がオススメしている無料のWordpressテーマ「BirdTIPS」でも外観＞カスタマイズ画面から簡単にヘッダ画像を差し替えることができます。
もともと数種類の画像が用意されているので、その中から選ぶのも良いですが少し暗いヘッダ画像ばかりなので明るくキレイな画像を設定してみました。
ヘッダ画像を変えるとタイトルが見にくくなる
ヘッダ画像をカラフルなものにすると、画像によってはタイトル文字が見にくくなってしまいます。
暗い画像ならタイトルを明るい色に、
明るい画像ならタイトルを暗い色に設定すればいいのですが・・・
（タイトルの文字色は外観＞カスタマイズ＞色画面で変えられます）
でもキレイな画像って、明るいところも暗いところも存在しますよね。
そうなるとタイトルを何色に設定すればいいのか分からなくなります。
タイトル文字に影を付けると見やすくなる
タイトルテキストの後ろの色が明るかったり、暗かったりすることが見にくさにつながる要因なので、タイトルの色を明るい色に設定して暗い影を付けるとか、タイトルに暗い色を設定して明るい影を付けるようにすれば、いろいろな画像の上でも見やすいタイトルになります。
WordPressテーマの「BirdTIPS」にはCSSを追記する画面までついています。無料のテーマなのに便利すぎる。
「BirdTIPS」を使用している方はそこに下記のコードを書き込んでください。
#header h1 a, #header #branding #site-title a, #header #branding #site-description {
text-shadow: 2px 2px 4px #233d12;
}
影の色は＃２３３ｄ１２と書かれている部分で調整してください。
＃の後ろの６文字には0から9、aからfまでの文字が指定できます。０が暗くFが明るい色になります。
赤２桁、緑２桁、青２桁で色を表しています。16進数って何？って方は１、３、５文字目を変更するだけで良いので好きな色に調整してみてください。
タイトル文字の色を変えて見やすくなった
せっかくキレイな画像を設定してもタイトルの文字が見えないのでは意味がないので、ヘッダ画像の変更を断念しようかと思ったこともありました。
しかし今回の影付け設定が上手く働いてくれたおかげで、タイトル文字も見やすくなったと思います。
同じような悩みをお持ちの方はチャレンジしてみてください。