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

| コメント(0) | トラックバック(1)

ブログを魅力的に変更するテンプレートですが、一番大きな要素は背景画像によるものだと思います。テンプレートに頼らず背景画像を自分の好きな風景画像やペットの写真に変更できたら個性的で魅力のあるブログになると思いませんか?

スタイルシートを利用すれば背景の色や画像が簡単に変更できます。一度トライしてみてはどうでしょうか。

背景色の指定

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

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

 

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

body{background-color:aqua;}

 

背景に画像を指定

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

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

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

title.jpg

 

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

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

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

 

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

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

repeat-x

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

repeat-y

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

no-repeat

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

 

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

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

#title{background-repeat:norepeat;}

 

背景関連まとめて指定

背景に関する色、画像、画像の表示方法とみてきましたが、これら3つの属性はまとめて指定することもできます。一応背景の色は白色にしておきます。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>
<!-- / ブログタイトルセット -->

 

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

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

 

 

 

 

 


★記事がお役に立ちましたら応援クリック願います↓
人気ブログランキングへ
にほんブログ村 ブログノウハウ
ブログ王ランキングはこちらをクリック!

BuzzurlにブックマークBuzzurlにブックマーク

関連記事


  1. 無料ブログのカスタマイズ紹介をはじめます
  2. 無料ブログで可能なカスタマイズ
  3. HTMLとスタイルシート(CSS)
  4. FC2ブログのテンプレートをカスタマイズする
  5. スタイルシートで文字サイズを変更する

トラックバック(1)

トラックバックURL: http://tryandbuild.com/mt/mt-tb.cgi/172

こんばんは、かずです。 久しぶりにFC2ブログのカスタマイズ方法に関する記事です... 続きを読む

コメントする

ランキング参加中!

にほんブログ村 ブログブログ ブログノウハウへ







TREview

運用環境





このブログ記事について

このページは、かずが2008年6月11日 00:40に書いたブログ記事です。

ひとつ前のブログ記事は「ブログの記事をたくさんの人に読んでもらう方法」です。

次のブログ記事は「JUGEMとは?」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。