webでお絵かき

アクセスカウンタ

zoom RSS ■ウェブリブログのカスタマイズ C公開実験補足

<<   作成日時 : 2005/03/10 07:13   >>

ブログ気持玉 0 / トラックバック 0 / コメント 2

以前、「 ■ウェブリブログのカスタマイズ B公開実験中・・・」という記事を書いたことがあるのですが、
そのまま、ほったらかしにしておくのも不親切かな〜と思ったので、
部分的に抜粋して、わかる範囲で補足説明してみようかと。

・・・なんて無謀な企画でしょう☆
むずかしーコト、理解している方は、ちゃんとした解説のあるところを
捜してくださいねm(_ _;)m
基本的なことはウェブリブログ事務局のFAQでわかると思うけどね☆

ちょっと長くなるので、がんばってスクロールしてね♪
(私は長い文章とか、スクロールがキライ・・・)

/*----------------------------------------------*/
/* 共通スタイル */
/* (トップ、月別、テーマ別、記事ページ共通) */
/*----------------------------------------------*/
body{
background-color:#ffe2e2;
background-image:url("http://画像のURL");←背景画像はここで設定します。
ホームページスペースがある方は、画像をアップして、そのURLを入れます。

}

/* コンテナ(広告・フッタを除くメイン領域) */
#container{
background:#ffe2e2;
background-image:url("http://画像のURL");←これも、上と同じ。メイン(記事本体の壁紙ね)の領域指定です。
font-size:small;
border:1px solid #fff;
}
/* カウンタ領域 */
#counter{
background:#ffe2e2;
background-image:url("http://画像のURL");←カウンターを表示する場合、
画像を置いておくと、その上に数字が乗ります。
このブログだと、ピンクのグラデーションバーになっています。

font-size:small;
border:1px solid #fff;
text-align:right;
}

(文字数制限により、設定してない部分、途中省略)

/*----------------------------------------------*/
/* トップ、月別、テーマ別ページ */
/*----------------------------------------------*/

/*---------------- タイトル(大) ----------------*/
#banner{
/* 包含要素を相対位置指定できるようにします */
background:url("http://画像のURL") no-repeat;←タイトルロゴを
自分で作った場合はここで設定します。

height:137px;
position:relative;
}

/* タイトル領域内のアンカー */
#banner a{
}

/* タイトルテキスト */
#banner h1{
/* タイトル領域内での位置を指定します */
position:absolute;
top:88px;
left:150px;
font-size:xx-large;
font-family:HG創英角ポップ体;
}←タイトルテキストの設定です。
このブログはタイトル画像を文字入りで作っちゃったので、
二重表示されたりしてます(^_^;)
HG創英角ポップ体を愛しているので、わたしはこれで設定。


/* ログインボタン */
#banner #login{
/* タイトル領域内での位置を指定します */
position:absolute;
bottom:5px;
right:5px;
}

/*---------------- プロフィール ----------------*/
#profile{
background-color:#ffcece;
}←プロフィール欄の色を設定してあります。
もちろん、上と同じように背景画像設定もできます。


/* ラベル(「ブログ名」「自己紹介」) */
#profile dt{
}

/* プロフィールテキスト */
#profile dd{
}

/*------------------ 新着記事 ------------------*/
#contents{
}

/* 見出し */
#contents #postlist h2{
background-color:#ffe2e2;←見出し部分の背景色設定。
全体のバランスをみて、くどくならないようにした方がいいかも。

}

/* 一覧ヘッダセル */
#contents #postlist th{
}

/* 一覧データセル */
#contents #postlist td{
}

/* 一覧概要表示 */
#contents #postlist blockquote{
background-color:#ffffe8;←一覧概要ボックスの背景色設定。
}

/* 月別リンク項目 */
#contents #archives li{
}

/*-------------- コンポーネント群 --------------*/
(文字数制限により、設定してない部分、途中省略)

/* ●カレンダー */
#utilities #calendar{
background-color:#ffffdd;
}←カレンダー部分の背景色設定をしてあります。

/* 年月 */
#utilities #calendar table caption{
}

/* 曜日 */
#utilities #calendar th{
}

/* ●テーマカテゴリ */
#utilities #categories{
background-color:#ffffdd;
}←テーマカテゴリの背景色設定。

(文字数制限により、設定してない部分、途中省略)

/*----------------------------------------------*/
/* 記事ページ */
/*----------------------------------------------*/

/*---------------- タイトル(小) ----------------*/
#subbanner{
/* 包含要素を相対位置指定できるようにします */
background:url("http://画像のURL") no-repeat;←ここは、記事本体のタイトル画像設定。
このブログはトップも記事本体も同じうさぎさんの画像を使っていますが、
実は変えられるのでした☆

height:137px;
position:relative;
}
/* タイトル領域内のアンカー */
#subbanner a{
}

/* タイトルテキスト */
#subbanner h1{
/* タイトル領域内での位置を指定します */
position:absolute;
top:88px;
left:150px;
font-size:xx-large;
font-family:HG創英角ポップ体;
}←この辺はトップのタイトルテキストと同じ。
記事本体とトップページが分けられる・・・と。

/* ログインアンカー */
#subbanner #login{
/* タイトル領域内での位置を指定します */
position:absolute;
bottom:5px;
right:5px;
}

(文字数制限により、設定してない部分、途中省略)

/*----------------- 記事ヘッダ -----------------*/

(文字数制限により、設定してない部分、途中省略)

/*------------------ 記事本体 ------------------*/

(文字数制限により、設定してない部分、途中省略)

/*----------------- 記事フッタ -----------------*/
#blog-foot{
background-color:#ffffdd;
}

/* 関連テーマ */
#blog-foot #theme{
}

/* 関連テーマ見出し */
#blog-foot #theme h2{
}

/* テーマレーダボタン */
#blog-foot #theme #rader{
background:url("http://画像のURL") no-repeat;
}←テーマレーダーの画像を
独自に作った場合はここで設定。
ちなみにサイズは70x60。
私はサイズを間違えて作ってしまったので、端が切れてます。ううう・・・。


/*-------- トラックバック、コメント領域 --------*/
#blog #trackback,
#blog #comment{
background-color:#ffffff;←トラックバック、
コメント領域のボックス外背景色設定。

}

/* 見出し */
#blog #trackback h2,{
font-size:large;
}
#blog #comment h2{
font-size:large;
}

(文字数制限により、設定してない部分、途中省略)

/* フォーム フィールド */
#blog input.txt,
#blog textarea{
background-image:url("http://画像のURL");←トラックバック、コメント領域の
背景画像も設定できるそ、と。


}
(文字数制限により、設定してない部分、以下省略)


私がこのブログで設定しているのは、このくらいです。
あんまりキチキチに設定してると、テンプレートで遊べなくなるので。
ここまでだと、アイコンとかがテンプレートによって変わるのよねー。
暇を見つけては、いじくり回しているのだけどね☆^☆^☆^〜

もっと楽しいカスタマイズ方法がありましたら、是非、教えてくださいね。

★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆

よかったらこちらにもどうぞ♪
オリジナルイラストサイト【柴成館】

★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆


Click Here!

ロリポップ広告

★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆

スタイルシート・ステップアップ・アレンジブック―基本とそのバリエーションでマスターするCSS活用術
スタイルシート・ステップアップ・アレンジブック―基本とそのバリエーションでマスターするCSS活用術

テーマ

関連テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ

トラックバック(0件)

タイトル (本文) ブログ名/日時

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(2件)

内 容 ニックネーム/日時
CSS編集のことを調べていてここに辿り着きました。
お気に入りに追加したほど、ものすごい分かりやすく解説しており、ホントに助かりました!
ありがとうございます。
おじい
2005/07/30 22:15
おじい様、いらっしゃいませ。
cssは結構ややこしいし、
設定する人の癖も出やすいので大変です。
出来るだけわかりやすく説明してますが、
ウェブリブログも日々変化していますので、
色々変わっている部分があります。
今現在のテンプレートの中には、
下手に設定するとレイアウトが崩れてしまう物もあり、
どっちにしても結局あとは、
自分で勉強するしかなくなるんですね〜(^.^;)
とりあえず、申し訳ありませんが、
【自己責任でお願いします】m(_ _;)m
柴成
2005/07/31 12:09

コメントする help

ニックネーム
本 文
■ウェブリブログのカスタマイズ C公開実験補足 webでお絵かき/BIGLOBEウェブリブログ
文字サイズ:       閉じる