test
質問が多いので、少しだけCSS編集の仕方（基本編？）を明記しておきます。
ココに書いた分を変更するだけでもオリジナルなページになりますよ(^ー^)b
■スクロールバーをオシャレに変身！？
下記の文字を追加すると好きなスクロールバーに変更すること出来ます♪
どの場所に追加するのが正しいのか知らないのですが、とりあえず私は↓下の部分に追加しました。
/* --------------------- font-information --------------------- */
html, body {
scrollbar-arrow-color: #FF9999; /*矢印の色*/
scrollbar-track-color: #FFE4E1; /*トラックの色*/
scrollbar-face-color: #FFFFFF; /*表面全体の色*/
scrollbar-shadow-color: #FFFFFF; /*右端・下端の明るい色*/
scrollbar-darkshadow-color: #FF9999; /*右端・下端の暗い色*/
scrollbar-highlight-color: #FF9999; /*スライド部分の色*/
scrollbar-3dlight-color: #FFFFFF; /*上端・左端の色*/
}
↑このスクロールバーは、私が前回設定していたピンク色基調のままになっていますので、赤字部分をご自分の好きな色に変更して下さいネ！
私は、こちらのカラーサンプル
をいつも参考にしてます♪
色の後に説明つきですが、そのままコピー＆ベーストＯＫです☆⌒(*^-゜)b
後でまた変更したいとき用に残しておくと便利ですし＾＾
ちなみに、たみきさん のブログで紹介されていた、スクロールバー専門街 は必見かも♪
■背景の壁紙指定＆トップのイラストを変更する
/* ---------------- background-color-control ---------------- */
body{
background-image:url(http://～となっているココに壁紙にしたいURLを入力);
background-attachment: fixed;
}
#frame {
background-color: #FFFFFF; /*←トップ部分の背景色変更はココ*/
}
#subFrame {
}
#header {
background-image: url(http://～のココにトップに入れたい画像のURLを入力);
background-repeat: no-repeat; /*←画像のくり返し表示をno-で禁止しています。繰返し表示したい場合は、no-を消してください*/
background-position: center left; /*←画像の位置を指定。左はleft・中央はleft部分消す・右はright*/
}
#wrap {
background-color: #FFFFFF; /*←サイドバー部分の背景色変更はココ*/
}
#main {
background-color: #FFFFFF; /*←記事部分の背景色変更はココ*/
}
#sub_main{
}
#firstContentsArea {
}
#subFirstContentsArea {
}
/* ------------------- menu_element_basis ------------------- */
■画像表示の応用編
background-repeat: no-repeat; ← 画像を繰り返さない場合
background-repeat: repeat; ← 全面に繰返し表示する
background-repeat: repeat-ｙ; ← 縦に繰返しする
background-repeat: repeat-x; ← 横に繰返しする
■リンク色を変更する。（かなり雰囲気変わりますよｗ）
/* ----------------------- common ----------------------- */
─ 上文省略しています。変更するのは下の部分のみなので。 ─
img {
border: 0;
}
a {
color: #FF0000; /*←リンク色の変更はココ*/a
}
a:link {text-decoration: none}
a:visited {text-decoration: none}
a:hover {text-decoration: underline}
input,textarea{font-size:12px}
ul,ol,dl,li,dt,dd{
list-style-type:none;
}
/* ----------------------- header ----------------------- */
※リンク部分をもっとオシャレにするワザは、こちらで詳しく紹介中♪
■文字の色や大きさを変更する
/* --------------------- font-information --------------------- */
body {
color: #999999; /*←記事本文の色変更はココ*/
font-size: 11px;
}
#header h1 {
font-size: 25px; /*←ブログ名の大きさ変更はココ（数字が大きいほど文字は大きい）*/
line-height: 200%;
}
#header h1 a {
color: #666666; /*←ブログ名の色変更はココ*/
}
#header h2 {
color: #909090; /*←サブタイトルの色変更はココ*/
font-size: 11px; /*←サブタイトルの大きさ変更はココ（数字が大きいほど文字は大きい）*/
font-weight: normal;
}
.menu_title {
font-size:12px;
font-weight: bold;
}
.mainMenu {
color: #999999; /*←サイドバーの文字色変更はココ*/
font-size: 10px; /*←サイドバー文字の大きさ変更はココ*/
line-height: 130%;
}
#reader dd {
}
#calendar table {
─ 以下の文字省略＾＾； ─
/* ----------------- background-color-control ----------------- */
■ブログタイトルの位置変更など
/* ----------------------- header ----------------------- */
#header{
display: block;
width: 800px; /*←ブログ名のあるトップ部分の幅を調節できます*/
height: 170px; /*←ブログ名のあるトップ部分の高さを調節できます*/
padding-bottom: 5px;
}
#header h1 {
margin-bottom: 10px;
padding-right: 26px;
padding-top: 38px;
text-align: right; /*←ブログ名の位置を調節できます（右はright・中央はcenter・左はleft）*/
}
#header h2{
padding-right: 26px;
text-align: right; /*←サブタイトルの位置を調節できます（右はright・中央はcenter・左はleft）*/
}
/* ----------------------- footArea ----------------------- */
※色の変更はカラーサンプル を参考にどうぞ♪
※スキンによって表示が異なるかと思いますので、これは鳥の一例です。
