タイトル通り、ブログテーマを変更しました!
変更後のテーマはHaruniです!
はてなテーマ内でも人気のテーマなので、見たことある人も多いのでないでしょうか。
今回は忘備録も兼ねて、Haruniの紹介と今回行ったカスタマイズをまとめておきます。
ブログテーマ「Haruni」とは
「Haruni」は、はてなのテーマストアでも人気で、トップ5に君臨しています(2019年11月10日時点)。
Haruniの特徴をざっくりと紹介すると…
・人気のカード型レイアウト
(※ただしカード表示できるのは、はてなproのみ)
・可愛らしいグラデーションのデザイン
・色を変更すれば男性も使えるデザインに
・レスポンシブ対応
・スマホのグローバルメニューが、デフォルトでデザイン化されてる
・人気テーマなので、カスタマイズ記事が沢山ある!
いろいろ悩みましたが、いいところ尽くしなのでこのテーマに決定しました!
「Haruni」を選んだ理由
以前までは「SHOHO」というテーマを使用していました。
シンプルですっきりして好きだったんですが…ちょっとシンプルすぎるかなと思い始めて(笑)。
私がカスタマイズ上手なら、もう少しオシャレに出来たかもしれませんが…
初心者の私には難しかったので、それなら最初から華やかなデザインにしちゃえ!と思い立ちまして。
前よりも写真がキレイに見えるようになった気がします!サイズが大きくなったからかな。
あと何気にブログ開設して1年になるので、心機一転も兼ねてデザイン変更しました。
カード型デザインって、今っぽさがあるので憧れていたんですよね~。
インストールしてみて「おお~!」と興奮しちゃいました(笑)。
「Haruni」に変更して行ったカスタマイズ
ここから先は私の忘備録ですが、参考になれば是非。
ちなみに、テーマを変更すると、今までのCSS全部消えます!
ちゃんとCSSコピペしておいてくださいね!
今回はテーマ変更とは関係なく、今までやりたかったカスタマイズも合わせて変更してみました。
グローバルメニューの変更
制作者のminimalgreenさんの記事を参考に変更しました。
コピペだけで簡単!スマホからだとこんな感じになります。
丸いボタンを押すと、しゅっとメニューが出てくる!
インストールしただけで、こんな本格的なデザインになるとは!
文字サイズを大きく
今まで16pxにしていましたが小さい気がしたので、17pxに変えました。
ちょっと見やすくなった?
はてなのテーマは、16px以下で設定されているものも多いみたいです。
デザイン→カスタマイズ→デザインCSSの部分に、下のをコピペするだけです。
.entry-content p {font-size: 17px;}
見出しのデザイン変更
h2の見出しを前よりもシンプルにしました。
ボックスタイプの普遍的な見出しにしました。
ブログデザインが華やかになったので、見出しはシンプルに。
毎度の如く、サルカワさんの記事を参考にしてます。
目次の設定
前からやろうやろうと思って全然出来てませんでしたので(笑)。
こちらも製作者様の記事を参考に。
さらに、目次のリストを番号順ではなく、黒四角(■←これね)にしています。
はてなブログの目次のデザインカスタマイズ集 - Minimal Green
蛍光マーカーを追加
これも前からやりたかったやつ。
こういうのです。こういうの。
こちらの方の記事を参考に変更しました。
headに追加するだけなので、超簡単でした。早めにやっておけばよかったぜ。
これをやれば、大文字にするだけで自動でマーカーがつきます!
本当はもっとカスタマイズしたいですが、今回は一旦これで終了!
この記事書きながら、2時間くらいパソコンをカタカタしていて疲れました。。。
テーマ変更するときは時間に余裕があるときにしましょうね(笑)