スマホからのブログの見た目をPCで確認できるChromeの機能「デベロッパーツール」が便利

シェアする

当ブログは、スマートフォン(以下スマホ)からの閲覧率が年々増え、2015年現在は50パーセントを超えています。

私は、「スマホ対応」の方法として「レスポンシブ」という戦慄の技術(ブラウザの大きさに合わせてサイトデザインが変わる)があることを知った2013年から、「スマホ対応」ということについてずっと考えてきました。

スポンサーリンク

スマホを持っていないゆえに

スマホからの閲覧者さんにとって、一体、どういうサイトが見やすいんだろう?

私はスマホを持っていないので、そのへんが余計にわかりませんでした。

迷ったまま、スマホ対応はせず2015年まで来たのですが、ついに、先月の終わりに当ブログをスマホ対応させてみました

パソコンで見たときは「記事+サイドバー」ですが、スマホで見たときは「記事だけ」になっている……はず!

スマホからの見た目をパソコンで確認

しかしスマホからの見た目を実際に確認しないと、なんとなく落ち着かないなあ……。どうなっているのかなあ……。

と思って色々調べていると、Chrome(クローム)というブラウザに「スマホからの見た目チェック機能(デベロッパーツール)」があることが判明!

google chrome スマホチェック

↑早速、私のパソコンにインストールしてある「Chrome」を起動!

スマホでの見た目をチェックしたいサイト(今回は当ブログ)に移動し、キーボードの「F12」を押します。

google chrome スマホチェック

↑出てきた表示の右上にあるこのスマホアイコンをクリック。

google chrome スマホチェック

↑左上の「Device」で見た目をチェックしたい機種を選択。

google chrome デベロッパーツールでスマホからの見た目をチェック

↑すると! 小さな画面内に収まった当ブログのトップページが!

google chrome スマホチェック

↑おお~! スマホで見るとこんな風に表示されるのか~~!(表示されているのは昨日の記事です。↓)

https://blog.m-biotics.com/archives/8824.html

見た目がわかるだけでなく、実際にスクロールやクリックもできるので、スマホの使い勝手というものも想像できてとても参考になりました。

便利な機能

いや~、グーグルさん、便利な機能を開発してくださってありがとう。

インターネット界隈は移り変わりが激しすぎて、時代についていくのが大変ですが(ほとんどついていけていないですが)、当ブログをスマホ対応させたことでちょっと時流に乗れた気分です。

私が運営している他のサイトも、少しずつスマホ対応していけたら良いなと思っています。

追記:2025年、ついにガラケーからスマホに移行

2025年追記:大学時代からずーっとガラケーを使っていて、最後(2008年)に機種変したガラケーN705iを17年間も使い続けてきたのですが、2025年、ついにスマホに移行しました!(詳細記事はこちら)

これからはデベロッパーツールだけでなく実機でも確認できるので心強いです。

スポンサーリンク

シェアする

フォローする

関連記事

Chrome(クローム)がエラーで新しい困り顔イラスト発見

Chrome(クローム)でスマホでのサイトの見た目をチェックしていたら、エラーが起きてページが表示されなくなりました。そのとき、今まで見たことのない困り顔イラストが!

記事を読む

レスポンシブ例

新たなwebデザイン技術「レスポンシブ」に戦慄~画面サイズに応じてデザインが自動的に変わる

最近、webデザイン関連情報で目にする「レスポンシブ」というキーワード。それって何だろうと思って調べてみたら、最先端すぎてびっくり!

記事を読む

パソコンが重たいときにChrome(クローム)を立ち上げようとしたら出てくる妙なイラストの謎を解く

スマホでのサイトの見た目をチェックしたいときに便利なブラウザChrome(クローム)。しかしこれが、パソコンが重たいと「応答がありません」となる。そこで表示される妙なイラストについて考えてみました。

記事を読む

携帯電話のデータをパソコンに移すマイクロSDカード

携帯電話の画像や動画データをパソコンに移すため、マイクロSDカード(アダプタ付き)というものを購入しました。

記事を読む

【詐欺SMS】Amazonから「使用制限ポリシーの違反が検出されました」というSMSが携帯に届くがフィッシング詐欺だった

母の携帯(ガラケー)にAmazon名義で「使用制限ポリシーの違反が検出された」とのSMSが届きました。見るからにフィッシング詐欺でしたがやはりそう。海外発信だったので国際SMS拒否設定をしました。

記事を読む

いずれサイトを作りたいという読者さんからのメール~サイト作りの思い出

読者さんから「いずれサイトを作りたい」というメールをいただきました。サイト作りは面白いですよね。

記事を読む

ガラケーからスマホ

17年間使ったガラケー(N705i)からスマホに移行してスマホデビュー~ネットがいつでもできてすごい。カメラ性能が劇的向上

同じガラケー(N705i)を17年間使い続けてきたのですが、ついにスマホ(Galaxy A25 5G)に移行しました。スマホはいつでもネットができるのが良い!

記事を読む

【NTTドコモ】dアカウントに不正ログインされそうになったが二段階認証に救われた

私の携帯に、ドコモからSMSが届きました。6桁の数字と、「dアカウントのセキュリティコードです」という文言。どうやら不正ログインされそうになっていたようですが、二段階認証のおかげで被害を免れました。

記事を読む

自サイトに接続できない、表示もできないで全身から血の気が引く~レンタルサーバーのメンテナンスのせいだった。

サイト記事に使う画像ファイルをFTPソフトでアップロードしようとしたらエラーで接続できず。パソコンの故障を疑いましたが、結局、サーバーメンテナンスが原因でした。サイトも表示されなくて焦りました。

記事を読む

携帯イヤホンマイク

携帯電磁波から身を守るためにイヤホンマイク購入

「携帯電話の電磁波はがん発症のリスクを高める恐れがある」とIARCが発表したことを受け、慌てて携帯用のイヤホンマイクを購入しました。

記事を読む

新サイト「玄米・ごぼう汁基本食健康法」オープン

新サイト完成まではその他コンテンツの更新頻度が下がることについてのお知らせ

オリジナル健康法を紹介するサイトを作成中です。そのサイトが完成するまで、ブログ更新以外のコンテンツ更新が滞ることをお知らせします。

記事を読む

10年使ってきた携帯電話(ガラケー)の蝶番(ヒンジ)が大破損!~瞬間接着剤で接着修理を試みる

十年間使ってきた、ドコモのガラケー(N705i)。突然、二つ折りの蝶番(ちょうつがい)部分が壊れてしまいました。アロンアルファで接着を試みたところ、無事なんとかなった!

記事を読む

コラムがボツになるとき~母に原稿を読んでもらい、反応を見る

コラム記事を書いたら、サイトにアップする前に、必ず母に読んでもらって反応を見ます。反応が思わしくなければ、書き直しか、ボツにします。

記事を読む

ヴォスペルの神依使い

携帯ゲーム「ヴォスペルの神依使い」に大熱中

何年か前に携帯サイトでダウンロードしたまま手つかずだった「ヴォスペルの神依使い」というゲーム。なにげなくやってみたら、これが面白くて大熱中!

記事を読む

同じカテゴリの記事をもっと見るサイト作成」の記事をもっと見る
同じカテゴリの記事をもっと見る携帯電話の話題」の記事をもっと見る
運営者紹介

健康探究ブログ」運営者のです。

生まれつき「卵、肉、牛乳」の食物アレルギー持ちでアトピー性皮膚炎だったため除去食や自然派の食材で育ちました。

ですから食べたものレビューは基本的に自然派・無添加系のものが多いです。

買ったものレビューは自分が実際に選んで購入して使ってみた正直な感想を紹介しています。

お勧めできないと思ったものは記事にしていません。

読んで下さった方に必ず何かしらのプラスがあるようにという志で記事を書いています。

サイト開設16周年を迎えました。

北海道旭川市在住。お茶の水女子大学卒業。

中学・高等学校教諭一種免許状(国語科)所持。

管理人のプロフィール詳細
インスタグラムで更新情報を受け取る
楽天ROOMを見てみる(管理人のお勧め品を紹介しています)
pinterestで更新情報を受け取る
運営サイト一覧

マクロビオティック羅針盤マクロビオティック羅針盤…マクロビオティックの理論・レシピ

玄米・ごぼう汁基本食健康法玄米・ごぼう汁基本食健康法…マクロビオティック卒業後に確立したオリジナル健康法

大相撲春夏秋冬大相撲春夏秋冬…遠藤関の取り組みを中心に応援

自宅浪人の夜明け自宅浪人の夜明け…自宅浪人を成功させるためのヒント集

金沢・福井旅行記金沢・福井旅行記…平泉寺白山神社参拝を中心にした旅行記

伊勢神宮 御垣内特別参拝の旅伊勢神宮 御垣内特別参拝の旅…伊勢神宮参拝を中心に、ホテル、グルメ紹介

北の極上グルメ北の極上グルメ…道北の禁煙レストランレビュー

アニメときどき映画…進撃の巨人、鬼滅の刃等のレビュー