Bloggerでスマホの画像が見えないときに確認したこと｜画像サイズと表示チェック

こんにちは。rurusyu編集部です。

今回は、Bloggerでブログを作っている途中に、パソコンでは見えている画像がスマートフォンでは見えにくかったり、表示されなかったりしたときに確認したことをまとめます。

私自身、独自ドメインやHTTPSの設定を進めたあと、スマホで記事を見直して画像の表示を確認しました。記事を公開したあとも、パソコンだけでなくスマホで確認することが大切だと感じました。

まず公開ページをスマホで開いて確認する

編集画面のプレビューだけで判断せず、公開後のURLをスマートフォンで直接開きます。今回のブログでは、ホームのURLをhttps://www.ruru-syu.com/に統一しています。

画像が表示されない場合は、次の点を順番に確認します。

  • ページを再読み込みする
  • Wi-Fiとモバイル通信を切り替えて確認する
  • 別のブラウザやシークレットモードで開く
  • 画像が読み込まれるまで少し待つ
  • 画像URLがhttpsで始まっているか確認する

画像サイズが大きすぎないか確認する

Bloggerに画像を追加するときは、元画像が大きすぎるとスマホで読み込みに時間がかかることがあります。記事内では、画像の横幅が画面からはみ出さないように、幅を100％、高さを自動にする形で表示しています。

独自ドメインを設定したときの画面。記事ではブラウザ上部などの個人情報が見えないように加工しています。

Bloggerの独自ドメイン設定画面

スマホで画像の左右が切れている場合は、画像の横幅を固定する設定が残っていないか、画像を囲むHTMLに大きすぎる幅が指定されていないかを確認します。

スクリーンショットは公開前に加工する

管理画面のスクリーンショットには、メールアドレス、会員番号、確認用の固有文字列などが写り込むことがあります。公開前に不要な部分を切り取り、必要に応じて黒塗りやぼかしを入れます。

DNS設定の確認画面。固有の確認文字列は掲載しないように加工しています。

DNS設定の確認画面

関連記事

まとめ

スマホで画像が見えないときは、画像そのものだけでなく、通信環境、HTTPS、画像サイズ、HTMLの幅指定を順番に確認します。公開前後にスマホで実際のページを確認し、読者が読みやすい状態に整えていきたいと思います。

コメント

コメントを投稿

このブログの人気の投稿

BloggerブログをGoogle Search Consoleに登録してサイトマップを送信する方法

イメージ
• Bloggerで独自ドメインのブログを公開したら、Google Search Consoleにも登録しておくと、Google検索での表示状況を確認できます。 この記事では、私が「rurusyuの雑記ブログ」をSearch Consoleに登録し、サイトマップを送信した流れをまとめます。 • Search Consoleは新しく作る必要がある？ Search Console用に新しいGoogleアカウントを作る必要はありません。以前WordPressで使っていたGoogleアカウントがあれば、そのアカウントでSearch Consoleにログインします。 Search Consoleでは、Googleアカウントの中に登録サイト（プロパティ）を追加します。ブログのサービスをWordPressからBloggerへ変更しても、同じドメインの現在のサイトを登録できます。 • URLプレフィックスでサイトを追加する Search Consoleの「ウェブサイトを追加」から、プロパティタイプを選びます。今回は、設定が分かりやすい「URLプレフィックス」を選びました。 入力したURLは次のとおりです。 https://www.ruru-syu.com/ URLは、実際にブラウザで表示できる正規のURLを入力します。今回のブログは、www付きのHTTPSアドレスを使っています。 • 所有権の確認 URLを入力して続行すると、所有権の確認画面が表示されました。Bloggerと同じGoogleアカウントで操作したため、今回は「ドメイン プロバイダ」による自動確認が行われ、所有権が自動的に確認されました。 確認画面には、確認状態を維持するためDNSレコードを削除しないように案内が表示されます。Bloggerの独自ドメイン接続に使っているDNS設定もあるため、確認用の設定を自己判断で削除しないように注意しました。 • Search Consoleのサマリー画面 所有権の確認が終わると、Search Consoleのサマリー画面へ移動できます。最初は「データを処理しています。1日後にもう一度ご確認ください」と表示されました。 これは登録に失敗したという意味ではなく、検索パフォーマンスやインデックスのデータがまだ集計中という案内です。登録直後に数字が表示されな...
続きを読む

Bloggerの独自ドメインでHTTPSとルートドメインを設定する方法

イメージ
こんにちは。rurusyu編集部です。 今回は、Bloggerに独自ドメインを接続したあとに行った、HTTPS設定とルートドメインの確認についてまとめます。 私の環境では、 www.ruru-syu.com は表示できるようになっても、 ruru-syu.com （wwwなし）ではエラーになる時間がありました。DNSの反映には時間差があるため、順番に確認することが大切です。 www付きURLとルートドメインの違い Bloggerのカスタムドメイン設定では、基本的に www.example.com のようなwww付きのURLを登録します。一方、 example.com のようにwwwがないURLは、ルートドメインと呼ばれます。 今回の設定では、次のように役割を分けました。 www.ruru-syu.com ：Bloggerのカスタムドメインとして接続 ruru-syu.com ：AレコードでBloggerへ向け、www付きURLへリダイレクト 両方のURLを設定しておくと、読者がwwwあり・なしのどちらでアクセスしても、ブログへたどり着きやすくなります。 1. Bloggerにwww付きドメインを登録する Bloggerの管理画面で「設定」を開き、公開に関する項目からカスタムドメインを設定します。入力するのは、今回のように www.ruru-syu.com です。 Bloggerの設定画面。カスタムドメイン欄にwww付きのドメインを設定します。 wwwなしのドメインを入力するとエラーになることがあるため、まずはwww付きで設定します。保存時に所有権確認のエラーが表示された場合は、Bloggerが画面に表示したCNAMEをDNSへ登録します。 2. ルートドメイン用のAレコードを確認する wwwなしのルートドメインにもアクセスできるようにするには、DNS側にGoogleのAレコードを登録します。Aレコードの値は次の4つです。 216.239.32.21 216.239.34.21 216.239.36.21 216.239.38.21 お名前.comでは、ホスト名を空欄にしたAレコードを4件追加しました。入力画面によってはIPアドレスを4つの欄に分けて入力します。 登録済みのAレコードとCNAME。確認用の固有文字列は...
続きを読む

mixhostをやめた後、Bloggerでブログを再開する方法｜お名前.comの独自ドメイン設定からHTTPS化まで

イメージ
こんにちは。rurusyu編集部です。 この記事では、mixhostをやめたあと、手元に残っていた独自ドメイン「ruru-syu.com」を使って、無料で利用できるBloggerにブログを再開した手順をまとめます。 WordPressのバックアップがない状態から始めたため、最初は不安もありました。実際に設定してみると、Bloggerのブログ作成、お名前.comのDNS設定、独自ドメインの接続、HTTPS化まで、順番に進めれば再開できました。 同じように「サーバーを解約したけれど、ドメインだけ残っている」という方の参考になれば幸いです。 今回の状況 これまで私は、お名前.comでドメインを取得し、mixhostでレンタルサーバーを借りて、WordPressでブログを運営していました。 その後、mixhostの利用を終了したことで、ブログを表示するサーバーがなくなりました。さらに、AdSenseアカウントも長期間利用していなかったため無効になっている状態でした。 お名前.comのドメイン「ruru-syu.com」だけは契約中だったので、このドメインを活用して、できるだけ費用をかけずにブログを再開することにしました。 WordPressではなくBloggerを選んだ理由 WordPressのバックアップが残っていなかったため、以前のサイトをそのまま復元することはできませんでした。 そこで、サーバーを別途借りなくても使えるBloggerを選びました。Bloggerなら、Googleアカウントで始められ、記事の作成やブログの公開に必要なサーバー管理も基本的には不要です。 もちろん、WordPressのような細かなカスタマイズやプラグイン利用には違いがあります。今回は、まずブログを再開して記事を積み上げることを優先しました。 Bloggerでブログを作成する Bloggerにログインし、次の項目を設定しました。 Bloggerのブログ設定画面。独自ドメインはあとから設定できます。 ブログ名：rurusyuの雑記ブログ ブログURL：rurusyu-blog.blogspot.com 表示名：rurusyu編集部 ブログ名やURLはあとから見直せますが、URLは他の利用者が使っていると登録できません。最初はBloggerが用意するbl...
続きを読む