loading
 読み込み中...
ウェブの触手-日々の生活に新たなスパイスを-
Home > [Wordpress] > 【Wordpress】記事公開前にスマホでの表示を確認できるResponsive Post Previewが便利
この記事は約5分で読めます。

【Wordpress】記事公開前にスマホでの表示を確認できるResponsive Post Previewが便利

投稿日:2016.4.8

スマホでのサイト閲覧が増えてきた昨今、
スマホで自サイトがどう表示されるのかがとても重要になってきてます。

でもいちいちチェックするのは面倒だし……、

そもそもスマホは持ってないし……。

そんな方のためにPCブラウザ上で
ほぼ実機通りにスマホでのサイト表示が確認できるワードプレスプラグインをご紹介します。

SIRIUSレビューイメージ画像

PCとスマホでは見え方が異なる

レスポンシブウェブデザインでサイトを作っている場合、
PCとスマホでは表示レイアウトが異なるのが一般的です。

その際、PCではバランスよく見えていた文章(テキスト)が
スマホで見たらきっちきち読みにくいとか、
改行の位置が不自然とても見にくいなんていうのがあったりします。

PCで見る分には判別可能だった画像がスマホで見たら小っちゃすぎて
何の画像かわからなかったというのもあるでしょうね。

仮にいま使っているテーマが”スマホ対応”とうたっていても、
あくまでスマホで見やすいようにレイアウト変換する機能を有しているということであって、
すべての記事が見やすく変換されるというわけではないんですよね。

そこは書き手のクセによって見やすくも見づらくもなる危険性をはらんでいます。

 

今やスマホでのサイト閲覧はかなり増えてきてます。

どちらかというとスマホでの表示確認を最優先にすべき時代であるとも言えます。

当ブログはサイト構築上のハウツーものの記事が多いので
スマホよりはまだPCでの閲覧が多いんですが、
それでもつい先日、その比率がとうとう半々にまでなりました。

これが女子向けサイトや物販アフィリサイトなんかだと
どうしたってスマホでの閲覧比率が多くなりますわね。

(私が運営する動物系のブログなんかはPC3に対しスマホ7の割合です)

そんなときスマホ上での表示をテーマ任せにしていて、
ある日なにげに自分のサイトをスマホで見てみたら……
とても見にくいサイトだったなんてことも。

サイト訪問者数が徐々に減っていったのは実はそれが原因だったなんて話は
大げさでもなんでもなかったりするんです。

これがもしもアフィリサイトなら収益にも影響してくる大きな問題ですよ。

 

スポンサーリンク

Responsive Post Preview

スマホでの表示確認ですが、スマホを持ってるなら
記事を公開してからあらためてスマホで確認して
それから修正すればいいという考え方ももちろんあります。

でもいちいちスマホで確認するのは面倒だし、
だいいち一度きちっと作り上げた文章をスマホで確認しながら逐一書き直していくのは
時間がかかって効率が悪すぎでしょ。

それにみんながみんなスマホを持っているとも限りません。

できれば記事公開前に
PCのブラウザ上で”スマホでの表示”をチェックできれば
こんな便利なことはないんじゃないですか。

そこで登場するのが「Responsive Post Preview」というワードプレスプラグインです。

このプラグインをインストールして有効化すると、
プレビューボタンのすぐ下にスマホとタブレットのアイコンが表示されるようになります。

キャプチャ画像

特に調整項目もありません。インストールするだけでOKです。

ただし一度記事を書いて「下書き保存」などを実行しないとアイコンは表示されません。

使い方

たとえば記事を書いて「下書き保存」をします。

そこで”プレビュー”をクリックすればPCでの表示が確認できます。

一方、上の画像の2つのアイコンの左側をクリックすれば
スマホでの表示が確認できます。右はタブレット表示チェック用です。

スマホアイコンをクリックすると
別タブでこんな↓感じで表示されます。

キャプチャ画像

こうして実際にスマホで確認することなく
記事公開前にPCとスマホでの表示チェックが同時にできちゃうんです。

あとは最終チェックを済ませて”公開”ボタンをクリックするだけ。

これは重宝しますね。

 

若干の修正

気になるのはスマホ実機での表示とPCブラウザ上でのスマホ表示が
どの程度一致してるかという点です。

実際に比較してみました。

左がPC上でのキャプチャ画像で右が実機(iPhone6)でのキャプチャ画像です。

キャプチャ画像

レイアウト自体は確かにスマホ用に最適化されてはいるんですが、
幅の違いでしょうか、PCの方はレイアウトが若干崩れちゃってますね。

これは(おそらくですが)上の画像の青丸で囲った縦スクロールバーの分だけ
幅が狭くなってしまったからだと思うんですよ。

PC側の赤丸で囲った”スマホはコチラ”というのは、スクリプトでスマホ側には表示されないように設定してるんですが、そもそもがPC上での表示なのでそのまま表示されちゃったようです。

そこで設定ファイルを少し修正してみることにします。

管理画面→プラグイン→responsive-post-preview”編集”をクリックします。

キャプチャ画像

途中”320px”という数値があるのでそこを”390px”に変えて「ファイルを更新」をクリックします。

キャプチャ画像

これで再度試してみると……。
iPhoneでの実機表示とほぼ一致しました。

キャプチャ画像

別のパートでも比較してみました。

キャプチャ画像

いい感じですね。

デメリットとしてはデバイスごとの指定ができないのでどれか一つに絞っての設定になってしまうということでしょうか。

たとえば私の場合は”iPhone6での表示チェック”を前提としてます。
しかしこのあとでも書いてますが、デバイスが変わってもそんなに大きな表示差はでないと思うので、スマホ表示チェックツールとしては十分使えるレベルかと思います。

ちなみにタブレットの方は768→780にするとiPadでほぼ同じように表示されました。ただこの数値も使用テーマによって変わってくるかもしれません。
その辺は実機で確認できるときに忘れずにチェックしておいた方がいいでしょう。

修正した数値は必ずメモして残しておきましょう。コアファイルを変更しているのでプラグインのアップデート時は設定が元に戻っちゃいますから。

これまでの”iPhone6用修正設定”でアンドロイド機でも比較してみました。

使用機種はXperiaZ4(ver5.0.2)です。

キャプチャ画像

こちらも問題ないレベルと言えますね。

以上です。

記事はお役にたてましたか?

記事にご興味をもっていただけましたら
下のソーシャルボタンで共有していただけると嬉しいです^^

 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

スポンサーリンク

おススメTCDテーマ

WordPressテーマ「Reviewer (TCD026)」 

コメント(0件)

コメントをどうぞ

入力いただいたメールアドレスは公開されません。
個人情報などを記入された場合、投稿いただいたコメントの該当箇所を編集して公開するか、もしくは非公開にします。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

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

先頭へ