【初心者必見】『Haruni』簡単コピーするだけで完璧カスタマイズまとめ

今日『Minimalism』から『Haruni』へ変更しました😘

 

もう本当にデザインがカッコ良すぎて一目惚れです。。

 

↓私自身の感想はこちら

www.lets-go-saitama.com 

 

私もHaruniに変更した際に、このコードを使わせていただきました。

 

これらのコードをコピーして貼り付ければ簡単にカスタマイズ出来ます。

 

 

 

背景(グラデーション)の色を変える

 

この記事を参考にしていただければ、青、紫、黒系、その他に変更できます。

 

yumekawa.hatenadiary.com

 

こちらのカラーコードで自分でさらにいじることも出来ます。

 

www.colordic.org

 

by カエレバ

グラデーションじゃなくて単色がいい場合

 

簡単にコードをコピーするだけでしたら、こちらの記事中にあるコードで変更できます。

 

yumekawa.hatenadiary.com

 

 

グローバルメニューの設置

 

こちらを参考にすれば、スマホでも見れる素晴らしいグローバルメニューが簡単に作成できます。

 

yumekawa.hatenadiary.com

 

私も、右上のメニューのボタンができました。

 

f:id:dasaitamablog:20200420210650j:plain


Aboutページをカッコよく

 

うたかたラジオさんの記事参考にさせていただきました🙇‍♂️

 

www.utakata-radio.com

 

こちらのCSSなどをAboutページに貼り付けると、こうなります。

 

f:id:dasaitamablog:20200420214800j:plain

 

f:id:dasaitamablog:20200420214823j:plain

 

f:id:dasaitamablog:20200420214917j:plain

 

素晴らしすぎる。。

 

うたかたラジオさん本当にありがとうございます🙇‍♂️

 

文字を大きくする

 

普通じゃ文字は小さくて読みにくいものです。

 

私はオークニズムさんの記事を参考にさせていただきました!

 

www.okuni.me

 

スライドするアニメーションを入れる 

 

私のサイト開いた瞬間に、記事が右から動いてきたり、タイトルが上から落ちてきたりしましたよね?

 

それです、それそれ!!!

 

これまたオークニズムさんが詳しく解説してます。

 

www.okuni.me

 

見出しのデザインを好きな色に変える

 

もし色を変えたいと言う場合は、

 

saruwakakun.com

 

こちらのサルワカさんの記事でお気に入りの色を変えるのがオススメです。

 

目次を見やすくカスタマイズ

 

私は青にグラデーションを変更しましたが、目次の色が見ずらかったため、

 

この黒で違和感なく変更しました。

 

yumekawa.hatenadiary.com

 

by カエレバ

 

サイドバーのフォローボタンを可愛く変更する

 

デフォルトのはてなブログの奴じゃこのHaruniのテーマじゃ浮いちゃうと思った人は、こちらにコピーするだけのコードがあります。

 

yumekawa.hatenadiary.com

 

フッターにCopyright表示をさせる

 

このままだとフッターあたりが殺風景なので、こちらの記事中のコードでデザインをします。

 

yumekawa.hatenadiary.com

 

私のフッターはこんな感じになりました!

 

f:id:dasaitamablog:20200420220915j:plain

 

なんか引き締まりますね!

 

ブログがオワコンという広告がありますが気にしないでください🐶笑

 

まとめ

f:id:dasaitamablog:20200420222031j:plain

 

これらの作成してあるコードをヘッダーやCSSやそれぞれ適切な箇所にコピーして貼り付けるだけで、こんな素晴らしいデザインができてしまいます。

 

また変更等あれば、随時直していきます。