さて、タイトルの背景に写真を入れました。
でもブログタイトルが見えにくくなったので文字の色を変えました。
それでもイマイチだったので文字の位置を変えました。



これでなんとか一件落着。
いやーやれやれ、季節も変わったし背景の写真変えてみるかな～って事で変えてみました。



工工エエェ(´Д｀）ェエエ工工
また文字が見えにくい！
しかもブログ概要なんて完全に見えません。
そうなんです、画像の色によって見えにくくなっちゃうんです。
また調整のやり直し面倒くさいですよね。
いっそのことタイトル画像の外に出しちゃったら良いんじゃないでしょうか。

と言う事でやってみましょう。

まず、「オリジナルデザインの登録」の画面で「トップページ」を見て下さい。
で、次のような場所を探してください。

<div id="banner">
<h1 class="blogtitle"><a href="<%BlogUrl%>" accesskey="1"><%BlogTitle%></a></h1>
<div class="description"><%BlogDescription%></div>
</div>

青文字の<div id="banner">から</div>がタイトル画像の括りです。
その括りの中の「BlogTitle」と「description」がブログタイトルとブログ概要の文字を司っています。
要するにタイトル画像の中に表示されてるって事です。
と言う事は、この括りの外に出してしまえば良いって事ですね。

<div id="banner">
</div>
<h1 class="blogtitle"><a href="<%BlogUrl%>" accesskey="1"><%BlogTitle%></a></h1>
<div class="description"><%BlogDescription%></div>

こんな感じです。
これで一旦保存してブログを表示してみましょう。



はい、タイトル画像の下に出ましたね。
でもレイアウトが滅茶苦茶です。
もうちょっと文字の隙間を詰めましょう。
これは文字の位置を変えた時の手順と同じです。
「オリジナルデザインの登録」の画面で「スタイルシート」を見て下さい。

.blogtitle{
　　font-size:30px;
　　font-weight:bold;
　　padding:90px 0px 0px 10px;
　　text-align:left;
　　letter-spacing:2px;
}

.description{
　　color:#000000;
　　font-size:12px;
　　padding:40px 0px 0px 50px;
　　text-align:left;
　　letter-spacing:2px;
}

この部分ですね。
前回はタイトル文字はブログのトップからの隙間を指定しましたが、タイトル画像の下へ出したので、タイトル画像の底面からの隙間を指定する事になります。
ついでに左からの位置も調整して…

.blogtitle{
　　font-size:30px;
　　font-weight:bold;
　　padding:10px 0px 0px 30px;
　　text-align:left;
　　letter-spacing:2px;
}

.description{
　　color:#000000;
　　font-size:12px;
　　padding:10px 0px 10px 50px;
　　text-align:left;
　　letter-spacing:2px;
}

こんな感じですね。
保存して確認します。



おお～だいぶマシになりました。
でも背景が白のままじゃ面白くありませんね。
タイトル文字の背景色も指定してみましょう。
これはちょっと面倒ですよ。
まず、「blogtitle」と「description」を括るクラスを新たに作る必要があります。
とりあえず「#titledesc」とか言う名前にしましょう。
そしてこれを「オリジナルデザインの登録」画面の「スタイルシート」の一番下に追加します。

#titledesc{
　　background-color:#0072D3;
　　margin:0px 0px 0px 0px;
　　padding:0px 0px 0px 0px;
}

こんな感じです。
一応背景色だけ指定して、margin、paddingは隙間無しとしておきます。

次に、「オリジナルデザインの登録」画面の「トップページ」で最初に指定した部分、

<div id="banner">
</div>
<h1 class="blogtitle"><a href="<%BlogUrl%>" accesskey="1"><%BlogTitle%></a></h1>
<div class="description"><%BlogDescription%></div>

「banner」クラスの外に出した部分を、新たに追加した「titledesc」クラスで括ります。

<div id="banner">
</div>
<div id="titledesc">
<h1 class="blogtitle"><a href="<%BlogUrl%>" accesskey="1"><%BlogTitle%></a></h1>
<div class="description"><%BlogDescription%></div>
</div>

はい、また保存して確認します。



かっこよくなりましたね。
でもよく見てください。
タイトル文字ってこの時に赤にしたはずですよね。
それもそのはず、今回、タイトル文字を「banner」クラスの括りから外に出してしまったらです。
と言う事は、新たに括った「titledesc」クラスで文字色を指定すれば良いだけです。
ついでに文字色も白（FFFFFF）にしちゃいましょう。

#titledesc a{color:#FFFFFF;text-decoration:none;}
#titledesc a:link{color:#FFFFFF;text-decoration:none;}
#titledesc a:visited{color:#FFFFFF;text-decoration:none;}
#titledesc a:active{color:#FFFFFF;text-decoration:underline;}
#titledesc a:hover{color:#FFFFFF;text-decoration:underline;}

またこれを「オリジナルデザインの登録」画面の「スタイルシート」の一番下に追加してください。



はいOKです。
これでどんなタイトル画像にしても怖くありません。

さて、ここでサイドバーのカレンダーの日付を押してみてください。
すると、残念ながら変更前の状態になっちゃいましたよね。
ここで、「オリジナルデザインの登録」画面の説明です。
「スタイルシート」「トップページ」「個別記事」「アーカイブ」と４つの入力欄があると思います。
それぞれの役目を簡単に説明します。

●スタイルシート
　　　　　文字色など装飾の管理
●トップページ
　　　　　ブログを開いた時の画面のレイアウトを管理
●個別記事
　　　　　コメントの記入時など、１記事のみ表示される画面のレイアウトを管理
●アーカイブ
　　　　　カレンダーのクリック時、カテゴリのクリック時の画面レイアウトを管理

要するに「スタイルシート」以外の３つは兄弟みたいなもんです。
なので「個別記事」と「アーカイブ」にも「トップページ」に加えたのと同じ変更を加えます。

個別記事

　　<div id="banner">
　　　　<h1 class="blogtitle"><a href="<%BlogUrl%>" accesskey="1"><%BlogTitle%></a></h1>
　　　　<div class="description"><%BlogDescription%></div>
　　</div>

　　↓

　　<div id="banner">
　　</div>
　　<div id="titledesc">
　　　　<h1 class="blogtitle"><a href="<%BlogUrl%>" accesskey="1"><%BlogTitle%></a></h1>
　　　　<div class="description"><%BlogDescription%></div>
　　</div>

アーカイブ

<div id="banner">
<h1 class="blogtitle"><a href="<%BlogUrl%>" accesskey="1"><%BlogTitle%></a></h1>
<div class="description"><%BlogDescription%></div>
</div>

　　↓

<div id="banner">
</div>
<div id="titledesc">
<h1 class="blogtitle"><a href="<%BlogUrl%>" accesskey="1"><%BlogTitle%></a></h1>
<div class="description"><%BlogDescription%></div>
</div>

以上です。
一応、カレンダークリックしての確認と、コメントクリックしての確認をしておいてくださいね。



・オマケ
「スタイルシート」の以下の部分を触ると記事と今回追加した部分の隙間を調整できます。

#content{
　　width:390px;
　　float:right;
　　background-color:#ffffff;
　　padding:20px 5px 20px 5px;
}

#links{
　　width:160px;
　　float:left;
　　text-align:left;
　　margin:0px 0px 0px 0px;
　　padding:20px 5px 20px 5px;
　　background-color:#ffffff;
　　overflow:hidden;
}

#links2{
　　width:160px;
　　float:right;
　　text-align:left;
　　margin:0px 0px 0px 0px;
　　padding:20px 5px 20px 5px;
　　background-color:#ffffff;
　　overflow:hidden;
}

　　↓

#content{
　　width:390px;
　　float:right;
　　background-color:#ffffff;
　　padding:10px 5px 20px 5px;
}

#links{
　　width:160px;
　　float:left;
　　text-align:left;
　　margin:0px 0px 0px 0px;
　　padding:10px 5px 20px 5px;
　　background-color:#ffffff;
　　overflow:hidden;
}

#links2{
　　width:160px;
　　float:right;
　　text-align:left;
　　margin:0px 0px 0px 0px;
　　padding:10px 5px 20px 5px;
　　background-color:#ffffff;
　　overflow:hidden;
}

  

タイトルの画像を変更した場合、画像とタイトル文字の色が近いと、タイトルが見えにくくなっちゃいます。
じゃ、タイトルの文字色を変えよう！と思って色々やってみても背景が写真だと色んな色が使われてて、あまり効果なかったりしますよね。
それなら背景の色が単純な部分に文字を移動してみましょう。



この写真だと下の方が単純な色になってますのでタイトルと概要を下の方へずらしてみる事にします。

「オリジナルデザインの登録」の画面で「スタイルシート」を見てみましょう。
まず、ブログタイトルと概要の位置を設定している部分を探します。
ずーっと見ていくと「.blogtitle」と「.description」と言う部分が出てきます。

.blogtitle{
　　font-size:30px;
　　font-weight:bold;
　　padding:20px 0px 0px 10px;
　　text-align:left;
　　letter-spacing:2px;
}

.description{
　　color:#000000;
　　font-size:12px;
　　padding:4px 0px 0px 35px;
　　text-align:left;
　　letter-spacing:2px;
}

ここがタイトルと概要の文字のレイアウトを設定している部分です。
そして、文字の位置を指定しているのが「padding」になります。
paddingでは表示した文字の周囲にどれだけ隙間を空けるかという設定をしています。
paddingの後ろに数値が４つ指定してありますね。
これは上・右・下・左の順で、隙間の大きさを指定しています。

まだ良く分かりませんね。
ではこの画像を見てみましょう。



タイトル文字の上と左に隙間がありますね。
これは上から20、左から10空けてあります。
そして、概要の部分もタイトルとの間に4、左から35あけてあります。
これはそれぞれ「.blogtitle」と「.description」の「padding」で指定してある通りですね。

ということでここを触ればいいだけです。
簡単ですね。
では、タイトルをもう少し下げてみます。
概要もタイトルと少し離しましょう。あと、少し右に寄せようかな。

.blogtitle{
　　font-size:30px;
　　font-weight:bold;
　　padding:90px 0px 0px 10px;
　　text-align:left;
　　letter-spacing:2px;
}

.description{
　　color:#000000;
　　font-size:12px;
　　padding:40px 0px 0px 50px;
　　text-align:left;
　　letter-spacing:2px;
}

そして「登録」ボタンを押して確認。



はい、上手くできました。＾＾

隙間の数値とかどんな値を入れればいいか分からないですよね。
これはもういろいろ変えながら調整するしかありません。
一応、ブログ全体の幅とタイトル画像の高さは意識してくださいね。
じゃないと外に飛び出しちゃいます。

あと、「padding」で右と下の隙間は指定しなくていいの？って思われる方もあるでしょう。
シンプルテンプレートシリーズは、タイトルと概要の文字は左上に寄せるよう設定されています。
なので上と左の隙間を設定すれば右と下の隙間は自動的に調整されます。
他のテンプレートではタイトルを右上に寄せてあるものもあったりします。
その場合は右と上の隙間を設定すればＯＫです。  

タイトルの画像を変えてみたけど、ブログタイトルと概要が見づらくなった！って事は良くあります。こんな感じ↓

と言う事で、ブログタイトルとブログ概要の文字色を変えてみましょう。

では、「オリジナルデザインの登録」の画面で「スタイルシート」を見てみましょう。
まず、ブログタイトルの色を設定している部分を探します。
リファレンスカテゴリに「スタイルシートのセレクター」の一覧を上げておきましたのでそこから探してみるのも良いでしょう。

ずーっと見ていくと「.blogtitle」と言う部分が出てきます。
普通に考えるとこれなんですが、じつは違います。
ブログタイトルの部分はクリックするとブログのTOPへ飛ぶように出来ています。
これはHTMLで言う、aタグなんですね。（詳しい話は飛ばします。＾＾；）
なので、「#banner a」の記述がそれに当たります。

#banner a{color:#fff;text-decoration:none;}
#banner a:link{color:#fff;text-decoration:none;}
#banner a:visited{color:#fff;text-decoration:none;}
#banner a:active{color:#fff;text-decoration:underline;}
#banner a:hover{color:#fff;text-decoration:underline;}

この部分になるわけですが、５つありますね。
この５つにはそれぞれ役割があります。
・linkは通常の状態の文字色
・visitedはリンク先に訪問済みの場合の文字色
・activeは選択状態の場合の文字色
・hoverはマウスカーソルが上にきた状態の文字色
となります。
何も無しのaは何でしょう？
めんどくさいので試しません。＾＾；
色々やってみてください。

まずタイトル文字を赤にしてみます。
ついでにマウスカーソルが上にきたら文字の背景を薄い赤色にする記述を追加してみます。

#banner a{color:#FF0000;text-decoration:none;}
#banner a:link{color:#FF0000;text-decoration:none;}
#banner a:visited{color:#FF0000;text-decoration:none;}
#banner a:active{color:#FF0000;text-decoration:underline;}
#banner a:hover{color:#FF0000;background:#FFCCCC;text-decoration:underline;}

FF0000とか指定している部分が色の表現になります。
色の表現方法についてもリファレンスカテゴリに「色の表現方法」が上げてありますので参考にしてみてください。

さて、これでタイトルの文字色は指定できました。
次は概要の文字色を変えましょう。
これは簡単です。
「.description」が概要の設定部分に当たります。

.description{
　　color:#fff;
　　font-size:12px;
　　padding:4px 0px 0px 35px;
　　text-align:left;
　　letter-spacing:2px;
}

この部分の「color」って所がそうですね。
ここを黒にしてみます。

.description{
　　color:#000000;
　　font-size:12px;
　　padding:4px 0px 0px 35px;
　　text-align:left;
　　letter-spacing:2px;
}

たったこれだけです。
「登録」ボタンを押して確認しましょう。



上手くできましたね。＾＾

でもこれでも見えにくいですね。
タイトルと概要を画像の下の方へ持ってくれば良さそうな気がします。
次は表示位置の変更方法を書いてみます。  

ブログのレイアウトが一気に違って見えるのは、やっぱりブログの一番上にあるブログタイトルを表示している部分じゃ無いでしょうか。



ということで、ブログタイトルの画像を変更してみましょう。

まず、「オリジナルデザインの登録」の画面で「スタイルシート」を見てみましょう。
今回は説明しませんが、「スタイルシート」は、ブログのデザインを設定している部分です。ブログタイトルの文字や画像などもここで指定しています。

ま、とりあえず上から見ていきましょう。
すると次のような部分が出てくると思います。

#banner,#subbanner{
　　background:#0072D3 url(/_img/simple_blue/head.gif) left bottom;
　　padding:0px 10px 10px 10px;}

ここがブログタイトルの背景を設定している部分です。
url()の中が画像ファイルの指定をしてる場所みたいですね。
ためしに自分のブログアドレスの後ろにアドレスをつなげて表示してみましょう。
http://css.mie1.net/_img/simple_blue/head.gif
なんか縦に細長い青い線が出ましたね。
この画像を並べて青い背景にしてるんだな～と想像できます。
じゃ、ここを自分の好きな画像ファイルに変えればタイトルの画像が変わるって事ですね。

次は画像を用意しないといけません。
タイトルに使う画像はデジカメで撮影した写真などを使えば良いのですが、タイトルの大きさに収まるようにしないといけません。
無料で使える画像編集ソフト「JTrim」を使ってみましょう。
ダウンロードはこちらから。

まず必要な情報として、「3カラム　シンプルブルー」のテンプレートの横幅は740ピクセルです。
なので横幅が740ピクセルの画像を作らなくてはいけません。
また、一番上のタイトル部分ですので高さがありすぎてもおかしいですので、なるべく横長の画像にしましょう。
では、その手順を簡単に書いてみます。

１、JTrimを起動してタイトルに使いたい画像を開きます。
２、開いた画像の上でマウスをドラッグして切り抜きたい範囲を選択
３、メニューの[イメージ]-[切り抜き]
４、メニューの[イメージ]-[リサイズ]-[サイズで指定する]-[横に740入力]
（この場合元々の値が740より小さい場合、タイトルに使うには小さすぎる画像と言う事ですのでもう少し大きい画像を用意して下さい）
５、[縦]の値を憶えておく。
６、[OK]
７、メニューの[ファイル]-[名前を付けて保存]でJPG形式で保存する。

さて、タイトル画像ができましたので、ブログにアップロードしましょう。
「画像・動画の登録、一覧、削除」から画像をアップロードして、その画像のアドレスを参照します。
参照方法は下の図を見てください。



すると画像のアドレスはhttp://www.mie1.net/usr/csstest/title.jpgとわかりました。（このアドレスは利用する人によって変わります）
では先ほどの「スタイルシート」の画面に戻りましょう。

画像を指定してた部分を変更します。

#banner,#subbanner{
　　background:#0072D3 url(http://www.mie1.net/usr/csstest/title.jpg) left bottom;
　　padding:0px 10px 10px 10px;}

あとは「登録」ボタンを押して確認しましょう。



おー！変わった！　　けど…あれ？
なんか画像が切れてますよね。
これはタイトル画像の部分の高さを指定していないからです。
もう一度、「オリジナルデザインの登録」の画面で「スタイルシート」を開きましょう。
そして画像の高さを指定するおまじないは「height」ですので、そこに先ほど作った画像の高さをピクセルで指定しましょう。
私の場合は、横740ピクセル×縦240ピクセルだったので、「height: 240px;」を指定します。
あと、paddingで余計な隙間が指定してあるので全部ゼロにしましょう。
それと、ぎりぎりいっぱいの画像を使っているので left bottom も消してしまって問題無いです。まあ、これは残して置いても悪さしませんが…

#banner,#subbanner{
　　background:#0072D3 url(http://www.mie1.net/usr/csstest/title.jpg);
　　height: 240px;
　　padding:0px 0px 0px 0px;}

そしてもう一度「登録」ボタンを押して確認しましょう。



上手く出来ましたね＾＾

でも良く見ると画像の白い部分とブログタイトルがかぶって見えにくくなっています。
次はブログタイトルとブログ概要の文字色や表示位置の変更についてやってみたいと思います。

今回あまり深く書かなかった内容で、スタイルシートの「padding、backgroundのleft bottom」がありました。
興味ある人は、このブログの「お気に入り」サイドバーにある「HTMLクイックリファレンス」で調べてみてくださいね。