まほろば暮らし

 TVディレクター 🎬逗子在住 & 3男児 (8歳👦🏻/ 5歳👦🏻/ 2歳👶) の父 ✨ニュースの裏話や育児のアレコレ。

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

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

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

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

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

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

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

f:id:mahoroban:20180712163725p:plain

デザインテーマとは?

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

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

f:id:mahoroban:20180712165057j:plain

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

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

f:id:mahoroban:20180712165246j:plain

このうち僕は「Brooklyn」というテーマを選んで使ってきました。

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

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

f:id:mahoroban:20180712183717j:plain

テーマを変更した理由

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

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

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

f:id:mahoroban:20180712170302j:plain

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

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

カード型一覧表示にする方法は、こちらの記事をご参照ください。

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

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

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

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

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

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

f:id:mahoroban:20180712183854j:plain

 

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

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

 

f:id:mahoroban:20180712184725j:plain

 

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

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

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

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

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

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

まとめ

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

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

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

修正の作業は、全て自分の記事を見ながら行いました。
これらの記事ですね。

www.mahoroban.com

www.mahoroban.com

 

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

 

今日も最後までお読みいただき、ありがとうございます。

現在、読者を募集中です。

気に入っていただけた方は、下記のボタンを

ポチッとお願い致します。

↓↓↓↓↓

SNSアカウント

Twitterでは、

このブログの最新情報やニュースの裏側、

家族・子育てのことなどを発信していきます。

ぜひフォローしてやってください!

twitter.com