40歳の誕生日に早期リタイアしちゃいました。リタイア後の生活を楽しみながら書いています。

menu

40代のセミリタイア生活

スポンサーリンク

WordPressでヘッダ画像を変更してもタイトルが見にくくならない方法

Pocket

ランキングへの応援クリックが励みになります。
にほんブログ村 ライフスタイルブログ セミリタイア生活へ

ブログの見た目を大きく変えるヘッダ画像。

カラフルな物やお気に入りの写真に変えてみたいと思いませんか?

私がオススメしている無料のWordpressテーマ「BirdTIPS」でも外観>カスタマイズ画面から簡単にヘッダ画像を差し替えることができます。

もともと数種類の画像が用意されているので、その中から選ぶのも良いですが少し暗いヘッダ画像ばかりなので明るくキレイな画像を設定してみました。

ヘッダ画像を変えるとタイトルが見にくくなる

ヘッダ画像をカラフルなものにすると、画像によってはタイトル文字が見にくくなってしまいます。

暗い画像ならタイトルを明るい色に、
明るい画像ならタイトルを暗い色に設定すればいいのですが・・・
(タイトルの文字色は外観>カスタマイズ>色画面で変えられます)

でもキレイな画像って、明るいところも暗いところも存在しますよね。

そうなるとタイトルを何色に設定すればいいのか分からなくなります。

タイトル文字に影を付けると見やすくなる

タイトルテキストの後ろの色が明るかったり、暗かったりすることが見にくさにつながる要因なので、タイトルの色を明るい色に設定して暗い影を付けるとか、タイトルに暗い色を設定して明るい影を付けるようにすれば、いろいろな画像の上でも見やすいタイトルになります。

WordPressテーマの「BirdTIPS」にはCSSを追記する画面までついています。無料のテーマなのに便利すぎる。

「BirdTIPS」を使用している方はそこに下記のコードを書き込んでください。

#header h1 a, #header #branding #site-title a, #header #branding #site-description {
  text-shadow: 2px 2px 4px #233d12;
}

影の色は#233d12と書かれている部分で調整してください。

#の後ろの6文字には0から9、aからfまでの文字が指定できます。0が暗くFが明るい色になります。
赤2桁、緑2桁、青2桁で色を表しています。16進数って何?って方は1、3、5文字目を変更するだけで良いので好きな色に調整してみてください。

スポンサーリンク

タイトル文字の色を変えて見やすくなった

せっかくキレイな画像を設定してもタイトルの文字が見えないのでは意味がないので、ヘッダ画像の変更を断念しようかと思ったこともありました。

しかし今回の影付け設定が上手く働いてくれたおかげで、タイトル文字も見やすくなったと思います。

同じような悩みをお持ちの方はチャレンジしてみてください。


Pocket

ランキング参加中

いつも応援ありがとうございます。
にほんブログ村 ライフスタイルブログ セミリタイア生活へ にほんブログ村 雑貨ブログ 100均雑貨へ

お気に入りに登録

キーボードの「Ctrl」と「D」を同時に押してから「完了(追加)」ボタンをクリックしていただきますと「お気に入り(ブックマーク)」に追加できます。

管理人のプロフィール


KAZUO ⇒ 自己紹介

サラリーマン時代はIT系の会社でSEをしていました。今はリタイア中です。誕生日はハリーポッターと同じ日ですが年齢は40代です。早期リタイアでお金はありませんが、リタイア前とは全く違うゆっくりとした時間を楽しんでいます。

お問合わせはお気軽に