しゃべろぐ

雑談ブログ。ガジェット・カメラ関係多め

はてなブログのデザインをBrooklynからMinimalismへ変えました



ブログデザインは楽しいけど沼にハマる

ブログを始めると「どんな記事を書こうか…」とか「より収益性を上げるには…」という悩みが多いと思いますが、結構沼にハマりがちなのがサイトデザイン。


私は今年に入って少し経ってからちょっとだけサイトデザインいじったんですけど、その時はタイトル下にグローバルナビゲーションを追加した程度でした。


だけど今回は適用テーマも変えることにしましたので、一旦今までのデザインは捨てて改めてサイトデザイン構築をするための旅(沼)へ突入することに。


楽しいですけどね。デザイン考えている間は。


ただ、沼なんですよね…

変えようと思った経緯

きっかけはグローバルナビゲーションの導入でした。


私が配置していたグローバルナビゲーションをPCタイトル・スマホで適用する際に反映がどうも上手くいかず見出しデザインがなくなるという事態に。


レキポンシブルデザインを適用させれば見出しデザインは復活するんですけど、なぜかh3が反映されてなかったりなど色々問題が起きてました。


別にデザインで気には不満はなかったので今のテーマのまま四苦八苦して問題点潰していくというやり方もあったのですが、いい機会なのでテーマをまるごと変えることにしました。


ちなみに今まで使っていたのはBrooklynというテーマです。


www.notitle-weblog.com

今回採用したデザイン

今回使わせていただいたデザインはこちらです。


Minimalism - テーマ ストア


単純に現在の人気度が1位だったことや製作者が私も何度か記事を拝見したことがある「ひつじの雑記帳」の方だったりしたので使ってみたら面白いかなとか。


hitsuzi.hatenablog.com


基本はシンプルなデザインに収まっているもののカスタマイズをしやすいように意識されていることや既に多くのカスタマイズ記事が書かれていることもあり、導入はしやすいかなという点も大きかったです。


似たようなデザインだと個性がないとか欠点ありますけど、こういう時に導入ユーザー数が多いことがメリットでもあるんですよね。*1


とりあえず記事を読み漁れば正解にたどり着ける可能性がありますし。

参考にさせてもらったサイト・ページ

今回テーマをテンプレからカスタマイズさせてもらう上で参考にさせていただいたサイト・ページがこちら。


hitsuzi.hatenablog.com


こちらは製作者公式の導入手順ページです。


このページだけでもかなりカスタマイズは可能となりますが、もう少し参考にさせていただいたページもあります。


saruwakakun.com


見出しのデザインが一覧で紹介されており簡単に反映することも可能という素晴らしいページ


反映したデザインのh3とh4はこちらの記事からコードをお借りしました。


あとは今回のデザインにはまだ適用させていませんが、今後ちょいちょいいじろうかなという時に参考になりそうなサイトとかも合わせてピップアップ。


www.yuzumochi.com


raku-book.hatenablog.com


まだSNSのデザインのフラットデザイン化やグローバルナビゲーションをピコッと動かす動作が上手くいかなかったりしてるので引き続き作業は続けていく予定です。


ちなみにテーマを入れ替える時は必ず現在使っているHTMLコードのバックアップは必ず取りましょう。


新しいデザインにして上手く行かなかったり、作業が長引いて中途半端な状態は嫌だという方はとりあえず旧デザインにすぐ戻すことができるので。

蓋を開けたらあまり変わってなかったデザイン

ある程度反映も終わったのでデザイン全体を見返して見たんですけどあまりにも変わってないので、同じテーマでも良かったんじゃないか疑惑まであります。


元々シンプルなデザイン好きだし行き着くところは一緒なんですかね。


変わったのはグローバルナビゲーションと見出しくらいでしょうか。


これではテーマ製作者に申し訳ないのでもうちょっとデザインいじりたいと思います。


色々と修正する中でまたBrooklynになる可能性もなきしもあらずですが、デザインテーマを悩んでる時期はコロコロ変えるくらいで良いと思います。


年中変えてたら流石にアレだけど。


こんなふわっとした記事は久々ですが、今後ともどうぞよしなに。

*1:正直なところある程度読みやすければデザインなんでも良いかなという人間です。