2018-06-07サイトやブログを運営する上で、うっかりしがちなのが「携帯やスマホでどう見えるか」の確認です。「パソコンはないけど、スマホは勿論持ってます」っていう人がどんどん増えている中、このスマホなどモバイル機器でブログやサイトがどう見えるかの確認(モバイル表示の確認)は必須ともなっています。Chromeなど、お使いのブラウザで簡単に確認ができたりするんですね。そもそもこのモバイル表示に対応しているかどうか(スマホなどで正しく見えるようになっているかどうか)は検索順位やアドセンスの審査通過にも非常に大きく影響してきます。今回のまとめグーグルクロームでスマホ表示確認ここではブラウザは「グーグルクローム」を使っての確認の仕方を見てみます。グーグルクロームのインストールやそのメリットなどは以下の記事を参考にしてみてください。Chrome!デザインカスタマイズやアフィリエイトで力を発揮する最速ブラウザインターネットでいろいろと検索する時に使うブラウザ。JINのブロググーグルクロームを使ってモバイル表示を確認するのは非常に簡単で、手順は以下の2つだけ。1)グーグルクロームの開発者ツールを起動する2)モバイル表示切り替えのアイコンをクリックでは具体的に見てみましょう。グーグルクロームの開発者ツールを起動するまず確認したいブログやサイトをグーグルクロームで表示し、それ上で右クリックしてメニューを表示します。↓↓↓↓↓↓この表示されたメニューから、一番下あたりの「検証」をクリックしてグーグルの開発者ツール(デベロッパーツール)を表示します。開発者ツール(デベロッパーツール)は「F12」キーで一発起動もできます↓↓↓↓↓↓モバイル表示切り替えのアイコンをクリック続いて、表示された開発者ツールの一番上から、四角が重なったアイコンをクリック!以上を行うと、左側に普通にパソコン表示されていたサイトが、以下のようにモバイル表示となってブラウザ上で確認できる!というわけですね。上に、スマホなどのモバイル表示の種類とその画面の大きさ(この場合ではiPhone4で、画面の大きさは320×400)が表示されます。ここで「iPhone4」をクリックすると、以下のように他に表示を確認したいモバイル機器が選択できるんですね。miniなどは一通りどういった表示になるか見てみる、ということは必要だと思います。設定の追加もできる!実は設定の追加(確認したい画面の大きさの追加)もできます。上の画面にある表示の一番下の「Edit...」をクリックすると...これでもか、というぐらいに色々スマホやタブレットが出てきます(笑)上図のように他にも一杯モバイル機器が登録されているんですね。device」をクリックすることで選択項目の追加ができたりします。あまりに多くて目が回りますが、基本的にはよく利用されているiPhoneシリーズなどを確認する、ということで良いかと思います。いやー、とっても便利ですね。^-^)モバイル表示から元に戻すには以上のようにしてスマホなどのモバイル表示を確認後、パソコンの表示に戻したい!という場合には、以下のようにすればOKです。元の表示に戻すには、1始めにクリックした「四角が重なったアイコン」をクリック、2または、グーグルの開発者ツール自体を閉じるスマホ表示とは異なりますが、記事を実際に投稿する前にいろいろなブラウザで見え方を確認しておきたい、という場合があります。いった場合には、以下の記事を参照してみてください。>ワードプレスで記事投稿前でもプレビュー表示を共有して見る方法!プラグイン「外部確認」が超便利ワードプレスで記事を書いていると、実際に投稿する前の下書きを誰か他の人に確認して欲しい、という場合があったりします。そんな場合には、意を決して実際に投稿して記事のURLを確認して欲しい第三者に送るか、プレビュー画面をキャプチャーしてその画像を送って見てもらう、なんてことをしたりします。JINのブログスマホ表示とモバイルフレンドリーテストスマホ表示の確認の必要性スマホなどのモバイル表示の確認がなぜ必要か、は言うまでもなく、スマホで記事が検索されて見られる場合が非常に多くなった、ということです。実はスマホ表示に対応していなかった!なんてことになっていないように1度は必ず確認してみてくださいね。スマホ表示はグーグルでは「モバイル表示」(スマホやタブレットなどのモバイル機器における表示)といってますが、このモバイル表示に対応していない、とグーグルで判断されると、検索結果にも大きく影響してきます。ワードプレスを使っている場合では、特にテーマを変えた時や、テーマのバージョンアップをした、等の場合、またワードプレス以外では、何かレイアウトに関して変更を加えた場合では、あらためてグーグルから見て「モバイル表示」に対応している、と認識されるブログやサイトになっているかの確認が必要です。モバイルフレンドリーテストグーグルから見て「モバイル表示に対応しているかどうか」の確認は、以下のページで簡単に確認ができます。テストこのツールでこのサイト(tabibitojin.com)をテストすると以下のような表示になります。フレンドリーです」と、ハッキリ言ってくれるところが嬉しいですね。^-^)ちなみに、以前SmartSliderというプラグインで画像のスライドショー的なモノをつけてましたが、このプラグインを使うと、モバイルフレンドリーではない、と言われてしまいました。(ので現状は使うのを控えてたりしてます。^-^;))ブラウザの幅を縮めて表示しても普通に表示される、特に問題ないはずなのに、モバイルフレンドリーテストで「モバイルフレンドリーではない」と表示される場合には、画像表示系のプラグインを見直すのも良いですね。今回のまとめスマホなどの表示確認は、グーグルクロームを利用すればパソコン上でも確認できる確認の仕方は、右クリックで開発者ツールを立ち上げて、それ用のアイコンをクリックするだけこの開発者ツールでは、いろいろな種類のモバイル機器が選択できる最低限、良く使われているiPhoneシリーズなどは確認する実際にお手持ちのスマホやタブレットで確認するのも良いですが、これが実は結構手間で面倒なんですね。行い、その分より良い記事作成、サイト作りに時間をかけるようにしましょうね。ネットでの収益化については、以下のメルマガに登録してみてください。AMJINさん、おはようございます。ブックマークしました。このスマホで検証できるという方法は、きょうから活用します。ありがとうございます~。読ませていただきます。あ、Stingerでしょうか、テーマもいいですね。PMコメントありがとうございます。お役に立てたようで嬉しいです。^-^)このスマホ表示の確認の仕方、ものすごく簡単にできるので、ジャンジャン活用してみてくださいね。テーマはその通り、Stingerです。お気に入りのテーマの1つです。date*日本語が含まれない投稿は無視されますのでご注意ください。JIN】コンサルタント・コピーライター・ウェブデザイナー、プランナーとして活動中。本格的に取り組みだした2年目2016年には年収1000万円突破、2017年5月に自動化で月収170万突破。多忙な時期を過ごすが、自由に憧れ退職、海外移住し、ネットビジネスの道へ入る。現在は海外にいながら自分らしく生きるとは何かを追求するとともに、主に日本国内、またその他海外に住むネットで収入を得たい方に対し、いかにネットビジネスを成功に導き、時間や場所、不要な人間関係にとらわれず自由を得る人、会社、社会に依存しないで自由に稼ぐ人を増やすことに全力を注いでいます。!!初心者だった頃「こういったものが欲しい!」と心に描いていた想いを形に制作した、ネットビジネス学習の決定版!知識ゼロ、これから始める初心者の方、年齢、性別問わず、初歩の初歩からどなたにも楽しみながら学べるコンテンツ。月収10万、そしてさらにそれ以上を目指せる知識を学べます。Cruise』を完全無料で手に入れる!!メルマガのご案内に説明動画があります。運営者情報プライバシーポリシーお問い合わせ受講者なんと2500名突破!正しい努力は必ず報われる。稼げないのは努力の仕方が違うから。評判のメールマガジンで、一人でも生きていける力、稼げる力を身に付ける。