ブログ運営

はてなブログのテーマ「Haruni」が可愛すぎる!グラデーションのカスタマイズ方法も

どーも、りんご🍏 (@ringo_sawagi) です。

当ブログのデザインテーマを、「Haruni」に変えました!

ブログがすごい可愛くなったよ~~~!

もうね、めちゃくちゃ気に入りました!
ブログ見てるだけでニヤニヤしちゃいます(←記事書け)

この記事では「Haruni」のおすすめポイントと、背景のグラデーションを色変更したので、そのカスタマイズ方法も書いていきたいと思います♪

Haruniは、こんなテーマ

私が「Haruni」を知ったのは、カスタマイズの師匠オークニさんの紹介記事を読んだのがきっかけでした。

その記事を読んで、実際テーマストアでデザインを見て、一目惚れ!

シンプルだけど、グラデーションがアクセントになっててめっちゃカワイイ♡!

デフォルトだと、薄ピンク色のグラデーションになってます。テーマ名の通り、春らしい色合いですな~。
作者のMinimalGreenさん!素敵なテーマをありがとうございます!!!

スマホ版だと、グローバルナビのボタンがついてる!

個人的に「コレだぁあ!」ってビビビと来たのが、スマホでグローバルナビの丸ボタンがデフォルトでついてるところ!

コレです。タイトルの横についてる丸いポチです☟

f:id:shinya-no-ringosawagi:20180317094123j:plain

この丸いポチを押すと、こういう感じでニュッとグローバルナビが出てくるんですよ~!

f:id:shinya-no-ringosawagi:20180317094410j:plain

カスタマイズ初心者の私にはありがたすぎる・・・。

グローバルナビのCSSを貼り付けるだけで、このボタンが再現できちゃいます!

カスタマイズ記事を紹介してくださってるので、簡単に出来ますよ~

test-test-test.hatenadiary.jp

 

背景のグラデーションの色を変えるカスタマイズ方法

最初の薄ピンク色のグラデーションもとってもキレイなのですが、他ブログとの違いを出すために色を変更してみました!

グラデーションの配色は、以下のサイトを参考に。
かわいいグラデーションばっかりでどれにしちょうか迷っちゃいますよ~♡

カッコイイ系のグラデーションもあるから、男性ブロガーさんにもおすすめです!

webgradients.com

 

お気に入りのグラデーションを見つけたら、カラーコードをコピペ

f:id:shinya-no-ringosawagi:20180317101027j:plain

①と②、2つのカラーコードが必要です~。

グラデーションのCSSを作る

このサイトもオークニさんに教えてもらって、知りました。(オークニさん、ありがとう)
簡単にグラデーションのCSSを作ってくれます!
www.colorzilla.com

まず、先ほどコピーしたカラーコード①を記入します。

f:id:shinya-no-ringosawagi:20180317101352j:plain
f:id:shinya-no-ringosawagi:20180317101409j:plain

同じように、反対側のところにも(上の画像で言うと、黄色い四角のところ)②のカラーコードを記入します。

すると、グラデーションのCSSを作ってくれるので、これを全コピー!

f:id:shinya-no-ringosawagi:20180317105727j:plain

着せ替え用CSSに貼り付け

作者の方が着せ替え用CSSをご用意してくださってるので、そこに先ほどのグラデCSSを貼ってきます。

test-test-test.hatenadiary.jp

赤字の部分を、先ほどコピーしたグラデCSSに張り替えます!

/* 水色グラデーション着せ替え */
body, .entry-content h3, .categories a, .hatena-module-category .hatena-urllist li a, a.entry-see-more {
background: -moz-linear-gradient(left, #84fab0 0%, #8fd3f4 100%);
background: -webkit-linear-gradient(left, #84fab0 0%, #8fd3f4 100%);
background: linear-gradient(right, #84fab0 0%, #8fd3f4 100%);

/* 背景グラデーション1 */
}

これで完成!

Haruniまとめ

シンプルで洗練されたデザインで、めちゃくちゃお気に入りになりました!

デザインがかわいいと、自然と記事を書くモチベも上がります~笑。

カスタマイズばっかりして全然記事書いてなかったもんね。

超お気に入りのデザインになったので、しばらくは記事に集中します。笑

もうすぐ春だし、ちょっとイメチェンして気分転換したいな・・・という方はぜひ!!

おわりっ🍏