本ブログで使っているテーマ Nimbus のカスタマイズ
CSS を調整してカスタマイズ
- ページ幅を広く
/* Wider body */ div.hatena-body { width:93%; /* 幅をちょっと広めに変更 */ margin-left:20px; /* 大きすぎの左マージンを減らす */ }
- 日別のブロックを目立たせる
div.day { padding:5px; /* 余白がなさ過ぎなので拡げる */ background-color:#222; /* 背景食を濃くする */ filter: alpha(opacity=90); /* 透過度を落とす(オプション) */ -moz-opacity:0.90; /* 透過度を落とす(オプション) */ opacity:0.90; /* 透過度を落とす(オプション) */ border-radius: 0.9em; /* 角を丸く */ -moz-border-radius: 0.9em; /* 角を丸く */ -webkit-border-radius: 0.9em; /* 角を丸く */ box-shadow: 0px 0px 20px #777; /* 間接照明効果 */ -moz-box-shadow: 0px 0px 20px #777; /* 間接照明効果 */ -webkit-box-shadow: 0px 0px 20px #777; /* 間接照明効果 */ }
- 次にエントリー毎のタイトルを目立たせる
#days h3, #days h3 + p.sectionheader { background-color: #221; /* ちょっと明るく */ border-style: none solid none solid; /* 上下のボーダーは不要 */ border-color: #f03070 !important; /* ボーダー色はショッキングピンク */ border-width: 10px; /* 左右のボーダーは太め */ } #days h3 { padding: 5px 5px 2px 5px !important; /* 余白調整 */ border-top-left-radius: 0.9em; /* 左上の角を丸くする */ border-top-right-radius: 0.9em; /* 右上の角を丸くする */ border-bottom-right-radius: 0.0em; /* 隣接する右下の角はノーマル */ border-bottom-left-radius: 0.0em; /* 隣接する左下の角もノーマル */ -webkit-border-top-left-radius: 0.9em; /* 左上の角を丸くする */ -webkit-border-top-right-radius: 0.9em; /* 右上の角を丸くする */ -webkit-border-bottom-right-radius: 0.0em; /* 隣接する右下の角はノーマル */ -webkit-border-bottom-left-radius: 0.0em; /* 隣接する左下の角はノーマル */ -moz-border-radius-topleft: 0.9em; /* 左上の角を丸くする */ -moz-border-radius-topright: 0.9em; /* 右上の角を丸くする */ -moz-border-radius-bottomright: 0.0em; /* 隣接する右下の角はノーマル */ -moz-border-radius-bottomleft: 0.0em; /* 隣接する左下の角はノーマル */ box-shadow: 0.0em 0.6em 1.7em #7cf; /* 淡い青で間接照明効果 */ -moz-box-shadow: 0.0em 0.6em 1.7em #7cf; /* 淡い青で間接照明効果 */ -webkit-box-shadow: 0.0em 0.6em 1.7em #7cf; /* 淡い青で間接照明効果 */ text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.9); /* 文字を黒で縁取って引き締め */ } #days h3 + p.sectionheader { text-align: right !important; /* カテゴリーは右寄せ */ padding: 2px 5px 5px 5px !important; /* 余白調節 */ border-top-left-radius: 0.0em; /* 隣接する左上の角はノーマル */ border-top-right-radius: 0.0em; /* 隣接する右上の角はノーマル */ border-bottom-right-radius: 0.9em; /* 右下の角を丸くする */ border-bottom-left-radius: 0.9em; /* 左下の角を丸くする */ -webkit-border-top-left-radius: 0.0em; /* 隣接する左上の角はノーマル */ -webkit-border-top-right-radius: 0.0em; /* 隣接する右上の角はノーマル */ -webkit-border-bottom-right-radius: 0.9em; /* 右下の角を丸くする */ -webkit-border-bottom-left-radius: 0.9em; /* 左下の角を丸くする */ -moz-border-radius-topleft: 0.0em; /* 隣接する左上の角はノーマル */ -moz-border-radius-topright: 0.0em; /* 隣接する右上の角はノーマル */ -moz-border-radius-bottomright: 0.9em; /* 右下の角を丸くする */ -moz-border-radius-bottomleft: 0.9em; /* 左下の角を丸くする */ }
- 小見出しも色を変えとく(h4 は下線を引いて目立たせる)
#days h4 { border-color: #f30; /* オレンジ色で目立たせる */ border-bottom-style: solid; /* 通常の線 */ border-width: 0px 0px 1px 5px; /* 左と下だけ残す */ text-shadow: 0px 0px 10px rgba(255, 255, 0, 0.9); /* ネオン効果 */ } #days h5 { border-left-style:none; /* デフォルトの左のボーダーを消す */ border-bottom-color:#07f; /* ブルーで抑えめに */ border-bottom-style:solid; /* 通常の線 */ border-bottom-width:1px; /* 下線のみ */ text-shadow: 0px 0px 10px rgba(0, 255, 0, 0.9); /* ネオン効果 */ }
以上をやれば、かなりはっきりとした印象になるハズ。個性は大切なのでいろいろ試して欲しい