最適化と調整を行いました

当サイトの最適化と調整を行いました。それぞれ説明します。

  • :一部修正しました

最適化

にAokashi Homeはリニューアルをしました。しかし、リッチエディタ(見出しや表など、テキストだけでは表現しづらい部分をカバーした扱いやすいエディタ)の仕様で使うはずのタグが消去されてしまいました。解決策として、リッチエディタの設定変更、別のリッチエディタのインストールを行いましたが、システム部分に余計なファイルが溜まってしまうことになり、最適化(再インストール)することになりました。

今回の最適化でコンテンツが削除されることはありません。

調整

Aokashi Homeは以下の点で調整を行いました。

  • faviconのlink要素にあるsize属性をsizes属性に修正(文法エラー発生のため)
  • ヘッダーのリンク先を各コンテンツのトップページに変更した
    例えばWWAの場合、WWAのトップページへリンクするようになった
  • トップページのヘッダーのリンクを消去した
  • ヘッダーのタイトルを変更した(コンテンツ名が付くようになった)
  • ヘッダーの高さを5文字分(半分)に縮めた→より、さらに縮めました
    それに伴って、ヘッダーにあった背景画像を一部省略しています
    また、スマートフォンといった幅の狭い環境はそのままにしています→より、幅に関わらずヘッダーの高さを統一しました
  • トップページにあったarticle要素を消去した
  • ページタイトルの下にあるパンくずリストや投稿日付を水平線の上に移動した
  • 投稿日付にあった時刻の部分を省略した
  • メインメニュー内のテキストを少し小さくした
  • メニューを左に配置した際の幅を縮めた→より、さらに縮めました
  • メインメニュー上部にあったタイトルを省略した→より、違う形で復活しました
    また、グラデーションも省略しています
  • 404ページ内のメッセージを修正した

おまけ

TemplateCode.gif
クリックで拡大できます

ページが複数あって、更に表示の仕組みも多岐に渡るため、テンプレートのコードはこのように複雑になっています。特にスタイルシートやヘッダーの部分については複雑になりがちです。ここまでくると負荷がかかるんじゃないかな・・・

追加調整

2015年8月12日

  • スマートフォンといった幅の狭い環境で、ヘッダーのメニューをすべて表示するようにした
    今までは「コンテンツ」というボタンでまとめていました("おまけ"でバレてるかな・・・)
    また、操作しやすいように、高さも増やしています
  • 混乱を招くため、ヘッダーのタイトルとリンク先の仕様を元に戻した
    ヘッダーのタイトルがトップページのリンクの役割を果たすようになったため、ヘッダーのメニューにHomeを省略した
  • サイドバーのメニューにタイトルを追加した
    また、そのコンテンツのトップページへリンクが繋がっています
  • サイドバーの余白を減らした
  • パンくずリストをリスト1つ分として扱っていたものを複数分扱うようにした
    具体的に言うと、li要素1つ(1項目)だったものを2つ以上(複数項目)に分けたということです

このように、今まで使って不便に思った点を改善しました。

2015年8月13日

  • フッター内のテキストを少し小さくした
  • フッターメニューを追加
    基本的な挙動はヘッダーのメニューと同じです
  • 一番下にスクロールしてもボタンで隠れないように、ボタン用の領域を設けた
    CSSのborderを利用して無理やり領域を作っています

しかし、スマートフォンでヘッダーやフッターのメニューを見るとわかるかもしれませんが、フリックしないとすべての内容が見れないため、初見の方は分かりづらいかもしれません。

2015年8月14日

  • テンプレートの下敷き(htmlタグ)の背景色をグレー(#808080)に変更
    ボタン用の領域を設けたため、それに応じた対策です
  • 内容重視で、サイドバーの幅をさらに縮めた
  • 省略したサイドバーのグラデーションを復活した→負荷の軽減を目的に、2015年9月21日より、省略しました
  • 資料のページに目次を設けた
  • テーブルの上下に忘れていた余白を設けた
  • 404ページにheaderタグとパンくずリストを追加

2015年8月15日

  • ボタン用の領域で設けたborderの値をbody要素に移行
  • メニューに今いるページの名前がある場合、その名前が太字になった
  • 別のページに子要素のページが有る場合、メニューにそのページのリンクを表示しないようにした→2015年9月22日より、元に戻しました
  • 資料の一部ページで、脚注を試験的に実装(MODX特別のプラグインは実装せず、直接記述しています)
  • MODX 1.0.14J-r9で追加したPHx記法をフル活用した
    当サイトのアップデートが遅いことに悔しかったために行った措置です
    "おまけ"にあるような複雑なコードは変わりませんが、文字数の削減に貢献出来ました
  • PHx記法の活用により、お問い合わせのメールアドレスの欄を文字に変更した
  • コミュニティにセキュリティに関する警告を追記
  • WWA素材のお約束を変更

4日間連続の更新でした。ここまで見るとリニューアル直後のテンプレートがここまで使いづらかったのかと感じています。こういった、地道な更新をわざわざ書いているのは数年後、どのように行ったか忘れないように記録をしているためです。