ブログの記事を作成する時にスマホ表示でプレビューを確認したい!

そういう人も多いのではないでしょうか?

しかし、WordPressの記事作成画面プレビューでは、パソコンで表示した時のプレビュー画面しか表示できません。

そこで今回は、スマホ表示でプレビュー確認できる『Responsive Post Preview』の使い方をご説明します。

スマホ表示でプレビューを確認するのはとても重要!

今の世の中、ブログをスマホで見る人はとても多いです。

私の運営しているブログでも、75~85%くらいの人がスマホでブログを見てくれています。

ですので、自分の記事がスマホでどう表示されているか確認することは非常に重要なんです。

そのスマホ表示されたプレビューを参考に記事を修正していくことで、より読みやすい記事を書くことができます。

『Responsive Post Preview』の使い方

まずは『Responsive Post Preview』のPプラグインをインストールし、有効化して下さい。

プラグインのインストール、有効化の流れは下記リンクでも詳しく解説しています。

WPCore解説

記事を投稿しながら確認していただくとスムーズです。

1.「投稿」→「新規追加」で記事作成の画面へ

2.記事を「下書きとして保存」する

スマホ表示でプレビューを確認したい場合は、一度「下書きとして保存」をしないといけません。

3.「スマホのアイコン」をクリック

一度「下書きとして保存」をするとスマホとタブレットのアイコンが出現します。

後はそれをクリックすることで、スマホ表示のプレビューが確認できます。

記事に動画を貼る時にスマホでもはみ出さないようにする方法

YouTubeなどの動画を貼る時に気をつけなければならないのが、スマホ画面で見た時に動画がはみ出していないかどうかです。

ご覧の通り、私のブログの記事には毎回音楽の動画を貼っています。

ですが、YouTubeの埋め込みコードをそのまま貼ると、スマホで見た時に表示がおかしくなってしまいます。

そこでYouTubeの埋め込みコードに

style="max-width:100%;

を追加して下さい。

このコードは、設定した大きさが画面の大きさを超える場合、表示している画面内での100%の大きさで表示をしてくれるコードです。

ですので、スマホで表示したときにスマホで表示できる100%に自動で合わせてくれるというわけですね。

追加する位置はここです。

<iframe width="560" height="315" style="max-width: 100%;" src="https://www.youtube.com/embed/WF8dt1hpZ9M?rel=0" frameborder="0" allowfullscreen="allowfullscreen" data-mce-fragment="1"></iframe>

動画については、合わせてこちらの記事も読んでみて下さい。

アドセンスブログに動画を貼るのは有効?

他のプラグインの解説は下記リンクよりどうぞ。

おすすめプラグイン一覧

Today's Tune!!

Holidays/Miami Horror

晴れた日の休日に車を走らせながら聞きたい曲です。

このブログのテーマ曲と言っても過言ではないです(笑)

この記事が気に入ったら
フォローしよう

最新情報をお届けします

おすすめの記事