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

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

 

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

hitsuzi.hatenablog.com

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

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

 

カスタマイズ方法

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

f:id:FumiwA:20171011233222p:plain

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

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

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

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

f:id:FumiwA:20171012011032p:plain

カスタマイズ一覧

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

背景色をつける

.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;
}

まとめ

色を変えたり、文字の大きさや線の幅など色々変更して自分のブログに合うように編集してみると面白いですね!

CSSの知識がなく、プロフィールのタイトルの装飾を変えようと検索してみても出てこなかった…という意見を頂いたので書いてみました。

また追加で変更できそうな部分があげようと思います。

おしまい!

P.S

はてな記述でシンタックスハイライトを書くのがとてもとても面倒…orz

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です