ブログデザインを変更しました。

MEMO

1年8ヶ月ぶりに玄関ページのイラストを更新しました。今回ははじめてiPadで描いてみました。iPadでのお絵描き、最初は慣れなかったけど、ちょっと楽しくなってきました。今年は何回か更新できたらいいな。

ブログデザイン変更について

そして、今年頭に約5年ぶりとなるブログデザインの変更を行いました。ちなみに変更前の画像はこちら。
210121_1
って、見た目はほとんど変わっていないのですが、使用しているWordPressテーマを変更したんですよね。変更した上で、スタイルシートで元のデザインを再現するという謎なことをやってしまいました。

これには理由があって、今まで2007年のブログ化以降ずっと「Vicuna」というテーマを使用していたのですが、これはとっくの大昔に配布終了しているテーマなんですよね。当時は超メジャーなテーマで、あちこちで導入しているサイトで見かけていたんですが、気がつけば現役で更新しているブログでいまだに使用しているの僕だけなんじゃないか説が出るくらい見かけなくなっていたのでした(配布していないんだから当然ですよね)。
5年前のデザイン変更時にも変更を検討していたのですが、結局むりやり改造して使用する選択をしてしまったので、このまま一生使うことになるのかと思われていたんですが、やっぱりちょっと問題がりました。

というのも、WordPressを構築しているPHPというプログラム言語があるのですが、このテーマだとバージョン5までしか対応していなんですね。今後、WordPressはPHPの最低必須バージョンを7以降にする予定があると発表されているため、このまま同じテーマを使用しているとWordPress自体のバージョンアップができなくなってしまいます。

そこで別のテーマへの変更を検討するんですが、正直デザイン自体はあまり変更したくありません。無数に存在するテーマの中からなるべくイメージが近いものを探すのですが、現在のWordPressシーンに置いて、僕のサイトみたいな旧態依然の日記サイトのようなレイアウトがトレンドから思いっきり外れている関係で、なかなかこれというのが見つかりませんでした。

そこでいくつかメジャーなテーマをピックアップし、今のレイアウトに近い設定にできそうなものを検討した結果、「Luxeritas(ルクセリタス)」というテーマにたどり着き、いろいろとデザインを調整する日々がはじまったのでした。

最初は元のデザインをベースに細かいところをちょこっと変えるだけの予定だったんですが、気がつけば元テーマの完全移植みたいになって今に至るという感じです。Vicunaさん、本当に長い間お世話になりました……。Luxeritasも末永く利用していきたいと思います。

そんなわけでデザイン的にはほぼ変わらずですが、微妙にいくつか変更点があるので自分向けメモとして書いておきます。

サーバーのPHPバージョンを5.6から7.4に変更しました

テーマ変更を機に、PHPバージョンもアップさせました。元々Luxeritasは高速な表示を売りにしているテーマですが、PHPのバージョンアップのおかげもあって、サイトがかなり高速に表示されるようになりました。

https化しました

テーマ変更とはまた別の懸念事項として数年前からやらないといけないと思っていた常時SSL化をこのタイミングで行いました。僕のサイト、ブログ部分の他に通常のHTMLページもいっぱいあるので、面倒だなぁと放置していたのでした。
でもやってみたらなんとか上手くいきました。そんなわけで僕のサイトのURLは以下のように変更されています。
新:https://www.charapit.com/
旧:http://www.charapit.com/
古いURLにアクセスしようとするとちゃんとリダイレクトされるようになっています。

トップページからSNSアイコンがなくなりました

これまではトップページにもエントリーごとの文末にSNSアイコンがありましたが、個別ページのみの表示になりました。Luxeritasではトップページでの個別記事に対するシェアボタンの表示には対応していないので(というかそんなものに対応しているテーマがあるのか謎)、頑張って実装する必要があったのですが、そこまでしないといけない程のものではないかと思い、今回は対応しないことにしました。
また、これまではPCからのアクセス時にはLINEアイコンは表示されないようになっていましたが、常時表示されるようになっています。

関連記事が表示されるようになりました

エントリー個別ページの本文下に関連記事が5本表示されるようになっています。これはLuxeritasの機能をそのまま有効にしたものです。

レスポンシブ設定の変更

これまでもむりやりレスポンシブ化(モバイル対応)していましたが、カラムが変わるタイミング等が変わっているので、デバイスによっては見た目が変わってくると思います(特に小さめのタブレットとか)。これも変更しようとしたけど面倒そうなのでやめました。

フィーチャーフォン非対応化

これまで、Ktai Styleというプラグインを導入してフィーチャーフォン(ガラケー)用レイアウトに対応させていたのですが、無効化しました。このプラグインも更新が止まっていて、PHP7には非対応でしたので。
今手持ちのガラケーでサイトを表示させようとしてみましたが、SSL化の影響か証明書エラーが出て表示できませんでした。

ちなみに、ブログのレイアウトを変更した後にいろんな環境でサイトを表示させてみるというのも一応やっているんですが、Windows、Mac、Androidスマートフォン、iPadの主要ブラウザ(Chrome、Firefox、Edge(新)、Internet Explorer、Safari等)では特に問題なさそうでした。ゲーム機ではPS4では問題なし、Wii UとNew 3DSでは一部変なところがありましたが、通常の閲覧には影響はなさそうでした。PSPではガラケー同様証明書エラーで表示できなくなっていました。

Google reCAPTCHA v3に対応しました

コメントの書き込み時にロボットからの書き込みかどうかを自動で判断してくれる機能を有効化しています。これでAkismetプラグインを入れなくてもスパムをはじいてくれるようになりました。

QRコードの変更

サイドバーにあるQRコード、以前は読み込むとブログのトップページが表示されるようになっていましたが、現在表示しているページへ飛ぶように変更になっています。

ファビコンデザインの変更

ブラウザに表示されるファビコンのデザインを変更しました。目と口が付きました。先日変更したTwitterアイコンとほぼ同じデザインになっています。

PWA(Progressive Web Apps)への対応

正直、僕のサイトが対応しても意味ないような気がしますが、テーマが対応しているので有効化させてみました。スマホのChromeで見たときに上の方の色が変わってたのしー、くらいな感じですが……。

以上かな。いずれも見た目としては地味な変更ですが、PHP7対応とhttps化はいずれはやらないといけないことだったので、やっと対応できて肩の荷が下りた気分です。これで中身の方もどんどん更新していければ言うことなしなんですけどね。ははは……。

Posted by CHARA PIT