すたいるしーと？

ブログのフォーマットの変え方。

マウスカーソルの変更は「カーソル変更」で。




周りの人たちはみんカラのページが最初からある
フォーマットで使っているというのでちょっと変化をと。





まず最初に壁紙やヘッダ・フッタにする画像を保存します。
画像の保存の仕方は３種類あります。
・スタイルシート用画像に保存
・過去のブログに保存
・違うサイトに保存


スタイルシート用画像は８０個まで保存できます。
メニューの「スタイルシート」を選ぶと
カスタマイズ [ 上級者用 ]の所にあります。







保存した画像のＵＲＬ。




過去のブログは保存（ブログにアップ）した後にソースを見て
そこから画像を表示している所のIMGタグからURLを取り出します。
<img src="http://carview.r3h.net/～ .jpg"> の所。
ただし、gif動画などは静止画像になってしまいます。
URLを取り出したらブログを編集して画像を削除しておきましょう。

違うサイトからは直リンクになるのでやめましょう。


それではスタイルシートのカスタマイズ[ 上級者用 ]の
カスタマイズ１を選んでスタイル編集を選びます。



まず好みの設定を選びます。
ブルー、ピンク、ブラック、藍鼠、滅紫、ココア、抹茶
のどれか選んで「読み込み」を押します。
水は変更が面倒なのでパス。

---

・壁紙の変え方

body の中に１行追加します。

body
{
background: url(http://carview.r3h.net/～.jpg) fixed no-repeat;
}

最後のカッコ } のすぐ上に入れてください。
そうすれば最初から設定されてる背景を無視します。

http://carview.r3h.net/～.jpg は保存した画像のURLを入れてください。

fixed は背景を固定します。
固定しない場合は消しちゃいましょう。
no-repeat は画像１枚だけ表示です。
ここのページの猫の足跡みたいなのをたくさん出したい場合は
repeat に変更してください。

画像を１枚だけ表示の場合、
background-position: center center;
を追加すると壁紙の位置を設定できます。
background-position: 横位置 縦位置;
です。
横位置・・・left　right　center
縦位置・・・top　bottom　center

数字でもできます。
background-position: 50% 50%;

---

・一番上のタイトル画像の表示の仕方（ヘッダー）

#Header の中に４行追加します。

#Header
{
padding: 80,0,0,40;
width: 773px;
height: 215px;
background: url(http://carview.r3h.net/～.jpg) no-repeat;
}

壁紙と同じく最後のカッコ } のすぐ上に入れてください。

padding: 80,0,0,40; はタイトルの表示位置です。
80 が縦の位置、40 が横の位置。数字を変えて調整してください。
width: 773px; は表示する画像の横のサイズ。
ページの横サイズが 750 ですので合わせたい場合は 750 に。
height: 215px; は表示する画像の縦のサイズ。
http://carview.r3h.net/～.jpg は表示したい画像のURL。

タイトルテキスト、例えば「ひっそりと・・・」の文字サイズを変える場合。

.BlogTitle
{
font-weight: bold;
font-size: 20px;
}

font-weight: bold; は文字の太さ。
他に
nomal　lighter　bolder　100　200　300　400　500　600　700　800　900
があります。
font-size: 20px; は文字の大きさ。20px の数字を変えてください。
0px にすると文字が小さくなってほとんど見えなくなります。
画像にタイトルが入ってる場合に有効です。

　を　.BlogTitle　の中に入れるとタイトルを完璧に消せます。

.BlogTitle
{

}

---

・一番下に画像を表示の仕方（フッター）

#Footer の中に３行追加します。

#Footer
{
width: 770px;
height: 190px;
background: url(http://carview.r3h.net/～.jpg) no-repeat;
}

壁紙と同じく最後のカッコ } のすぐ上に入れてください。

設定はタイトル画像の表示の仕方と同じです。

---

・文字色の変更の仕方

文字の色の変更の仕方は body の中にある color を変えてください。
プロフィールなどの色が変わります。

body{
color: #303030;
}

無い場合は追加してください。
ブログの文字色を変更する場合は .BlogText の中にある color を変えてください。

.BlogText
{
color: #000000;
}

メインタイトルの文字色を変更する場合は

/*ヘッダーリンク*/
#Header a{color: blue;text-decoration: none;}
#Header a:link{color: blue; text-decoration: none;}
#Header a:visited{color: blue; text-decoration: none;}
#Header a:active{}
#Header a:hover{color: aqua; text-decoration: none;}

の所です。
#Header a　　　　　がタイトルの普通の色。
#Header a:link　　 がタイトルの普通の色。
#Header a:visited　がすでに見たタイトルの色。
#Header a:active　 がタイトルをクリックした時のタイトルの色。
#Header a:hover　　がタイトルの上にカーソルが乗った時のタイトルの色。

基本的にタイトルの色は
#Header a:　と　#Header a:link　と　#Header a:visited　の色は同じにします。

色はカラー１、カラー２で参考にしてください。

※カラー１はWindowsとMacintoshの共通の２１６色です。

例)
color: blue;
または、
color: #0000ff;

タイトルの消し方は #Header a に を追加します。

例）
#Header a{ color: blue;text-decoration: none;}

---

・枠の表示の仕方

注）2008.12.4 の「ユーザーページヘッダー変更」の為に
表示できなくなりました。


ページ全体に枠を表示することができます。

←これが枠です。

表示する場合は
border-width: 15px;
border-color: lightskyblue;
border-style: ridge;
を body の中に追加してください。

body
{
border-width: 15px;
border-color: lightskyblue;
border-style: ridge;
}

15px は枠の太さ。
lightskyblue は枠の色。#87cefa でもいいです。
色はカラー１、カラー２で参考にしてください。

※カラー１はWindowsとMacintoshの共通の２１６色です。

ridge は枠の形式。影が付いたように見えます。
他に
dotted　dashed　solid　groove　double　inset　outset
があります。それぞれ選んでください。


スタイルシートメニュー