【コピペOK】はてなブログサイドバーのタイトルを装飾するCSS

こんにちわげだや(@Geda_ya)です。

今回は、はてなブログのサイドバーのタイトルの装飾をするCSSをご紹介します。

hitsuzi.hatenablog.com

~~現在当ブログのデザインは~~ひつじの雑記帳さんの「Minimalism」を使わせて頂いております。

とてもシンプルできれいなデザインなのですがちょっとカスタマイズしたいと思います！

カスタマイズ方法
まとめ

カスタマイズ方法

コードは入れる場所はいつものところ

はてなブログのダッシュボード→デザイン→カスタマイズ→デザインCSS

今回紹介するCSSコードは「.hatena-module-title」を装飾するように書いています。

ちなみにサイドバーのタイトルとはココ！

この画像で言うと「プロフィール」と「注目記事」のところです。

カスタマイズ一覧

ちょっとコードを追加するだけで味気ないあなたのブログを華やかにしましょう！

背景色をつける

.hatena-module-title {
　font-weight: bold;
font-size: 20px;
padding: 15px 10px;
background-color: #eee;
}

background-colorの値を変えると背景色を変えることが出来ます。

例えば背景色を黒にしたい場合は

背景を黒にする

.hatena-module-title {
  color: #fff;
　font-weight: bold;
font-size: 20px;
padding: 15px 10px;
background-color: #000;
}

background-colorを黒(#000)に変えてあげて、文字の色が黒だと見えないのでcolorで文字色を白(#fff)に変えてあげます。

カラーコードはWeb色見本を参考にどうぞ

www.colordic.org

背景色と影をつける

.hatena-module-title {
　font-weight: bold;
font-size: 20px;
padding: 15px 10px;
background-color: #eee;
border-bottom: 4px solid #ccc;
box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}

応用版です。

ちなみに当ブログのサイドバーはこちらを使用しています。

緑大好き

.hatena-module-title{
　font-weight: bold;
font-size: 20px;
padding: 15px 10px;
color: #fff;
background-color: #5ED38F;
border-bottom: 4px solid #aaa;
}

背景を角丸に

.hatena-module-title{
　font-weight: bold;
font-size: 20px;
padding: 15px 10px;
background-color: #ddd;
border-radius: 15px;
}

下線を引く

.hatena-module-title{
　font-weight: bold;
font-size: 20px;
padding: 10px 10px;
position: relative;
padding-bottom: .5em;
border-bottom: 4px solid #ccc;
}

背景色と上部に線を引く

.hatena-module-title{
　font-weight: bold;
font-size: 20px;
padding: .75em 1em;
border: 1px solid #ccc;
border-top: 3px solid #5ED38F;
background: -webkit-linear-gradient(top, #fff 0%, #f0f0f0 100%);
background: linear-gradient(to bottom, #fff 0%, #f0f0f0 100%);
box-shadow: 0 -1px 0 rgba(255, 255, 255, 1) inset;
}