こんにちわげだや(@Geda_ya)です。
今回は、はてなブログのサイドバーのタイトルの装飾をするCSSをご紹介します。
現在当ブログのデザインはひつじの雑記帳さんの「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色見本を参考にどうぞ
背景色と影をつける
.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; }
まとめ
色を変えたり、文字の大きさや線の幅など色々変更して自分のブログに合うように編集してみると面白いですね!
CSSの知識がなく、プロフィールのタイトルの装飾を変えようと検索してみても出てこなかった…という意見を頂いたので書いてみました。
また追加で変更できそうな部分があげようと思います。
おしまい!
P.S
はてな記述でシンタックスハイライトを書くのがとてもとても面倒…orz