ブログを始めてから5回目のデザインリニューアルをしました。

これまではなんとなく見た目だけを考えてリニューアルしていたのですが、今回は使っている WordPress プラグインの見直しや、サイトをより見やすくするための工夫もしてみましたので、いろいろ書きためておこうと思います。

リニューアルにあたり、やりたかったこと

今回は、気になっていたいくつかのポイントを改善するためのリニューアルだったので、気になるポイントをまず挙げてみました。

  1. ページが表示されるまで時間がかかる
    » 原因を調べて、表示速度の改善をする
  2. スマートフォン用のテンプレートがない
    » これまでプラグインに頼っていたので、新たに専用のテンプレートを作る
  3. デザインに使っている画像をなるべく減らしたい
    » アイコンで表現できるものはシンボルフォントを使ってみる
  4. カテゴリー、タグの見直し
    » 増えるスマートフォン系の記事に対応したい
  5. 記事のレイアウトが統一されていない
    » 特に、古い記事はサムネイル画像がないことがほとんど
サイトデザインをリニューアルしました (1)

なんとなく書き始めたブログなので、最後の「記事のレイアウトが統一されていない」についてはリニューアル後も課題となって残っているのですが、ここは時間のあるときに少しずつ調整していくことにしました。

使用した WordPress プラグイン

リニューアルにあたって、お世話になったプラグインたち。 どんな用途に使ったのかをざっくりと。

リニューアル前からも使用しているプラグインはこちら。

削除したもの

表示速度の改善のため、明らかに表示が遅くなっている箇所を取り除きました。

インデックスページの SNS ボタン

インデックスページや、一覧ページに置いていた SNS ボタンを廃止しました。
なんとなく、「いいね!」ボタンが一番重たい気がします…。 サイトデザインをリニューアルしました (2)

Amazon サーチ ウィジェット

こちらもやはり表示に時間がかかっていたようなので、外しました。
以前のデザインにした際に、フッターに謎の余白ができてしまってしばらく原因がわからなかったんですが、このウィジェットを外すと直りましたね…。 サイトデザインをリニューアルしました (3)

スマートフォン用のテンプレートを用意

これまでは、WPtouch というプラグインに頼ってモバイル版の表示をしていましたが、ようやくテーマを作りました。
モバイル版では、いまのところパソコン表示できませんが、いずれ選択式で表示できるようにしたいと思います。 サイトデザインをリニューアルしました (4)

シンボルフォントを使う

これまでサイトで使っていたアイコンはすべて自作のものですが、Retina 対応 (同画像の4倍サイズ版も用意しないといけない) を考えるとシンボルフォントを使うのが効率的です。

本当は自分で作るのが一番なのですが、今回は Ligature Symbols というフォントセットを使わせて頂きました (本当にありがとうございます!)。
詳しくは作者さまのサイトをご覧いただくのが一番だと思います。
【完全版】Ligature Symbols フォントセットの自作方法 – くらげだらけ

シンボルフォント、自作してみたいな〜…。

カテゴリー、タグの見直し

これまで K-9 Mail や BlackBerry 関連の記事はすべて「携帯」カテゴリーだったのですが、ここに来てようやく「スマートフォン」カテゴリーを新設しました。(まさか、ここまでスマートフォン関連の記事が増えるとは思わず…)

また、「BlackBerry」や「Xperia」などカテゴリーにしたほうがいいタグはカテゴリーに移し、大小のカテゴリーを作って階層化してわかりやくしました。 サイトデザインをリニューアルしました (5)

他には、いま読んでいる記事のタグがハイライトされるようにしました。 サイトデザインをリニューアルしました (6)


主に「快適さ」を重視したリニューアルでしたので、多少の配置変更はあるものの、レイアウト的に大きく変わったところはそんなにありません。

記事を読んでくれる方が少しでも「快適になったな」と思っていただければうれしいです。 サイトデザインをリニューアルしました (7)

まだ細かい課題も残っていますが、その辺りは少しずつ改善していきたいと思います!

関連記事

シェアする