サイトリニューアル

  • Twitter
  • Facebook
  • Pinterest
  • Hatena
  • instagram
  • YouTube

...って、見た目には大きく変わっていませんが…。

ブログ以外の部屋は、2014年以降の更新が止まっていたので大幅に減築しました。(メニューが少なくなって楽できるとか、手抜きとかそんな事はありません)

一応、モバイル対応としましたが、Android のスマホでしか表示・動作確認をしていないので、もしかしたらiOS端末では表示が乱れるかもしれません。

WordPress

これまで WordPress 4.9.x を使っていましたが、リニューアルに合わせて最新の 5.3.x に入れ替えました。

WordPress 5.x からは編集機能が強化されたビジュアルエディターとなり、更に 5.2 からはエラーレポート機能が実装された関係で、自分の環境で最も重要なプラグインのひとつである PHP Code For Posts v.2.2.2.1 が有効化されていると編集機能がNGとなり、一部のページ表示にもエラーが出ました。

この問題は WordPress から提供されているプラグインの Classic Editor をインストールして回避しましたが、ビジュアルエディターもエラーレポート機能も個人的にはアレかなと…。

それよりも開発が止まってしまった PHP Code For Posts の機能を WordPress 本体に実装してくれたほうが、「数百万人というお客様方が大変喜んでおります。」という事になるような気がするのは私だけでしょうか…(゚ー゚*)。oO

WPのプラグインは簡単・便利なのですが、必ずしもWP本体のバージョンアップに合わせてプラグインの互換性が保持され続けるとは限らないので必要最低限のモノだけをインストールするようにしています。

TwentyTen

WPのバージョンアップに合わせてテンプレートの TwentyTen も Ver.1.3 から 最新の Ver.2.9 にバージョンアップしました。(オリジナルの2010の面影がありませんが元ネタは間違いなく2010です)

前からバージョンアップしなきゃ…とは思っていたのですが、中のコードを無計画に直接イジっていたので、ついつい先送りにしていました。(^^;

いっその事、新しいテンプレを使うか…とも考えたのですが、従来の構成に馴染んでいただいているのに敢えて変える必要はないかとそのまま TwentyTen としました。

イジったコードもできるだけ WordPressの標準関数を使うように書き直し、加えて WordPress のバージョンも上げたからなのか、ページ表示が軽くなった…かな?

モバイル対応

遅巻きながらサイト全体をモバイル対応としました。

ブログをモバイル対応にするには文字の大きさなど細かい調整も大変でしたが、サイドバー領域に表示されるカテゴリー一覧をどうするか?に一番時間を費やしました。

結局、jQueryを使って画面右に表示されるタブをタップするとカテゴリー一覧が表示されるようにしてみましたが、これは下記サイトの解説とコードを参考にさせていただき、なんとか組み込む事ができました。ありがとうございました。

Gimmick logjQuery-横から出てくるスライドメニュー

8bit モノづくりブログ【怖くないJavaScript + jQuery】折りたためるサイドメニュー

今回はひとつのサイドメニューとしましたが、理論的には複数のサイドメニューを実装する事も可能なので今後に活かしたいと思います。

SVG画像

メインメニューやSNSアイコンにはSVG形式の画像を使用しました。

SNSアイコンは下記サイトで公開されているデータを使用させていただきました。

GitHubtombryan/social-icon-font

SVG画像なので拡大・縮小しても画像が乱れず CSS からもコントロールしやすいので使ってみましたが、異なるデバイスでの閲覧・表示を前提としたWEBサイトでは非常に便利な画像形式かと思います。

まとめ

なんだかんだで、リニューアル作業に1ヶ月近く要してしまいましたが、自分でやりたかった事は一通りできました。

WEB技術も日進月歩であり作業開始時には浦島太郎の如し…。
加えて PHP や JavaScript のプログラミングもご無沙汰だったので勘を取り戻すのが大変でした。(自分の書いたコードの意味が不明、解読不能ってのは末期)

フラッシュライトやプログラミングの他にもヤリたい事はイッパイあるのに時間が無い…というのはやっぱり言い訳で、自分の時間の使い方や取り組む姿勢が問題なのかなと、せめて心懸けぐらいは殊勝でいたいと思います。(何だソレ…w)

レビュー記事もボチボチ書いて行きますので、今後ともよろしくお願いします。(//∇//)

 

カテゴリー: CSS, HTML, JavaScript, PHP, プログラミング   タグ: ,   この投稿のパーマリンク
 

コメント投稿