ブログのヘッダー画像を変えました、加えてブログ説明文に透過の背景色をつけました

はまぞうブログのカスタマイズワークショップを時々開催しているにも関わらず、

自分のブログのヘッダー画像は、昔のままでほったらかしにしていましたが、そろそろ変えなくっちゃ！と思っていました。


ヘッダー画像は、自分オリジナルのものを持っていないので、何にしようかと思案していましたが、

昔から好きな「アメリカ・モニュメントバレーに向かって延びる一本道」の景色にすることにしました。


なぜ、この画像にしたのか？

その理由は、行動すれば「道は開ける」との想いから、それを象徴するような画像

「アメリカ・モニュメントバレーに向かって延びる一本の道」

にしたのです。


後々、画像の権利関係でもめることがあるとイヤだったので、

「PIXTA」で探してMサイズ（税込 \1,620）を買うことにしました。


ですが、このヘッダー画像にすると、ブログの説明文が読みにくくなるのです。

そこで、ヘッダー画像も透けて見えるように、ブログ説明文の領域に透過色の背景色をつけることにしました。

※追記※
（7月27日17時時点で、透過の背景色を止めています。透過の背景色のイメージは、この記事の添付画像をご覧ください。）

この方法は、

「ヘッダー画像は絶対これにしたいんだけれど、ブログ説明文が読みにくくなってしまうし～．．．」

とお悩みの人にはお勧めです。


ブログのテンプレート（スタイルシート）にたった１行加えるだけで済みます。


スタイリッシュのテンプレートをお使いの方であれば、スタイルシート内にあるブログ説明文の書式を決めている下の部分



に赤い文字で示した１行を追加するだけです。

background-color: rgba(255, 255, 224, 0.50);

の部分を簡単に説明しますと、

255, 255, 224,の部分は、左からred,green,blueのカラーコードを#rgb方式で指定します。

ネットで「カラーコード」と検索すれば、色のrgb値を調べられるサイトがたくさん出てきますので、使いたい色のrgb値を決めます。

そして、0.50の部分は不透過度を指定します。

1.00にすれば不透過度100%なので透過ゼロに、0.00にすれば不透過度0%なので透明（背景色なし）になります。

この辺は、パソコン画面を見ながら調整することになりますが、大変な作業ではありません。


「好きなヘッダー画像を使いたい」と「ブログ説明文を読みやすくしたい」の両方を叶える簡単な方法です。