WordPressのテーマを流行りのレスポンシブwebデザインのものに変更しました。

レスポンシブwebデザイン?なにそれ美味しいの?って感じですが、小生も今日知った言葉なのです。いろいろ調べ始めた最初のきっかけは、小生のブログのモバイルテーマを何とかしたかったという思いから。このブログの従来の作りとしては、基本的にパソコン用のデザインがまずあり、スマホなどのモバイル環境でも快適に閲覧できるように専用のプラグインを入れていました。

モバイル環境用のプラグインは、WordPressを使用している方のかなりが導入しているであろうWPtouch Mobile Pluginというものです。こんな見た目で、スマホ、タブレットから小生のサイトを閲覧してくださった方には見覚えがあるでしょう。

mp-mobile-theme-01

小生のSIMフリースマホZenfone2で見るとこういう風になります。確かに、縦長画面で画面も狭く、PCに比べ表示情報に限りのある端末では、こんな風に記事タイトルを羅列し、見たい記事を選択する方式はとても良いと思いますし、この点に不満はありません。小生が気になっていたのは記事の最後の部分。「他のエントリーを読み込む…」というリンクが有り、これをタップすると次の記事が10件くらい、その下にずらずらっと表示されるのですが・・・

こんな不満を持ったことはありませんか?最初の画面に10件の記事が表示されています。「他のエントリーを読み込む…」をタップし表示される記事、すなわち11番目~20番目の記事の中から記事11をタップし表示します。記事11を読んで、さあ12番目以降の記事はどんなだったかなと思い、「戻る」ボタンをタップしますよね。普通そうしますよね?するとどうでしょう!記事1~10を表示していた最初の画面に戻ってしまうのです。そのため、記事12以降を確認するには画面を一番下までスワイプし「他のエントリーを読み込む…」を再度タップしなければならないのです。さあ記事20まで確認しました。21番目以降はどうなっているかな。「他のエントリーを読み込む…」をタップし記事21~記事30の見出しを表示。記事21をタップし記事を読む。戻る。また記事1~記事10の表示に戻ってる!!

説明がうまくないかもしれませんが伝わりますでしょうか?小生のブログみたいなこじんまりとしたサイトならまだしも、超有名ブランドのショッピングサイトでもそんなふうになってたりしてるの、何とかなりませんかね?そんな風に思うの、小生だけ!?

とまあそんな動機から、小生のサイトのモバイル表示をなんとかしたくて、いろいろなプラグインを探していました。一つの方法としては、記事の最後に「次の10件を読み込む」とか、ページ番号があってその番号をタップすると次の記事群が表示されるページに飛ぶとか、そんなものを求めていろいろ見てみましたが、なかなか思うようなものがありません。そんな時にこのサイトにたどり着きました。

WPtouch Mobile Pluginにページネーションを導入したい | たかなblog

そうそう、そういうことをやりたいの!でもスタイルシートにタグを書き込むなんてできない。。。
というか、プラグインをカスタマイズするのはおすすめしない、とのこと。え~ん。

WordPressのスマートフォンサイト自動生成プラグイン6選+おまけ – ネタワン

このサイトでこんな記述を見つけた。

レスポンシブWebデザイン
単一のHTMLでPCをはじめ、スマートフォンやタブレット端末に表示を最適化させる手法を「レスポンシブWebデザイン」と呼びます。最近はレスポンシブWebデザイン対応のWordPressテーマも増えてきています。新しいテーマを探している方は、利用してみると良いですよ。

ふむふむ、レスポンシブwebデザインとな。よく分かんないけど、レスポンシブwebデザインを採用したテーマを適用すれば、小生のサイトもレスポンシブwebデザイン化され、特にモバイル環境表示用のプラグインに頼らなくてもスマホ等で見れるということだな!!そしてレスポンシブではなく、レスポンシブなのだな。こんな単語、初めて聞いたよ。

というわけで、WordPressが公式に認証し公開しているテーマの中から、レスポンシブwebデザインに対応し、かつ小生の好みにあったテーマを適用し、できる範囲でカスタマイズしたのが、この画面です!

mp-mobile-theme-02

スマホだとこう見えます。記事の最後にいわゆる「ページング」というものが表示され、各ページにダイレクトに飛べるようになっています。次のページで記事を表示し、戻っても次のページのままというわけです。これはいい!

今回、WordPressのレスポンシブwebデザイン対応テーマを探したわけですが、たぶん20個以上のテーマをインストールし、検証したと思います。その中で最後に残った3つぐらいの中から選んだのは、日本人作者によるBirdTIPSというテーマです。このテーマで叶えられた小生の希望を列挙すると、ヘッダーに横長の画像を表示できること、その画像にブログタイトルやカテゴリー一覧などを重ねて表示できること(つまり縦方向のスペースをムダに消費しないということ)、画像が画面を過度に占有しないこと(写真系のブログによくあるよね)、記事のタイトル、本文、カテゴリーや投稿日が見やすく判別しやすいこと(デザイン性を重視したと吹聴するテーマの中にはこれらが同系色、しかも小さな字で表示されユーザーフレンドリーとはいえないものも多々あり)、ページングが表示されること、などかな。感謝して使わせていただくのと同時に、PC表示についてはもっとこうしたいというアイデアがあるので、自分でカスタマイズできるよう勉強もしたいと思いました。

レスポンシブWebデザインのメリット・デメリットをわかりやすく!解説|Tips*Blog|株式会社コプロシステム

こちら、レスポンシブwebデザインについて分かりやすくまとめられたサイトです。

Responsive Web Design Test Tool

こちらのサイトで、表示サイズをいろいろ変更してレスポンシブwebデザインの動き、表示をチェックすることができます。またモバイル端末の解像度があらかじめプリセットされていて、それを選ぶだけで目的の端末での動作をシミュレートできます。これはいい!!

The Responsinator

上記サイトとサイトの目的は同じですが、こちらにはiPhone、iPad、Nexus5など代表的なモバイル端末のフレームというか筺体があらかじめ表示されており、実機で表示したイメージをよりリアルにシミュレートできます。これはいい!!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)