レスポンシブデザインなのかスマホ対応プラグインなのか・・・いや、そもそもそんな必要はなかった！

当ブログ「電気通信主任技術者のススメ」では、訪問者の1割以上がモバイルデバイスからのアクセスになっていますので、以前からブログのスマホ対応を試みていました。

でも少々不満がありました。

タブレットなどディスプレイの比較的大きなモバイルデバイスであれば、当ブログのコンテンツを正常に閲覧することができるんだけど、スマホなどで閲覧するとコンテンツが一部欠損してしまう・・・

この電気通信主任技術者のススメというブログに、スマホなどでアクセスするとスマホ専用のレイアウト表示になるWordpressのプラグイン(WPtouch)を利用しているのですが、HTMLのテーブルタグの右端のあたりが少し隠れてしまう。

モバイルデバイスからのアクセスが全体の1割程度とはいっても、せっかく私のコンテンツに到達していただいたのだから、正常に記事を読めるようにしたかったんです。

プラグインで正常に表示が出来ないのなら、一からレスポンシブデザインを構築しようかとも思ったんだけど、如何せん時間もないし今まで放置していたんです。

・・・で、最近になって気付いたんだけどWPtouchでテーブルの右端が欠損してしまうのは実はプラグインのせいではなくて、私のテーブルタグの記述間違いだったんですよ！
(正直笑えません…)

何を間違えていたのかといいますと、まずテーブル全体の横幅を460PXとして内部セルの横幅を左側セルを230PXとして右側セルの横幅を250PXとしていました！

単純に足し算を間違えていたんですね。

230＋250は当然480なんだけど、計算を間違えたのかタイプミスなのか460にしていたために不具合を起こしていたんです。

・・・さて

原因は分かったものの、今まで歴代更新してきたすべての記事が計算間違いをしているんだから、修正をしようにも膨大な量の手直しが必要となります。

一記事ずつ修正していたら何日かかる事やら

そんな面倒なことはできないので、過去記事を一括で修正できるプラグインは無いのかな・・・と探していたら、やっぱりありましたね。

プラグイン名はSearch Regexです。

このプラグインはインストールしたらあとは置換を実行するだけですべての記事の修正を行ってくれます。

プラグインのインストールが完了すると、Adminページのサイドバーから「ツール」⇒「Search Regex」をクリックして、【Search pattern】に検索語を入力し、【Replace pattern】に置き換える語を入力したら「Replace & Save」をクリック！

ものの数秒で全ての記事の書き換えたい部分を更新できました！

まぁ、実際このプラグインはデータベースを直接操作する類のプラグインですので、いきなり実行するのは怖いのでバックアップを取ってから実行したんですけどね。
(バックアップはBackWPupを使用)

おかげさまで、なんとか全ての記事の修正が完了しましたので、これで何とかレスポンシブなものを作らなくてもWPtouchでスマホ対応をやっていけそうです。

私自身にタップリと空き時間が捻出できれば、プラグインに頼らないレスポンシブデザインにもチャレンジしたいんだけど、今の時点ではこれで満足！