人気ブログランキング | 話題のタグを見る
Top
ご訪問ありがとうございマス!!
ブログちょこちょこ再開予定です。
みなさま、またよろしくお願いします☆

↑デザイン・アート部門
最高記録10位です☆
++最新の記事++
9/14【映画を観る】
NANA
9/14【雑記】
脳みそゲーム
9/13【愛犬と暮らす】
こんなに大きく
9/12【あなたとわたし】
ハッピーサマーウェディング♪
7/9【オンナの愉しみ】
エスニックブーム
7/2【あなたとわたし】
もめごと
6/21【あなたとわたし】
やきもち
6/20【映画を観る】
交渉人 真下正義
6/7【オンナの愉しみ】
10年ぶり
6/5【あなたとわたし】
すきなひと
6/4【あなたとわたし】
ふわふわ
6/1 【デザインとアート】 +others+
かたちあるもの
S M T W T F S
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
Category
【あなたとわたし】
恋愛のコト、友達のコト。

【本を読む】
オススメ度と感想。

【音を楽しむ】
お気に入りのオンガク。

【映画を観る】
観るものは偏りがち。

【ブログ試行錯誤】
初心者なりの
スキンいぢり挑戦談。

【愛犬と暮らす】
わんこの話題。

【デザインとアート】
インテリアとか、
雑貨とか、好きな物。

【オンナの愉しみ】
美容、食べ物とか
ファッションのこととか。

【日々想うこと】
心の整理と日記

【雑記】
どうでもいいこと。
Comment
最新のコメント
cheap cheap
by FywAjata at 00:56
Greetings, ..
by Investblogger at 17:28
Ladies and G..
by Investblogger at 14:14
hypnotherapy..
by elizabeth at 06:22
[url=http://..
by orielmilm at 03:58
penis enlarg..
by hypnothera at 02:51
Recently fr..
by arabic fre at 01:02
[url=http://..
by orielmilm at 22:38
hypnotherapy..
by hypnothera at 14:31
Most downlo..
by boost free at 13:00
その他のジャンル
ファン
記事ランキング
ブログジャンル
画像一覧
Trackback
最新のトラックバック
Link
【動作確認】
Internet Explorer6.0/Netscape7.1
Opera7.53/Firefox 1.0
IE以外ご利用の方で
文字が見にくい方は
表示→文字のサイズなどで
変更してご覧下さい。
お手数をおかけします。
【トラックバックをする際のお願い】
アフィリエイト目的だと判断した
トラバは削除させて頂いております。
トラックバックは大歓迎ですが、
記事の中で紹介・もしくは
コメントがない場合も内容を確かめた上で
削除する場合があります。ご了承下さい。
皆さんネットマナーを守って
楽しくインターネットをしましょうよ(懇願)
++ ルーズリーフスキン ++
スキン編集の応用編第4弾。

内容
++ ルーズリーフスキン ++_b0018207_330752.jpg

 このようなスキンを作ります。
 全体の左右に背景画像を設定します。

良いところ
 シンプル。テキストの色など、好みで変えてください。

注意点
 asamiが制作した素材を提供しますので、
 使用する際はリンクとコメントかトラバをお願いします。

対応ブラウザ
Internet Explorer6.0:○
Netscape7.1:○
Opera7.53:○
Firefox 1.0:○

準備
 素材をご自分のパソコンに保存してください。
 Winなら画像を右クリック→「名前を付けて保存」です。
 そのあと、スキン変更→マイスキン→新しいスキン作成で
 お好きなレイアウトを選びます。(どのレイアウトでも出来ます)
 選んで「次へ」をクリックすると編集画面に移りますので、
 「マイイメージアカウントにイメージ登録」をクリックして先ほど保存した素材を
 アップロードしておいてください。



++続き++


こちらの2つの画像を保存してアップロードしてください。
++ ルーズリーフスキン ++_b0018207_3355136.jpg

++ ルーズリーフスキン ++_b0018207_3361412.jpg


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; }


今回は以上です。背景色は白用のみになってますが、
テキストの色や背景色に凝ってオリジナルスキンにしてください(=´▽`=)
by trickycat | 2004-12-12 04:09 | ブログ試行錯誤 ▲page top▲