ブログのフォーマットの変え方。
マウスカーソルの変更は「
カーソル変更」で。
周りの人たちはみんカラのページが最初からある
フォーマットで使っているというのでちょっと変化をと。
まず最初に壁紙やヘッダ・フッタにする画像を保存します。
画像の保存の仕方は３種類あります。
・スタイルシート用画像に保存
・過去のブログに保存
・違うサイトに保存
スタイルシート用画像は８０個まで保存できます。
メニューの「スタイルシート」を選ぶと
カスタマイズ [ 上級者用 ]の所にあります。
保存した画像のＵＲＬ。
過去のブログは保存（ブログにアップ）した後にソースを見て
そこから画像を表示している所の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
があります。それぞれ選んでください。
スタイルシートメニュー
Posted at 2006/05/27 01:58:13 | |
旧・ブログ設定 | その他
がぞうひょうじ？ 
例えば１１月２日など使ってない日付のブログを使用します。
それで保存すると１１月２日のページはＵＰした画像だけが表示されてます。
ソースを全部コピー
ブログ画像タグ取得で画像のサイズを指定してフォーム内にコピーしたソースを貼り付けます。
画像タグを取り出してブログに貼り付けが終ったら１１月２日のブログは削除してください。
