読者です 読者をやめる 読者になる 読者になる

東京しなやか手帖

ティータイムをこよなく愛している20代女子のブログ。好奇心旺盛なわたしのスキルアップの毎日をお届け。

はてなブログの見出しを可愛いくカスタマイズ!コピペで簡単!

 

先日、ブログをカスタマイズしたときに見出しも変えました。

 

検索しまくっても使いたいと思う可愛い♡見出しがなかったので、色々なサイト様を参考にさせていただき、自作してみました!

 

わたしが作ったデザインのCSSをおいておきますね。
ちなみにこのデザインです!

f:id:happysinoppy:20160805151035j:plain

 

貼り付ける場所

 

 【貼り付ける場所 PC】

デザイン⇒カスタマイズ⇒デザインCSS

デザインCSSの一番下に、ペタっと張り付ければOK

 

  【貼り付ける場所 スマホ(proに加入してる人のみ)】

スマートフォン⇒ヘッダ⇒タイトル下

 

<style type="text/css">

この間に貼り付ける

</style>

 

 

CSS

こちらのコードをコピーして使ってください。

 

.entry-content h3{
padding: .5em .75em;
background: -webkit-repeating-linear-gradient(45deg, #FFF0F5, #FFF0F5 2px, #ffffff 2px, #ffffff 4px);
background: repeating-linear-gradient(45deg, #FFF0F5 , #FFF0F5 2px, #ffffff 2px, #ffffff 4px);
color: #000;
border-top: 1px solid #fa8072;
border-bottom: 1px solid #fa8072;
}

 

 

色を変えたい場合

.entry-content h3{
padding: .5em .75em;
background: -webkit-repeating-linear-gradient(45deg, #FFF0F5, #FFF0F5 2px, #ffffff 2px, #ffffff 4px);
background: repeating-linear-gradient(45deg, #FFF0F5 , #FFF0F5 2px, #ffffff 2px, #ffffff 4px);
color: #000;
border-top: 1px solid #fa8072;
border-bottom: 1px solid #fa8072;
}

 

上記の下線の太い部分を好きな色に変えてください。

 
色はこのサイトを参考にしたらいいんじゃないかな。

www.colordic.org

 

 

背景の斜線の角度を変えたい場合

.entry-content h3{
padding: .5em .75em;
background: -webkit-repeating-linear-gradient(45deg, #FFF0F5, #FFF0F5 2px, #ffffff 2px, #ffffff 4px);
background: repeating-linear-gradient(45deg, #FFF0F5 , #FFF0F5 2px, #ffffff 2px, #ffffff 4px);
color: #000;
border-top: 1px solid #fa8072;
border-bottom: 1px solid #fa8072;
}


上記の太字の数値の部分を、小さくすると急な斜線になります。
でも私は45°が可愛いとおもふ。

 

 

斜線の太さを変えたい場合

.entry-content h3{
padding: .5em .75em;
background: -webkit-repeating-linear-gradient(45deg, #FFF0F5, #FFF0F5 2px, #ffffff 2px, #ffffff 4px);
background: repeating-linear-gradient(45deg, #FFF0F5 , #FFF0F5 2px, #ffffff 2px, #ffffff 4px);
color: #000;
border-top: 1px solid #fa8072;
border-bottom: 1px solid #fa8072;
}

 

上記の数字の部分を変える。
2    2    4   となってるので、最初の数字を足して3つめの数字になればいいと思います。

 


ちょっと太くしたいなら、こんな感じかしら

.entry-content h3{
padding: .5em .75em;
background: -webkit-repeating-linear-gradient(45deg, #FFF0F5, #FFF0F5 5px, #ffffff 5px, #ffffff 10px);
background: repeating-linear-gradient(45deg, #FFF0F5 , #FFF0F5 5px, #ffffff 5px, #ffffff 10px);
color: #000;
border-top: 1px solid #fa8072;
border-bottom: 1px solid #fa8072;
}

 

まとめ

見出しが可愛くなるとテンションがあがるんだなぁと思いました(^O^)

ぜひ変更してみてください~!