ブログを久々にプチリニューアルしてみた

サイト運営

2018年10月14日

　当ブログ「It’s my pc life…」のテンプレートに少しばかり手を加えて、心機一転リニューアル……とは言ってもほとんど高難易度の間違い探しのようなレベルだけど(笑)

　当ブログは WordPress で運営しており、使用しているテンプレートは完全自作で一から十まで全て知り尽くしているため、基本的にリニューアルや改変で困る要素は一切無し。
　しかしながら今回のリニューアルでは若干だが頭を悩ませた箇所もいくつかあったため、そこら辺を防備録も兼ねてまとめてみようかと。

今回のテンプレートリニューアル部分

　今回のリニューアルは大幅なデザイン変更ではなく、記事枠やサイドバー枠の幅調整や不具合が出ていた部分の修正などがメインとなる。
　具体的には他で運営しているブログと記事の幅を合わせることで、画像などのサイズフォーマットを統一して作業の効率化を図るというのが最大の目的。

記事枠・サイドバー枠の幅調整

　ブログ全体幅となる 1,192px には変更を加えず、左右サイドバー枠の幅サイズを若干抑えることで、記事枠の幅をこれまでの 650px から 740px に拡張。

　最近のブログデザインの主流は 3 カラムではなく 2 カラムあるいはシングルカラムなので、この機会に 2 カラムにしてしまうのも良いかと思ったが、実のところ他で運営している趣味のサイトの多くが 2 カラムだったので、差別化を図るためにも当ブログは従来通りの 3 カラムで運営を継続することに。

　モバイル対応なども視野に入れると 3 カラムよりも 2 カラムデザインの方がやりやすいのは理解できるのだが、このブログの大元となったサイトは Web 人生最初期に作成した 3 カラムサイトだったためかどうしても思い入れが強いため、まぁ可能なところまでこのまま突っ走ろうかと。

　別にビジネスで運営しているブログってわけでもないしね……

ブログ全体のフォントサイズを拡大し、視認性を向上

　記事枠のサイズを拡張したのと連動して、ブログ全体のフォントサイズも拡大して視認性の向上を図る。これは別にユーザー日リティとかそんな高尚な理由ではなく、

　単に最近自分で自分のブログの文字サイズが小さく読みづらいと感じ始めたため。

　ああ……もう年か……とめっちゃ強く感じた瞬間だった(笑)

　ちなみにフォントサイズ変更に合わせて、同様に画像サイズも可能なものは若干サイズアップし、それに伴うレイアウトの崩れも修正。

　当ブログでは【font-size】や【padding】【margin】などの値の多くは、単位「px」ではなく「em」あるいは「rem」を使用している。
　<html> タグでブログ全体の font-size を 62.5% = 10px に設定してあるため、1rem = 10px と計算しやすくしている。ちなみに何故「em」や「rem」を使い始めたかというと、単に最初にこのブログ（正確にはその大元）を作成し始めた時に主流になりつつあったから。それだけ(笑)

　ただ、レスポンシブが主流の現在では絶対値の「px」よりも相対値の「em」「rem」の方が好まれるので、そういう意味では割と先見の目があったのかもと自負してる(笑)

HTML・CSS の記述の整理

　テンプレートを構成する HTML や CSS に点在していた不要なコードなどを発見できた範囲で一掃し、できる限り綺麗になるように記述し直した。

　正直これが今回一番手間が掛かった作業で、案の定修正後にトラブルも結構発生。結局丸 2 日はかかってしまった計算になる。これならゼロから打ち直した方があるいは早かったかも……

　HTML に関してはさほどでもなかったが、CSS は本当にやることやチェックすべき点が多かった。また今回の修正では基本的にベンダープレフィックスは全て排除した。
　理由は 2018 年現在では一般的に使用されているブラウザのほぼ全てで問題なく HTML5 及び CSS3 は動作しており、これらが正常に動作しない古いブラウザの利用者はもはや少数と判断したため。

　公式でもブラウザの CSS3 正式実装確認後は「ベンダープレフィックスは排除した方が望ましい」とあり、現時点ではほぼどのブラウザも正式実装済み。むしろこの判断は遅すぎたとも言える。

　同様の理由で、IE9 以前の Internet Explorer への対応も放棄。もうそんなロストテクノロジーに付き合ってられん……

プラグインの整理と更新

　古い、あるいは不要になったプラグイン類の削除と更新作業。更新はバージョンアップではなく、別途 CSS や専用設定でデザインしているものの見直しのこと。

　今回一番手を加えたのが「WordPress Popular Posts」。これまで使用していたほぼデフォルトのままの古いデザインを捨て、CSS でコーディングし直して視認性と見栄えが良いものに変更。

　コメントを表示する「Better WordPress Recent Comments」については続投するかどうか迷ったが、結局はまだしばらくの間は使用し続けて様子を見ることに。どのみちあんまりコメントないから不要っちゃ不要なんだけど……

ブログ記事の「公開日」に加え、「更新日」を追加

　理由は特になし。強いて言えば「やってみたかっただけ」。本当にそれだけ(笑)

　実は他に運営しているサイトやブログの中にも公開日の他に更新日を表記しているものがひとつもなく、更新日を公開しつつ運営するのは一体どんな感じになるのか気になったのが一番の理由かも。

　実装してしばらく運営した後、改めてそのまま更新日を表記するか否かを検討する予定。

また新テンプレートを作成してみたいが、しばらくは現状のまま運営する予定

　WordPress のテンプレートを自分でゼロから作成するのは手間だが、何から何まで自分で手にかけるので、いざ修正だのリニューアルだのを考えた場合、別途ダウンロードするなどして用意したテンプレートをいじるよりも遙かに容易に作業できるし、何より「作る面白さ」が何より大きい。

　今回は全体的なデザインには特に大きな不満はなかったので各箇所の修正程度で終わらせたが、そのうちまた新しいテンプレートを作成してみようかと。

　まぁその前に、他にプライベートでやること山積みなんだけどね……

It's my pc life…