FC2ブログ

PCでスマートフォン用のWebページを表示確認する

|ω・`)ノ ヤァ

近年、ブログに訪問してくれる方でスマホで見てる方の比率が増えてきてましてね
というわけで、少しでも見やすいようにと
先日スマホ用のテンプレを変更しました。(PCで見てる方には違いがわかりません)

今までは、スマホで見るとこういうトップページでした
FC2ブログのスマホテンプレのデフォルトなのかな
変更したテンプレはのちほど出します
20170925004.jpg





ようはPCでブログ書いて、表示されてる記事と、スマホでは表示方法が違うので
スマホユーザーによっては、すごく読みにくいブログだったりすることがあるんですね

まぁ手持ちのスマホで確認するのも当然ひとつの手ですが
スマホがない場合や、記事をPCで書いてすぐ確認できる方法があるのです

やり方は、ブラウザがグーグルクロームであることが絶対条件なので導入します

Google Chrome は、最新のウェブ環境に対応した高速で安全な無料のウェブブラウザです。パソコンでぜひご利用ください

IEを差し置いてここ数年ずっとシェア1位のブラウザですね
個人的にもセキュリティの面や動作の面においても他のブラウザより圧倒的におすすめです

クロームにはアドオンと呼ばれる拡張機能がありまして
自分好みの操作性や機能にカスタマイズできるのですが
そのアドオンにスマホ表示できるものがあるのですよ

それが↓  当然ブラウザはクロームで開かないと駄目ですよ
MobileLayouter - Chrome ウェブストア - Google

画像だとすでに追加済み状態ですが、初めての方は緑のとこが「追加するに」
なってると思いますのでクリックすれば大丈夫です
ちなみに無料です
20170925001.jpg



では実際に使ってみましょう
私のブログの場合ブラウザから見るとこんな表示ですが
右上の赤矢印したとこに、MLてアイコンがありますよね
それがアドオンのMobileLayouterです
20170925002.jpg


そのMLをポチっと押して
項目でiPhoneを選びますと

このように表示されます
この画面はPCからのスクリーンショットですよ
これが今回、変更したスマホ用のテンプレですね
20170925003.jpg


記事のほうを確認してみます
あえてPCブラウザ全画面で撮影したけど
実際にスマホで見える範囲が、赤の矢印のとこの縦の線までです
2017y09m24d_190715259.jpg

つまりスマホだとyoutubeのプレイヤーがはみ出してますね(;^ω^)
そして黒帯のSponsoredという部分は、スクロール型の広告ですね

広告はめっちゃウザイけど
FC2 を無料で使用しているのでこれはしょうがないですね
消すには有料にしないと(ノ∀`)タハー

しかしYoutubeの見え方は改善できるはずです
どうしてスマホだと表示がはみ出てしまうかというと
Youtubeの埋め込みリンクがレスポンシブ対応していないとのことです

レスポンシブとは画面サイズによって自動で最適なサイズに拡大縮小してくれる機能ですね
なのでYoutubeをレスポンシブ対応します

方法はテンプレにコード記載したりやり方はいろいろあるようですが
今回私が、試したのは
リンクをレスポンシブ対応に変換してくれるコードを作成するサイトを利用しました
URLいれてEmbed押して生成されたコードをブログに貼るだけですね
そのサイト→embedresponsively


またまたPC上での確認ですが
ちゃんと見切れず表示されてますね
スマホでも確認しましたが完璧です( ^ω^)
a20170925001.jpg



と、いった具合にこの機能を使えば
自分のブログの改善点などが見えてくるかもしませんね
にほんブログ村 オヤジ日記ブログへ
にほんブログ村
スポンサーサイト



にほんブログ村 音楽ブログへ
にほんブログ村 音楽ブログ ギターへ

Comment 0

There are no comments yet.

Leave a comment