digital 千里眼 @abp_jp

アナログな日常とデジタルの接点

本ブログで使っているテーマ Nimbus のカスタマイズ

Nimbusの残念なところ

  1. フラット過ぎてボーダーがあいまい
  2. エントリー・タイトルの強調が足りない
  3. デフォルトの幅が狭い


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); /* ネオン効果 */
}

以上をやれば、かなりはっきりとした印象になるハズ。個性は大切なのでいろいろ試して欲しい