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

広告


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


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

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


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


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



Haruniは、こんなテーマ



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


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


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

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


デフォルトだと、薄ピンク色のグラデーションになってます。テーマ名の通り、春らしい色合いですな~。
作者の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まとめ


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

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

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


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

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

おわりっ🍏

<