はてなブログ デザイン テーマを『Minimal Green』に変えてみた

突然ですが、ブログデザイン変えてみた。

ここのところ残業続きで、毎晩深夜に調べながらの作業でした。もう何度寝落ちしたかわからないw

初めてのことばかりで時間かかったけど、自分好みに変えるのって楽しいね。やりだしたらキリがないよ。

それにしても、テーマを変えると雰囲気がだいぶ違うよね。グリーンを基調とした清々しい感じになった。

タイトルと中の人はアレだけど…。

ここからイマドキのブログ風に、目次とか見出しを使ってまとめてみた。

テーマを変えた理由

最初のきっかけは、スマホ画面の「文字を大きくしたい」から始まる。というか、ずっと思ってたけど面倒でやってなかった。

文字の大きさを変えるだけなら、テーマまで変える必要がないんだけど…。

どうせ変えるなら、テーマごと変えて気分一新してみるか！ということで、さっそく変更。

テーマを選ぶ

以前は公式の『寿司ゆき』を使用。これ選んだ理由は、単純に可愛いから。レイアウトや書体も見やすくて気に入ってましたね。

今回は公式以外から選んでみようと思い、私は『Minimal Green』を選んだ。理由はパッと見て気に入ったので。直感です。

人気のテーマも悩んだのですが…。今回はあまりいじらなくても、色もデザインもすぐに使えそうなテーマとして選択。

変更したところ

文字の大きさ

最終的に文字の大きさを17pxへ。

テーマ変更前は、ぎゅっと詰まった感じだった。17pxまでいくと、さすがに読みやすくなるなと感じた。

しかし！以前の文字サイズを基準に段落を決めてたので、記事内の一段落が5〜6行になってしまった(;´д｀)!

私はスマホ画面3行前後を一段落としてます。これは記事を手直ししないとダメかも。追い追いやっていこうと思います。

グローバルメニュー設置

これ、前からやりたかった！

今回はこのテーマで紹介されていたカスタマイズ集よりコードをコピペ。追加でFont Awesomeアイコンを設置しました。

↓スマホ版

右上にメニューが設置され、タップすると中身。

↓PC版

↓リンク先で『グローバルメニューの設置』について、具体的な方法が説明されています。
blog.minimal-green.com

↓赤い部分を変更するとFont Awesomeのアイコンを追加できます。

赤線部分を以下のように変更。①～③を自分のブログにあったものに変えます。これはメニューに設置する数、全て変更します。

<a href="①https://penkichi-201902.hatenablog.com/"><i class="②fa fa-home" aria-hidden="true"></i>③ ホーム</a>

①リンク先（上記はホームなのでTOP画面）
②アイコン名（上記は家のマークです）
③メニュー名

事前にFont Awesomeの準備をお忘れなく。私はこちらの記事を参考にさせていただきました。
saruwakakun.com

ヘッダ画像を追加

読み込みに時間がかかるから画像は使ってないという方もおられると思うのですが。自分らしさを表現できるスペースでもあるので、今回はヘッダ画像を設置してみました。

まとめ

結論としては…

文字の大きさだけは早く決めた方がいい。

前の文字サイズから大きく変更すると、一段落の行数が増えます。場合によっては手直しが必要になるので、記事が増える前に対策しておいた方が無難かと思います。

今後テーマを変更しても、都度使用したい文字サイズを記述しておけば、大幅に記事を直す手間は省けると思うので…。

文字の大きさ等、はてなブログではたくさんの方がカスタマイズについて記事を残してくださっています。

検索すればいろいろな方法が見つかるので、気になる方は調べてみるといいかもしれません。

今回は素敵なテーマを作ってくださった制作者、id:minimalgreen様に感謝しております。ありがとうございました。