以前公開致しました、ちゃログのテンプレートカスタマイズ講座。
ご変更下さった方のブログを拝見して、「ご説明が足りなかったかも知れない」と思った事について、
「号外」という形で２回に分けてまとめております。

号外の2回目は「色合いの調整」です。
背景画像と文字の色との関係について、一番分かりやすい「明度」に絞ってお話ししていきます。

特別な効果を狙う目的以外、
明るい色の背景には暗い色の文字を、
逆に暗い色の背景には明るい色の文字を使用する、というのが一般的です。

実際に背景画像と文字を表示させてみます。

いかがでしょうか？ …てか見えませんよね( = =　)
このような感じの色合いの使用は避けた方がよいでしょう。

では今度は上の例とは正反対の色を使って表示させてみます。

今度ははっきり見えるようになりました。
上の例は、明度的には正反対の色を使いましたので極端になっていますが、
「どなたが見てもはっきり見える」事が重要になってくると思います。

それでは上記のように、
背景に明暗が交互に来るような背景画像を使用した場合
どのようにしたらハッキリ見えるようになるでしょうか。

cssのリファレンスサイト等に文字の後ろ側に背景色を設定する方法が載っていたりもするのですが、
実はwebブラウザのひとつFire Foxでは未サポートとなっていますので、キチンと表示されません。
webブラウザではインターネットエクスプローラが有名で、一番シェアがあるのですが、
「いろいろな方が閲覧するブログはいろいろなブラウザによって閲覧される」とお考え頂ければと思います。
お使い頂く事は禁止ではないのですが、あまりお勧め出来る方法ではありません。

答え…というわけではないのですが、一番手っ取り早くて、それでいて確実な方法は、
「背景画像を変えてしまう」方法です。
少し見てみましょう。

お手元に画像処理ソフトはお持ちでしょうか。
お持ちでない場合はWindowsのパソコンには標準で「ペイント」とうソフトがプリインストールされておりますので
それをお使い頂ければとりあえずの編集は出来ます。

･･･なのですが、機能的に出来る事に限りがありますので、少しお金がかかったりする事も有りますけども、 専用のソフトをご用意される事をお勧めします。

ベクターや窓の杜などでも画像処理ソフトがダウンロード出来ますので、
ご覧になってご検討されたらよろしいかと思います。

それでは実際に上の画像を元に黒い文字が見えやすいように加工してみます。

いかがでしょうか？
このようにちょっとした加工を施す事でお気に入りの画像がどんな感じのものでも、
それを活かしながら簡単に、かつ視認性に優れたブログにする事が出来ちゃいます。

お気に入りの画像の中に、
「文字をずらせば画像を加工しないで使えそうな部分がある」場合についてご説明します。

上の例では白くなっている部分に文字を回避すれば黒い文字ははっきり見えそうですよね。
実際にやってみましょう。

メニューの「スキン」を選択します。

左メニュー、スキン変更・確認の「スキン編集」をクリックすると…、

第1回目や第3回目、それと号外の1回目と同じようにcssが記述されているフォームが表示されます。

スクロールバーを下ろし今度は、
/* Default_Module
===========================================================*/
の中の、
/* Text_Module */
と記述してある部分を表示します。

その中に「h1」と「h2」という記述がされているのがご確認頂けると思うのですが、
実はちゃログのヘッダ部分のタイトルとサブタイトルの文字に関しては2つだけで制御されていたりします。

文字の表示位置は「padding」の内容を変更すると変える事が出来ます。

でも良く見てみるとこの例では「padding」と「padding-left」という記述がされています。
これらが持つ意味はそれぞれ、「全体的にかさ上げ」と「左をかさ上げ」になります。
「全体的にかさ上げ」の中身を見てみると単位付きの数字が4つ並んでいます。
これらは左から、「上・右・下・左」の順に記述されていて、日本語に直すと
「上10ピクセル、右0ピクセル、下0ピクセル、左10ピクセルかさ上げします」
という意味になります。

今回のテンプレートカスタマイズ講座号外 Vol.2、いかがだったでしょう。

なんだか中途半端に終わってしまったようにも思えますが、
ここまでご説明してきて、最初から熱心にカスタマイズ講座をご覧になっていらっしゃった方は、
相当力を付けていらっしゃるものと思います＾＾

paddingに慣れて頂くためにも、一度自由に文字の表示位置を変えてみて頂けたらと存じます＾＾

さて、次回以降ののテンプレートカスタマイズ講座は、
以前お伝えした通り、CSSの中身について少し掘り下げて勉強していきたいと思います。

今回ご説明したpaddingについても、ホントしつこいくらい出てきますので、
お楽しみにと言うのは変かも知れませんが、お楽しみにです＾＾〃