ブログテーマを「Haruni」に変更!変更したカスタマイズまとめ

タイトル通り、ブログテーマを変更しました!

変更後のテーマはHaruniです!

blog.hatena.ne.jp

はてなテーマ内でも人気のテーマなので、見たことある人も多いのでないでしょうか。

 

今回は忘備録も兼ねて、Haruniの紹介と今回行ったカスタマイズをまとめておきます。

 

 

ブログテーマ「Haruni」とは

「Haruni」は、はてなのテーマストアでも人気で、トップ5に君臨しています(2019年11月10日時点)。

 

テーマharuni

 

Haruniの特徴をざっくりと紹介すると…

・人気のカード型レイアウト

 (※ただしカード表示できるのは、はてなproのみ)

 

・可愛らしいグラデーションのデザイン

 

・色を変更すれば男性も使えるデザインに

 

・レスポンシブ対応

 

スマホのグローバルメニューが、デフォルトでデザイン化されてる

 

・人気テーマなので、カスタマイズ記事が沢山ある!

いろいろ悩みましたが、いいところ尽くしなのでこのテーマに決定しました!

「Haruni」を選んだ理由

以前までは「SHOHO」というテーマを使用していました。

blog.hatena.ne.jp

 

シンプルですっきりして好きだったんですが…ちょっとシンプルすぎるかなと思い始めて(笑)。

 

私がカスタマイズ上手なら、もう少しオシャレに出来たかもしれませんが…

初心者の私には難しかったので、それなら最初から華やかなデザインにしちゃえ!と思い立ちまして。

haruniテーマ

前よりも写真がキレイに見えるようになった気がします!サイズが大きくなったからかな。

あと何気にブログ開設して1年になるので、心機一転も兼ねてデザイン変更しました。

 

カード型デザインって、今っぽさがあるので憧れていたんですよね~。

インストールしてみて「おお~!」と興奮しちゃいました(笑)。

「Haruni」に変更して行ったカスタマイズ

ここから先は私の忘備録ですが、参考になれば是非。

ちなみに、テーマを変更すると、今までのCSS全部消えます!

 

ちゃんとCSSコピペしておいてくださいね!

今回はテーマ変更とは関係なく、今までやりたかったカスタマイズも合わせて変更してみました。

グローバルメニューの変更

制作者のminimalgreenさんの記事を参考に変更しました。

yumekawa.hatenadiary.com


コピペだけで簡単!スマホからだとこんな感じになります。

haruniテーマ


丸いボタンを押すと、しゅっとメニューが出てくる!

haruniテーマ

インストールしただけで、こんな本格的なデザインになるとは!

文字サイズを大きく

今まで16pxにしていましたが小さい気がしたので、17pxに変えました。

ちょっと見やすくなった?

 

はてなのテーマは、16px以下で設定されているものも多いみたいです。

デザイン→カスタマイズ→デザインCSSの部分に、下のをコピペするだけです。

.entry-content p {font-size: 17px;}

見出しのデザイン変更

h2の見出しを前よりもシンプルにしました。

ボックスタイプの普遍的な見出しにしました。

 

ブログデザインが華やかになったので、見出しはシンプルに。

毎度の如く、サルカワさんの記事を参考にしてます。

saruwakakun.com

目次の設定

前からやろうやろうと思って全然出来てませんでしたので(笑)。

こちらも製作者様の記事を参考に。

yumekawa.hatenadiary.com

 

さらに、目次のリストを番号順ではなく、黒四角(■←これね)にしています。

はてなブログの目次のデザインカスタマイズ集 - Minimal Green

蛍光マーカーを追加

これも前からやりたかったやつ。

こういうのですこういうの

 

こちらの方の記事を参考に変更しました。

www.maplecookie.net

 

headに追加するだけなので、超簡単でした。早めにやっておけばよかったぜ。

これをやれば、大文字にするだけで自動でマーカーがつきます!

 

本当はもっとカスタマイズしたいですが、今回は一旦これで終了!

この記事書きながら、2時間くらいパソコンをカタカタしていて疲れました。。。

 

テーマ変更するときは時間に余裕があるときにしましょうね(笑)