コンパクトライフ計画

ほぼ日手帳と文房具、無印良品でつくるコンパクトライフ

ブログデザインをMinimalismにしました

f:id:shirokuma0130:20180501111411p:image
はてなブログProになったので心機一転、ブログデザインを「Contents」から「Minimalism」にしました。
 

Minimalismなブログに

「Contents」も初代ブログデザインだったので、お気に入りのデザインでした。しかし、他のブログでデザインが使われているのなどを拝見していて、ミニマリストを目指したい私としては名前・デザインともに惹かれていました。せっかくProにしたので心機一転デザインを変更しようと思います!
 

今のデザインと過去のデザイン比較

Before→Afterはこんな感じになりました!
f:id:shirokuma0130:20180501111418j:image
 
スマホ画面がスッキリできたのがとっても嬉しい。
 

ブログデザインを変更する際のポイント

1:デザイン変更用のブログを作る

私は2つブログを運営しており、それぞれのテーマカラーが違う以外は同じデザインを適用しています。なので別にブログを作ってそこでデザインを確認しつつ、2つのブログにコピペして適用するのが楽です。本ブログでデザイン変更をするときには前のコードなどが残っていたりするとデザインが歪み、その原因を特定するのが難しいのでもう一つデザイン確認・変更用のブログを作ると良いと思います。
デザイン変更中でもブログを見てくださる方がいるので、そういう人に変に見せないための一手間です。
 
なので、私は公開者を自分だけに設定したデザイン確認用ブログを新たに作り、そこにCSSを入れてデザインを確認して、最終確認後に本ブログのデザインフォームにコピペするようにしています。記事デザインも見るために本ブログの記事をコピペして作ったりしています。あとはメモアプリにデザインフォームごとにバックアップを取って編集終了になります。
 
f:id:shirokuma0130:20180501111940j:image
 
Evernoteにバックアップを取っています。
 

2、コメントをしっかり入れる

プログラムを作成する際に、何の機能をするプログラムなのかをコメントで残すように、デザインでも同じようにコメントを必ず残します。
そうすると今回みたいにデザインを変更する際に何の機能をコピーする必要があるのかが明確わかって便利です。
 
  • HTMLは<!—コメント内容—>
  • CSSは/*コメント内容*/
 
コメントアウトができます。それぞれ違う方法で記述する必要があるのですが、そこさえクリアしてしまえばなんてこと無いです。
f:id:shirokuma0130:20180501112025j:image
 
私はこんな感じでコメントアウトしてます。あとから見たときになんのコードなのかわかりやすい!
 

色々とデザインカスタマイズしました

太字の時に蛍光ペンっぽく見せたり、サイドバーにSNSフォローボタンを作ったり、見出しのデザインを変更したり…他にも色々とカスタマイズしたので自分のメモ的にも別の記事で残したいと思います。
システムエンジニアとしてはこういう風にコードを打って、変化する様子を見るのが楽しいです。ただ、自分で作ろうとは思いません。