2007年06月26日

ちょちょいのカスタマイズ

今日は英語で電車の乗り換えを聞かれて四苦八苦でした！
なんとか通じてよかったよかった！

- - -

サクっとブログをカスタマイズしたいというご要望をいただきましたので
今日は既存テンプレートを利用して手軽にデザインを変更する方法を書いてみます。
説明下手ですみません。わかりにくいところがありましたら、こっそり教えてください…。

* * *

今回は｢わんこの背中｣テンプレートをカスタマイズしていきます。
用意するものは【お好みのヘッダー画像】のみ！

こんなかんじで変えていきます。

↓

サンプルブログ

blogの横幅が800pxなので、1枚画像をがつんと使いたい場合は横幅800px以上のものを用意してください。また、画像の上部25pxは上の白い帯(トラブログのロゴがある部分)に隠れてしまうのでご注意ください！

画像の準備ができたら管理画面の｢ファイル管理｣からアップロードしてください。
ページ下の｢ファイル一覧｣に情報がでたら、画像のタイトルをクリックすると画像とURLが確認できます。(このURLは次の手順で使用します。)

サンプルで用意したヘッダー画像(800×320px)はこちら。

* * *

次はスタイルシートを編集していきます。

まずは｢わんこの背中｣テンプレートに変更してください。
その後、管理画面｢デザイン管理｣→｢わんこの背中｣の欄にある｢編集｣(メモ帳アイコン)を押します。
ここから｢スタイルシートソース｣を変更していきます。
(編集する箇所が多い場合はバックアップをとりながら進めてください。)

変更するのは
1.ページの背景色→灰色にする
2.コンテンツ部分の背景色→白にする
3.ヘッダー画像を変える
です！

スタイルシートソースから下記の記述を探してください。いずれも上の方にあります。

1.
-------------------------
body{
font-size:80%;
color:#4D0000;
font-family:"ＭＳＰゴシック", Osaka, sans-serif;
background:url("http://www.torablog.net/design/animal_back02/images/bg_body.gif") repeat-y top center #F8F3ED;
}
-------------------------

2.
-------------------------
div.all_contents{
width:800px;
margin-left:auto;
margin-right:auto;
}
-------------------------

3.
-------------------------
.main_title{
height:295px;
padding:0 22px 0 22px;
text-align:right;
margin-bottom:15px;
background:url("http://www.torablog.net/design/animal_back02/images/bg_maintitle.jpg") no-repeat left bottom #FFFFFF;
}
-------------------------

■今回はスタイルシートの詳しい説明を省略しますが、それぞれ次のように変更してみてください。

1.
-------------------------
body{
font-size:80%;
color:#4D0000;
font-family:"ＭＳＰゴシック", Osaka, sans-serif;
background: #999999;
}
-------------------------

2.
-------------------------
div.all_contents{
width:800px;
margin-left:auto;
margin-right:auto;
background: #FFFFFF;
}
-------------------------

3.
-------------------------
.main_title{
height:295px;
padding:0 22px 0 22px;
text-align:right;
margin-bottom:15px;
background:url("アップロードした画像のURL") no-repeat left bottom #FFFFFF;
}
-------------------------

この変更ができたら、ページ下部｢すぐにスタイルシートの再構築を行う。｣にチェックを入れて、｢更新する｣ボタンを押して出来上がり！
3カラムデザインを使用されていた場合サイドバーがズレるので、ブログの再構築→｢すべて｣を行ってください。

【補足】
background　の　#～は背景色　no-repeatは繰り返し表示させない設定　left bottomは画像の表示位置です。
.main_title　の　height:295px;　はヘッダー画像を入れた部分の高さの設定なので
このあたりをカスタマイズすると、また違う雰囲気になるかと思います。

* * *

長くなってしまいましたが、お付き合いいただきありがとうございました！

よし！寝ます！
ではまた！

sue 00:47 | コメント(3) | トラックバック(0) | カスタマイズ

トラックバック

こちらの記事へのトラックバックは下のURLをコピーして行ってください。