その他

はてなブログテーマ『Haruni』がオシャレでオススメ!カスタマイズしました

https://cdn.image.st-hatena.com/image/scale/62839d454b9b4fb8f7fe6ed8c816d10c1486436f/height=460;version=1;width=620/https%3A%2F%2Fcdn.user.blog.st-hatena.com%2Ftheme_screenshot%2F141213641%2F1520772228142829

どーも、ちゃたです。
今回、久々にブログテーマを変えました!

実は最初は、Wordpressのカード型デザインに憧れて、『ZENO-TEAL』というテーマに変更しようと思ってました。
が、色々調べていく中で、スッキリとしたおしゃれなデザインの『Haruni』というテーマを見つけ、最終的にこれに決めました。

 

 

はてなブログテーマ『Haruni』とは?

 

『Haruni』の概要

『Haruni』というテーマですが、よくよく調べてみるとminimalgreenさんという有名なテーマ製作者さんによって作られたテーマでした。
『Haruni』以外に、『Minimal Green』『stripe』『yumekawa』といったテーマを作っているプロのテーマ製作者さんです。

これは安心するポイントですね。

もちろん安心のレスポンシブ対応
2018年3月にリリースなので、リリース直後で人気テーマになりつつあるようです。

『Haruni』のいい点

 

グラデーションがオシャレ

テーマの説明に、

春らしいピンクグラデーションのシンプルなレスポンシブデザインテーマです。2カラム。トップページ横長カード型

とあるようにグラデーションに特長があるデザインです。
デモページがピンクなので、一見華やかな女性向けのデザインに見えますが、色使い次第でクールな男性向けのデザインにもなります。

スッキリ・シンプルであるにも関わらず、他のテーマとは一味違うグラデーションのオシャレさに惹かれました。

スマホメニューがかっこいい

もうひとつ、このテーマに変えたいと思った理由が、ほぼ標準で搭載されているスマホ用のメニューボタン。br/>
右上のメニューマークを押すと、左からニュルッとメニューが出てくるやつです。
f:id:chata13:20180329180538p:plain

f:id:chata13:20180329180542p:plain

カスタマイズに慣れてないボクとしては、ほぼ標準搭載というのがとてもありがたいです。

今の時代、スマホでの操作性は超重要。
このメニューボタンはシンプルかつ機能的でイケてます。

カスタマイズの解説がある

さらに『Haruni』の素晴らしい点は、製作者さんによるカスタマイズの解説・デモサイトがあるところです。

test-test-test.hatenadiary.jp

 

このサイトに従って一通りカスタマイズすれば、かなり完成度の高いデザインに仕上げることができます。
特に気に入ったのがシェアボタン。

f:id:chata13:20180329180804p:plain

目立つデザインではないんですが、テーマにめちゃくちゃマッチし、統一感をそこなわないカッコイイ感じに仕上がります。

『Haruni』をインストールしてみた

そんな『Haruni』を早速インストールしてみました。
もちろんいくつかカスタマイズは必要なので、カスタマイズ内容を備忘録も兼ねて書いておきます。

カスタマイズした点

上記デモサイトのカスタマイズ

上記の通り、デモサイトのカスタマイズ解説に従って、まずはグローバルメニュー、フッター、シェアボタン、フォローボタンを変更しました。
これは解説通りにやっていけば、カンタンにできちゃいます。
これだけでもかなり洗練されます。

独自のカスタマイズ

その他のカスタマイズは、自分の好みで、タイトルフォント、本文フォント、行間、文字間なんかを調整しました。
あまり文字を詰め込まず、少しゆる~い感じに仕上げたかったので、行間・文字間を広めにしました。

あとはこれまでも使っていたカエレバヨメレバのデザインをそのまま適用したり、Googleアドセンスの設定をしたり、といった感じです。

プロフィールページ

今回、テーマを変えるついでに、プロフィールも一新しました。
まずアイコンを新しくし、さらにaboutページもちゃんと作成しました。

今までは、はてなブログ標準のままだったんですけど、オークニさんという人の方法を参考にさせてもらいました。
コピペ歓迎とあったので、がっつりコピペさせてもらったところ、なかなかいい感じに仕上がって大満足です。

www.okuni.me

 

参考にしたサイト

その他にも、『Haruni』をすでにインストールされていたブログを拝見し、参考にさせてもらいました。

まだまだ新しいテーマなので、どんな感じに仕上げられるのか不安でしたが、これらのサイトで完成までのイメージがつかめました。
ありがとうございます。

www.ringo-blog.tokyo

 

www.hohonut.com

 

www.nago-lifestyle.com

 

最後に

自分としては、これまでよりもかなりかっこよく、統一感のある仕上がりになったので満足です。

もっと細かくカスタマイズをしたい部分もあるんですが、いかんせんCSSやHTMLもロクに理解していないので、とりあえずこれくらいで進めることにしました。

解説が丁寧なので、初心者にも優しい、使いやすいテーマだと思います。

興味を持った方はぜひインストールしてみて下さい!

それでは~。