2006年06月11日

スタイルシートの仕組み@。。

わかりにくかったので

17:00に記事を変更しました


リクエストがあったので
今日は、ロナではなくてスタイルシートの仕組みについて
ちょっと書きますグッド(上向き矢印)るんるん

スタイルシートの編集は、
マイブログ右デザイン右スタイルシート右編集したいテンプレート
の順にクリックしてくと何か暗号みたいなのが出てきて
それを編集することでデザインを変えられますわーい(嬉しい顔)
基本となるテンプレートはどれを使っても一緒なので大丈夫でするんるん

赤色の部分をコピーして自分のテンプレートの同じ場所に貼るか
同じテキストがあればファイル名、色コードを変えるだけで決定です

注意点
1.使いたい画像は先にツールでアップロードしておく
  ファイル名は半角英数にして下さい。

2.使いたい色コードを控えておく(例;黒なら#000000)
   色コード参照;http://alice-wr.wisnet.ne.jp/iroiro.html

3.画像編集ソフトは、おすすめはないです
  いいのがあれば是非教えて下さい。
  ちなみに私は、『JTrim』という無料ソフトを使ってるんですが
  一つ作るのにかなり時間がかかります。。

最重要注意点

編集をした後『スタイルシートを変更する』を押す前に
『プレビュー』で必ず確認して下さいexclamation×2
それで納得したら『スタイルシートを変更する』を押して下さい。
そうしないとあまり気に入ってなくても、
ブログに反映されてしまいますので。。


 一番後ろの背景部分の変更
スタイルシートの中でbodyで始まる場所を探してください(大抵一番上にあります)


body {左 
font-family: Arial, Helvetica, sans-serif;
margin:0px;
padding:0px;
text-align:center;

この後を
1
BACKGROUND-IMAGE: url("自分のブログURL/image/ファイル名.jpg");

うちのブログで言うハートの部分るんるんハート一個を作りリピートしています。私のものでサイズ100x100をリピートしています
背景を一色にする場合は不要。。


例;アップロードしたファイル名が『reidai』の場合
  
body {
font-family: Arial, Helvetica, sans-serif;
margin:0px;
padding:0px;
text-align:center;
BACKGROUND-IMAGE: url("http://rona-rona.a-thera.jp/image/reidai.jpg");
}

にするとこのようになりますぴかぴか(新しい)
  下下下
SSCN0655.JPG

これは下のパターンを自動的にリピートしています。
viton-kan.jpg



2
background-color:カラーコード;


背景の部分を一色にする場合。画像を使う場合は不要。


例;背景をピンク1色にする場合

body {
font-family: Arial, Helvetica, sans-serif;
margin:0px;
padding:0px;
text-align:center;
background-color:#FF3265;
}

にするとこのようになりますぴかぴか(新しい)
  下下下
SSCN0657.JPG


上のどちらかを入れてみて下さいひらめき
2はすごく簡単ですよ。

以下は好みによって1or2の後に追加して下さい。

background-attachment: fixed;
背景のみ固定(うちのブログ見てください。背景動かないでしょ??)


background-position:50% 0%;
背景の寄り
背景の位置0%0%で左上寄せ、100%100%で右下寄せ
上の物は上のセンター寄せです



なお、必ず『body {』から次の『}』
の間に入れてくださいGood


どうですか?出来ましたでしょうか?
わからない方や
他にもこんな事をしたいけどわからないって事があれば
何でも質問して下さいねわーい(嬉しい顔)
わかる範囲でお答えしまするんるん

残りの編集部分も随時記事にしていきまするんるん

ニックネーム ロナ at 12:16| Comment(4) | TrackBack(1) | スタイルシート | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
す〜ごいですね。
私はもっと、低〜〜いレベルで解らないのです(^-^;滝汗
また、色々教えてください。けど、今は何を質問して良いのかわかりません・・・
先生
(^-^;
Posted by れもんのママ at 2006年06月11日 22:23
チココさんすごいです〜(^^♪
記事にして頂いてありがとう〜
よ〜く読んで1つずつ進んで行けば
私にもできるのかしら??
がんばればこんなにかわいいスタイルシートになるなら
頑張ってみようと思います♪
また〜いろいろ教えてくださいね(o^▽^)o
Posted by mami at 2006年06月12日 00:51
れもんのママさん

確かに自分で背景を作るのは
難しいです。。
でも背景の色を変えたりするのは
思っている以上に簡単です♪
ちなみにアレンジしてるのは、
全部シンちゃんなんですけど
このブログ始めてからちょっと勉強しただけですよ。。

もっとわかりやすく書けるように努力させますね☆
先生はやめて下さい(笑)
すべて自己流なんで
たぶん詳しい人が見たら笑われるような内容です。。
Posted by チココ at 2006年06月12日 17:45
mamiさん

実は、アレンジは全部シンちゃんがしております。。ですから、私も日記を書く以外全然わかりません。。
でも、試しにやらされたんですけど
1つずつやっていけば出来ました。
特に背景固定は、今のスタイルシートにコピーして追加するだけでなのでとっても簡単でおススメです♪

是非頑張ってみて下さいね♪
Posted by チココ at 2006年06月12日 17:53
この記事へのトラックバックURL
http://a-thera.com/tb/334068

この記事へのトラックバック

PaintShopPro Xでタイトル画像作成:【ホームページ作成ビギナーズガイド】
Excerpt: 今日は、ホームページ作成ではなく、他のブログのカスタマイズですが、タイトル画像を作成していました。 ソフトは、以前に買った、PaintShopPro Xを使いました。 PaintShopP..
Weblog: ホームページ作成ビギナーズガイド:HPつくろうよ
Tracked: 2006-06-15 12:42