ブログ運営

【はてなブログ】初心者でも簡単にグラデーションの見出しができた!

どーも、りんご🍏です。

 

今日は、初心者でも簡単にできるグラデーションの見出しについて書いていきます!

「最近流行りのグラデーションの見出し、どうやってやるんだろう?」と思ってたら、オークニさんのブログでこんな神カスタマイズ記事を発見♡!

www.okuni.me

こちらの記事を参考に、ちょこっと自分なりにいじったので備忘録もかねてまとめたいと思います〜♪

はてなブログでCSSを貼る場所

デザイン→カスタマイズのデザインCSSという場所に貼りつけてきます。

f:id:shinya-no-ringosawagi:20180303173840j:image:w300
f:id:shinya-no-ringosawagi:20180303173906j:image:w300

STEP1.まずは、既存のデザインテーマを無効化にする。

私は『ZENO-TEAL』のデザインテーマを使用しています。
ZENO-TEALに元々入ってる見出しデザインはこんな感じ。

f:id:shinya-no-ringosawagi:20180225221100p:plain

上からh2、h3、h4、h5の順番です。

この見出しのままでもおしゃれなんだけど、これをグラデーションに変えていきます!

まず、オークニさんのブログに貼ってあったCSSで、既存のデザインテーマを無効化します。

/* 既存見出しのリセット */
.entry-content h2,
.entry-content h2:before,
.entry-content h2:after {
content: none;
background: none;
background-color: none;
border: none;
border-radius: 0;
}

h3の見出しを変えたい場合は、赤字の部分をh3に書き変えてください。

STEP.2 グラデーションのCSSを記入する。

既存のテーマの見出しを無効化したら、下のCSSを入れます。

.entry-content h2{
color: #000;
padding: .5em;
position: relative;
}
.entry-content h2:after {
content: “”;
display: block;
height: 4px;
background-image: linear-gradient(to right, #EB9BBD, #7ED1E6);
}

赤文字の部分は、見出しの文字を黒色にしたかったので加えました♪
もちろんここのコードを変えれば、ピンクの文字や青色の文字にできますよ〜。

完成!
こんな感じになりました♡かわいい〜!

f:id:shinya-no-ringosawagi:20180226225920p:plain

オークニさんが設定してくださったグラデーションの色が可愛すぎなのですが、ちょこっと色をいじってみます。

グラデーションのカラーコードいろいろ

 

青〜黄色のグラデーション

f:id:shinya-no-ringosawagi:20180303111419p:plain

この青〜黄色のグラデーションのCSS☟

.entry-content h2{
color: #000;
padding: .5em;
position: relative;
}
.entry-content h2:after {
content: “”;
display: block;
height: 4px;
background-image: linear-gradient(to right, #66CCCC, #FFFF99);
}

青文字の所を変えれば、色んな色味のグラデーションが出来ちゃいます。

オレンジ系のグラデーション

f:id:shinya-no-ringosawagi:20180303112448p:plain

先ほどのCSSの青文字の部分を、下記のカラーコードに変えてください。

#FF0066, #FFFF00

黄緑〜ピンクのグラデーション

f:id:shinya-no-ringosawagi:20180303113618p:plain

この色味けっこう好きです♡

カラーコード☟
#33FF99, #FF33CC

紫〜黄色のグラデーション

f:id:shinya-no-ringosawagi:20180303114313p:plain

インスタグラムの配色っぽいこちらのカラーコードはこちら☟

#CC33FF, #FFFF66

もっとハイセンスな人、良いグラデーション見つけたらこっそり私に教えてください〜

 

見出しの線を太くするカスタマイズ

ちょっと見出しの線を太くしてみました。

f:id:shinya-no-ringosawagi:20180303110812p:plain

.entry-content h2{
color: #000;
padding: .5em;
position: relative;
}
.entry-content h2:after {
content: “”;
display: block;
height: 10px;
background-image: linear-gradient(to right, #66CCCC, #FFFF99);
}

青文字の部分の数字を変えれば、線を太く出来ます!
ここらへんは好みですね〜。

まとめ

グラデーションの見出しのやり方、簡単まとめ。

①既存のテーマを無効化する

②グラデーションのCSSを入れる

②からいきなりやっても、反映されないので要注意!
必ず①から記入してくださいね。

あと、はてなブログの場合、見出しタグの前に
.entry-content が必要だそうなので、それも忘れないようにしましょう〜。

オークニさん、ありがとうございました♡

役立つカスタマイズがたくさん載ってるオークニさんのブログはこちらから☟

www.okuni.me

以上!初心者でも簡単にできるグラデーションの見出しでした!

おわりっ🍏