-- --

枠内色変更+α　[ソネットブログカスタマイズ] [編集]

色を変えるだけでかなり自分色に仕上がります。今日は、枠の色変更についてcss欄に直接説明を入れていきます。
前回までのカスタマイズのまとめはコチラです。

わかりやすいように、派手派手に色をつけました。
カラーコードはコチラなどからお好みの色をチョイスして＃以下6ケタをそのまま書き換えて下さい。

ではcss編集を開き以下を自分好みの色に変更していきます...((((=・o・)ノ ゴーゴー♪
-----------------------------------------------------------------------

@charset "UTF-8";

/*-----Common-----*/
省略

#container {
width :770px;
margin:0 auto;
background:#ffffff（※1）;
border-left:5px solid #ff6600;（①）
border-right:5px solid #0000ff;（②）
border-bottom:5px solid #00cc00;（③）
line-height:1.4;
text-align:left;
color:#333333（※2）;
}

解説 ①。②。③は、一番外枠の部分になります。順に左、右、下の枠線の変更です。通常色をつけるのであれば、同色がいいと思いますが、お好みでｗ 通常、border-left:5pxの5pxが1pxになっています。外枠を太くしたい場合は数字を大きくすると太くなります。 【補足】 ※1箇所のカラーコードを変更すると、枠内に適用されます。 （例；黒） background:#000000; ※2　箇所のカラーコード変更で、全体の文字色が変わります。 （例：背景黒・文字色白） color:#ffffff; まだリンク色の設定をしていないので、リンク箇所だけ灰色のままです。リンク文字色の変更は後日また改めて・・・ 外枠が要らない場合は、①②③の列をまるっと消してしまえば消えます。 背景色を黒（#000000） body { background:#000000; } にして①②③を消した場合 #container { width :770px; margin:0 auto; background:#000000; line-height:1.4; text-align:left; color:#ffffff; } 枠内の背景色部分。 #container { width :770px; margin:0 auto; background:#000000; line-height:1.4; text-align:left; color:#ffffff; } 赤字箇所。コレをまるっと消しさると、枠内の背景がなくなります。柄入りの壁紙だと文字がみにくくなってしまうのでオススメ出来ませんが、壁紙を上に固定していたりする場合は消してもイケルかもです。まぁ参考まで。 次ρ(^-^*)ノ イッテミヨー!

/* Articles */
省略

.articles {
width:498px;
padding: 12px 20px;
margin-bottom:10px;
border:1px solid #ff9933;（④）
overflow:hidden;
}

.articles-title {
margin:0 0 15px 0;
padding-bottom:5px;
border-bottom:1px solid #33ccff;（⑤）
font-size:small;
}

省略

.posted{
padding-top:5px;
border-top:1px dotted #cc00cc;（⑥）
font-size:x-small;
color:#888888;
}
省略

/*-----Entry-----*/
省略

.entry h4 {
margin:0 0 10px 0;
padding:3px 0;
border-bottom:1px solid #0030ce;（⑦）
font-size:small;
}
省略

解説 ここまではいっぺんに説明します。要は記事部分の変更です。 ④⑤⑥は、普段見えてる記事を囲んでる箇所 これを記事内に色をつけたい場合は④部分、 .articles { width:498px; padding: 12px 20px; margin-bottom:10px; border:1px solid #ff9933; overflow:hidden; background:#ffcccc; } にbackground:#ffcccc;を書き足すと↓こんな感じになります。 ⑦のみコメントなどの線の部分になります。 この⑦↓を border-bottom:1px solid #0030ce; 例えば、点線にしたい場合はsolidを dottedに書き換えます。 （例）border-bottom:1px dotted #0030ce; 1pxの数字を大きくすれば点線の目が粗くなります。 （例）border-bottom:3px dotted #0030ce; その他、二重線 border-bottom:3px double #0030ce; など・・・ もちろん、これは①～⑥も適用されるので、記事枠を点線で囲む場合は、④を border:1px dotted #ff9933; のようにsolidをdottedに変更します。 注意：記事枠を囲む場合pｘをの数字を大きくしたり、二重線にしたりすると、右端が切れたりします。。 その場合は、横の長さ（width:498px;）を少し小さめにする事で全部表示されるようになります。 また点線も、あまり数字を大きくすると、Firefoxで見るとただのぶっとい線だっだりするので要注意です。 二重線・点線の他にもまだ種類はあります。コチラなど参考にしてみるといいと思います。 最後、

/*-----Side-----*/

省略

.sidebar-title {
margin:0;
padding:3px 5px;
margin-bottom:5px;
background:#ff9999;（⑧）
font-size:x-small;
}

今回のでかなり自分流ブログになってきたと思います♪


↑画像クリックで拡大表示