ブログのデザインテーマを「Brooklyn」→「Minimalism」に変更した理由

こんにちは、まほろばんです。

先週から、はてなブログのカスタマイズを進めていますが、
もっとも大変だった作業をご紹介したいと思います。

それは、デザインテーマを変更したこと。
「Brooklyn」から「Minimalism」に変えました。

変えた理由は、いくつかありますが、
いちばんは、スマホ画面が見づらかったこと。

最初は、スマホの画面のみカスタマイズしていこうとしましたが、
うまくいかなかったので、テーマ自体を変更しました。

とっても大変だったので、備忘録もかねてまとめていきます！

デザインテーマとは？

はてなブログには、ユーザーが作成したデザインテーマを
インストールできるという便利な機能があります。

ブログ全体の見た目を決めるデザインですね。
場所は、管理メニューから「デザイン」を選ぶと出てきます。

いろんなデザインを選ぶことができるので、初心者にはありがたい機能です。

この欄のいちばん下から、テーマストアに入れます。
そこから人気ランキングなどをリサーチすることもできます。

ぼくは「Brooklyn」というテーマを選んで使ってきました。

これはshiromatakumiさんが作ってくれたテーマで、シンプルなデザインが特徴です。

現在のランキングは第２位。

テーマを変更した理由

このBrooklynのPC画面は、とてもシンプルで気に入っていました。

それなのにデザインテーマを変更した理由は、
スマホ画面が、やや圧迫感があったからです。

この「Brooklyn」は、レスポンシブデザインに対応しています。
これはスマホとPCを同じ画面にする機能で、下記の場所で選択できます。

レスポンシブデザインなら、PCで設定したものがスマホに反映されるので、
使い勝手がいいのが特徴です。

ただ、ぼくの場合は、PCのトップ画面をカード型一覧表示に変更してから、
スマホ画面が少し見づらいと感じていました。

そこでレスポンシブのチェックを外し、
スマホ画面だけをカスタマイズしようと考えましたがうまくいきませんでした。

そこで、デザインテーマ自体を変更することに決めたのです。

新デザインテーマは「Minimalism」

新たに選んだデザインテーマは、ランキング１位の「Minimalism」です。

作成してくれたのはcodomisuさん。
デザインを最小限まで削ぎ落し、美しさを最大限に表現したテーマです。

PCの画面はそれほど大きな変更はなかったのですが、
スマホ画面がゆとりのある見やすい画面に変わりました。 

デザインテーマ変更の流れ

デザインテーマを変えるのは簡単です。
先ほどのテーマストアで、「プレビューしてインストール」を押すだけ。

ボタン１つで簡単にできるんですね。ありがたいです。
でも実際には、そのあとが大変でした。

カスタマイズのやり直しが必要

ぼくの場合は、これまでカスタマイズしてきたコードをほとんどやり直しました。

というのもカスタマイズは、
他のブロガーの先輩がたのやり方を学びながら、見よう見まねでやってきたもの。

だからコードだけを見ても、なんのカスタマイズだったかわからないものもあり、
一度全部消して、やり直したほうが確実だったからです。

残すことができたのは、「サイドバー」のカスタマイズくらい。
そのほかは、グローバルメニューやシェアボタン など、全部やり直しました。

まとめ

カスタマイズ修正にかかった時間は２〜３時間ほど。
気が遠くなるような作業でした。

でも、おかげで納得のいく仕上がりに。
満足しています！

何よりも、これまでのカスタマイズを
記事にまとめておいてよかったです。 

これからカスタマイズする方は、記事にまとめることをオススメします！