FC2ブログのタイトル画像を変更する

背景色の指定

まずはスタイルシートで背景色を変更する方法です。このブログは背景色を白にしていますが、背景色は自由に変えられます。背景色を変更するにはbackground-colorという属性に値をセットします。文字色の変更同様カラーコードまたはカラーネームで指定します。

例えば夏をイメージさせるブログを作る場合は水色を利用するとそれらしくなるとおもいませんか？

ex.ページ全体を水色（アクアブルー）に変更する

body{background-color:aqua;}

背景に画像を指定

次はタイトル画像を変更します。dailyをサンプルにする前提で話を進める予定でしたが、このテンプレートはタイトル画像を４枚にわけて表示をしています。元のテンプレートの設定のままで説明するのはややこしくなりそうなんで、タイトルを表示するための設定を作ってみたいと思います。

新たに作る設定は#titleという名前にします。#で始まる設定はidといいます。では改めてタイトル画像を指定する方法ですが、background-imageという属性を使用します。値として画像のおかれているurlを指定します。

たとえば次の画像がhttp://hogehoge.com/title.jpgとします。

ex.タイトル背景に画像を利用する。

#title {background-image:url(http://hogehoge.com/titel.jpg);}

url()の中が実際に画像ファイルが置かれている場所（アドレス）になります。実際に使用する背景画像を先にアップロードしてくださいね。

背景画像の画像の設置方法を指定

先ほどの設定をしたら一度確認してみてください。上下左右に画像が繰り返されているはずです。実は特に指定しない場合、背景画像は縦、横それぞれに繰り返して表示されます。１枚画像なんで固定したいですよね。背景画像の表示方法を指定するにはbackground-repeat属性に値を設定します。

repeat-x

横方向に背景画像を繰り返し表示

repeat-y

縦方向に背景画像を繰り返し表示

no-repeat

繰り返しを行わない（背景画像を固定する）

ここでは画像を固定したいのでnorepeatにします。

ex.タイトルの背景画像を固定して表示する

#title{background-repeat:norepeat;}

背景関連まとめて指定

背景に関する色、画像、画像の表示方法とみてきましたが、これら３つの属性はまとめて指定することもできます。一応背景の色は白色にしておきます。CSSの/*タイトル*/のすぐ下に#titleを追加します。

/* タイトル
------------------------------------------------------------ */
#tittle {
 width: 750px;
 height: 200px;

 background:white url(http://hogehoge.com/title.jpg) no-repeat;

}

HTMLに設定を反映する

tille用の設定を新しくつくったのでHTMLを次のように変更します。

元のソース

<!-- ブログタイトルセット -->
<div id="tit1"> </div>
<div id="tit2"><h1><a href="<%url>"><%blog_name></a></h1></div>
<div id="tit3"><p><%introduction></p></div>
<!-- / ブログタイトルセット -->

変更後

<!-- ブログタイトルセット -->
<div id="title">
<h1><a href="<%url>"><%blog_name></a></h1>
<p><%introduction></p></div>
<!-- / ブログタイトルセット -->

どうでしょう？上手くタイトルは表示されたでしょうか？なお今回の説明はあくまで手順としてまとめたものです。実際にテンプレートを加工を行う際は自己責任でおねがいします。

今回プロカメラマン撮影の無料写真素材・フリー画像素材のリンクスタイルの画像を利用させてもらっています。加工は私が個人として利用する範囲内でさせていただいてます。再配布は認められていません。持ち帰りは禁止ですのでよろしくお願いします。