ブログデザインを少しリニューアルしました(2017年12月)

気が付けば5か月ほど放置してしまっていた当ブログ。再始動に先駆けてブログデザインのリニューアルを行いました。

リニューアルといってもタイトルにある通り「少し」しか変わっておりません。CSSで見た目をいじった感じですね。しかも、スマホを想定した環境では変更点はほとんどありません。

……が、せっかくなので今回のリニューアルについて書いておきたいと思います。

スポンサーリンク

読みやすさと清潔さ

今回は「読みやすくて清潔感のあるブログ」を目指しました。完成したものは「地味」とも言えるものですが、僕個人の好みに近付けて行った結果そうなりました。使用している色数は少ないですし、本文中の装飾などもまたしかりです。

言葉で説明しても伝わりづらいと思うので、リニューアル前後の記事ページのスクリーンショットを用意してみました。(グレーの塗りつぶしは広告部分)

縦に長くなっています。すいません。

<リニューアル前>

リニューアル前の記事ページキャプチャ

<リニューアル後>

リニューアル後の記事ページキャプチャ

ブログを構成するヘッダーやフッター、サイドバーの中身などはほとんど変わっていません。ただ、リニューアル前はサイドバー部分がゴチャゴチャしているように感じられたため、このたびスッキリさせてみました。

スッキリと言えば、タブレット・PCを想定した環境におけるシェアボタンもそうですね。

以前のボタンもカラフルゆえにアクセント的な役割を果たしていて良かったのですが、よりクリーンな印象にしたくて今回のようなデザインになっています。

また、読みやすさという点では、要素間の余白を調整してみました。これは自己満足です。妥協しているところもありますが、以前よりもパッと見た時の違和感が少なく、良い感じになっているかと思います。(*個人の感想です)

ちなみに、font-familyは変更なしです。游ゴシックも頭に浮かびましたが、僕自身游ゴシックに全く慣れることができていないので採用は見送りました。

……とここまで書いてきたことから分かるように、あくまで僕にとっての「読みやすくて清潔感のあるブログ」となっております。

(個人の趣味ブログなのでアリでしょう)

そのほか手を加えたところ

上の比較画像で目を引く(んじゃないかと個人的に思っている)サイドバーのプロフィール。ウインドウ幅が768px以上の時にこの見た目になるのですが、結構気に入っています。なんかしっくりきます。

ちなみに、この背景画像とプロフィール画像はツイッターアカウント(@njimeishi)のものと同じ組み合わせにしています。

また、今回はスライドメニュー(ドロワーメニュー)を作成し直しました。以前のは開閉時にカクつきがあったのですが、スムーズな動きをするように見た目そのままで改良しました。

改良、といっても「UNORTHODOX」さんの【jQuery】プラグインを使わずに、簡単にサイドからスライドして現れるメニューを実装する(ほぼCSS)で紹介されているものをほぼそのまま使用しています。

今後の目標

将来的にはワードプレステーマを自作してみたいと考えています。というのも、hとつのテーマを繰り返し修正・上書きしてきたことによるグチャグチャなコード、不用なファイルが多数存在しているからです。

どこかのタイミングで見た目・機能そのままにオリジナルテーマを作りたいです。

……それ以前の問題として、ブログを放置しないようにします。