PC、ゲーム、デジタル機器などの初心者向けの話題や小技などをつらつらと……

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Loading...

数ヶ月がかりの2014年度ブログ大幅更新、ようやく完了

 具体的に言うと今年4月辺りからひっそりと続けていた、当ブログのテンプレートのカスタマイズをメインとする約半年がかりの大幅更新作業となった。疲れた……

 当ブログを以前よりご覧になっている方はもう一目瞭然と思うが、テンプレートの種類自体は変更せず、各種サイズの調整をメインとしており、細部デザインについてはCSSを結構いじっていたりする。
 他にもカテゴリやらユーザータグやらをほぼ一新し、全体的にかなりのスマート化に成功しているかどうかはともかくとして、その方向性で更新作業を行った。

 取りあえず今回の大幅更新については下記にまとめているので、参考までに。また全体的な更新に合わせてサイト概要についても若干の変更・追記を行っているので、そちらもご一読願えればと……

ブログ全体のサイズを大きめに変更

 テンプレートの枠組み(各ボックスサイズ)のみならず、内部の文字等に至るまで、少しでも視認性の向上を目的とした大型化を行った。大型の理由としては、

  • 近年のディスプレイ解像度のFull-HD化(1920×1080)に最適化するため
  • 文字等の視認性向上のため

 などが該当する。このブログを構築した当初はまだディスプレイ解像度はSXGA(1280×1024)が主流であり、私自身所有していたディスプレイもWSXGA+(1680×1050)だったため、それらを考慮したサイズでブログの全体幅を決定・構築していた。

 しかし最近のディスプレイ解像度はノートPCであってもFull-HD(1920×1080)が多数を占めるようになってきたため、それに伴いブログの全体幅も約900px程度から約1200px程度まで拡大することにした。

 ちなみにこの「1200px」という全体幅は、ディスプレイ端にウィジェット等を表示(約500px程度)すること、そしてブラウザ端にはブックマークリスト等を表示(約200px程度)することを考慮した上で算出・決定した値となる。

 もうひとつの理由である「視認性の向上」についても前述のディスプレイ解像度のFull-HD化が関係しており、解像度が精細化すればするほど画面の情報量が増える=文字等は小さく表示されるため、それに対応するための大型化となる。

 さらに付け加えると、最近自分自身小さい文字を読みにくくなってきてしまったからでもある(笑)

カテゴリとユーザータグの一新

 今回の大幅な更新のひとつであるカテゴリとユーザータグの見直し及び、再設置。今回一番時間を取られた作業でもあるが、なぜこれらを敢行したかというと、

  • ブログ開設当初のままの適当なカテゴリ分けでは煩雑過ぎるので、ブログのスマート化のため
  • 分かりやすいカテゴリ分類によるユーザービリティ向上のため
  • ユーザータグを適切に付け直すことで、当初不可能だったカテゴリを越えての詳細な分類付けのため

 などが主な理由となる。特に最近ユーザータグを適切かつ効果的に利用する方法をいくつか目にしたので、それらを実践してみたかったというのが一番の理由かも。

 ただ正直カテゴリとユーザータグの分類についてはまだ考えあぐねている部分もいくつかあるので、まだこれから幾らか改変していく可能性が残っていたり……

各記事タイトル直下にパンくずリストの追加

 最近方々のサイトやブログでよく見かける、カテゴリ階層をひと目で示すパンくずリストを当ブログにも導入。目的は主にユーザビリティ向上のため。
 実はパンくずリスト自体は別に運営中のサイトやブログではとっくに導入してはいたが、今回の大幅更新に合わせてようやくこのブログにも導入することに

 ただこのパンくずリストの導入、良くある導入方法では記事スペース内でなくその直上スペース等に設置するのを基本をしているのに対し、当ブログでは何を考えたのか記事スペース内となる記事タイトル直下への導入を試みたため、当初CSSで細部デザインをするもうまく機能せず、えらく四苦八苦する羽目になってしまったという経緯が……

 結果として何とかパンくずリストの導入には成功したが、そこら辺の経緯及び用いた手法については今後のメンテのためにも自身の備忘録も兼ねてまた後日紹介することに。

関連記事Loaderの表示サイズ及び表示記事数変更

 各記事下部に関連タグを表示するプラグイン「関連記事Loader」も、ブログの大型化に伴い若干のサイズ変更及び、ユーザービリティ向上のため表示記事数を5件から倍の10件に変更。

 関連記事Loaderのデザイン変更はテンプレートのCSSではなく、プラグイン内のHTML内の記述を変更するため、若干癖があり少々面倒だったが無事終了。

 ただ、最近では別の方法で関連記事を表示する方法があるらしいので、機会があればそちらの方も試してみたいと思ってみたり。

HTML・CSSの見直し及び新規格の部分的導入

 新規格、つまりはHTML5とCSS3の部分的かつ実験的導入。とはいえ利用しているのはほんの触り程度で、基本は従来通りのHTMLとCSS。
 実は別に運営しているブログで適用したテンプレートが全HTML5&CSS3対応済のもので、従来では難しかった表現や効果がCSSのみで見事に再現可能になっていたため、居ても立ってもいられずにろくに知識もないまま使い始めてしまった次第で(笑)

 HTML5及びCSS3については2014年9月時点ではまだ策定が完了していない規格のため、完全に策定後、当ブログでも徐々に移行していく予定。

サイト概要の改訂・追記

 大幅更新に伴い、サイト概要の改訂及び内容の追記を行った。「サイト」なのは、このブログが他に運営するサイトの運営日記という位置づけから始まったという経緯の名残。

 別段特別なことは書いておらず、極々基本的かつ一般的な内容及び著作権、リンク等に関する内容も明記しているので、ご一読願えればと。

 また本館サイトにはあったものの、当ブログには未設置のままだった問い合わせ用のメールフォームも設置。運営開始後8年ほど経ってようやく設置完了とか……

未送信のままだった返信コメントを発見・送信処理を行う

 これは完全に凡ミス……以前頂いたコメントに対し、肝心の返信を別テキストにて作成したのは良いもののそれを返信するのを完璧に忘れてしまっていた……

 事もあろうに約10ヶ月程過ぎた今回それを運良く発見することが叶ったので、この度改めて返信させていただきました。せっかくコメントを頂いた方には大変な失礼を致しました……申し訳ありませんでした。

更新作業を終えて……

 普段滅多にやらないサイトやブログの大幅更新だが、一度やり出すと性格上ハマりにハマってしまいなかなか抜け出せなくなってしまう……おかげで通常の更新作業も疎かに、ひたすらHTMLとCSSににらみ合う日々が続く羽目になってしまった……。

 今回はプライベートでも色々あって結局何ヶ月もかかってしまったが、次からはまとまった休みに一気に作業ができるように何とか調整してみたい。
 ただ私の運営するブログ類は、見た目はそれぞれに相当カスタマイズを入れて別物にしているものの基本的に同じテンプレートの使い回しなので、他のブログのテンプレート更新は若干楽になるのが唯一の救いかも。



Loading...
コメント
コメントの投稿
【Font & Icon】
管理者にだけ表示を許可する
プロフィール

雪陽炎

Author:雪陽炎
 PCやデジタル機器類いじりの他にも、あれやこれやと趣味を持つ器用貧乏な奈良県民。
 初心者向け兼自身の忘備録としてPC及びデジタル機器関連の情報をまとめてます。

参加ブログランキング

にほんブログ村 PC家電ブログ パソコン・周辺機器へ にほんブログ村 PC家電ブログ 家電・AV機器へ
にほんブログ村 PC家電ブログ PCオーディオへ
人気ブログランキングへ
人気ブログランキングへ
最新記事
スポンサ-ドリンク
最新コメント
最新トラックバック
Amazon
楽天
ブロとも申請フォーム

この人とブロともになる

関連記事Loader

[猫カフェ]futaha

スポンサードリンク
本館/別館サイト
カテゴリ
ブックマーク
最近のチェックリスト / PC関連
最近のチェックリスト / AV関連
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。