スキン編集の応用編第4弾。
内容
このようなスキンを作ります。
全体の左右に背景画像を設定します。
良いところ
シンプル。テキストの色など、好みで変えてください。
注意点
asamiが制作した素材を提供しますので、
使用する際はリンクとコメントかトラバをお願いします。
対応ブラウザ
Internet Explorer6.0:○
Netscape7.1:○
Opera7.53:○
Firefox 1.0:○
準備
素材をご自分のパソコンに保存してください。
Winなら画像を右クリック→「名前を付けて保存」です。
そのあと、スキン変更→マイスキン→新しいスキン作成で
お好きなレイアウトを選びます。(どのレイアウトでも出来ます)
選んで「次へ」をクリックすると編集画面に移りますので、
「マイイメージアカウントにイメージ登録」をクリックして先ほど保存した素材を
アップロードしておいてください。
++続き++
こちらの2つの画像を保存してアップロードしてください。
bodyの属性として、左に来る(穴が空いているような)画像を背景画像として設定し、
さらに本文全体を<div>タグで囲み、その属性として右にくる画像を背景画像として設定します。
まず、全体を<div>タグで囲んで、クラスを定義することから始めます。
HTML編集→メイン画面
/*一番上の<center>と一番下の</center>の間に
<div>タグを挿入して下さい*/
<center>
<div class="任意のクラス名">
<table boder="0" cellpadding="0" cellspacing="0"
align="center" width="700">
/*中略*/
</table>
</div>
</center>
次に、bodyの背景画像として左側に来る画像を設定し、
縦に繰り返すという指定をします。
CSS編集
body
{ background :
url(左側に来る画像のURL) repeat-y left
#FFFFFF;
margin : 0px;padding : 0px; }
repeat-yというのは、Y軸(縦)方向に繰り返すという指定で、
leftは位置(この場合左寄せ)を指定しています。
それでは、先ほどの<div>タグのクラスを定義します。
CSS編集
div.任意のクラス名
{ background :url(右側に来る画像のURL) repeat-y right; }
以上で、左右に画像が現れるようになります(=´▽`=)
ちなみに最初のサンプル画面のように、ブログタイトルのしたに青い線を入れて
ルーズリーフっぽさを出したい方は、以下の手順を参考にしてください。
CSS編集
div.HEADER
{ font : bold large/100% Courier New,TAHOMA;
width :任意の数値;
/*このwidthはdivのボックスの横幅なので、
下の枠線の長さに反映されます。*/
border-bottom :2px solid #9999FF;
padding-bottom :任意の数値;
/*この数値はテキストと下の枠線までの余白になります。*/
margin-top : 30px; }
今回は以上です。背景色は白用のみになってますが、
テキストの色や背景色に凝ってオリジナルスキンにしてください(=´▽`=)