Bloggerのスマホ対応（スマホ表示）について

スマホの普及に伴い、スマホからWebサイトを見るユーザーも増えています。

自分のブログをスマホにも対応させれば、より多くの人に見てもらえる可能性も高まるでしょう。

この記事では、Bloggerで作成したブログをスマホに対応させる方法をご紹介します。

Bloggerのスマホ対応方法

Bloggerで作成したブログをスマホにも対応させたい場合は、「レスポンシブテンプレート」を使用すると良いでしょう。

レスポンシブテンプレートとは、PC/タブレット/スマホといったあらゆる画面サイズに応じて、サイトのレイアウトやデザインを適切に表示するテンプレートのことを言います。

上記画像は、実際にレスポンシブテンプレートを適用し、PCとスマホの両方からブログを表示した例です。

ブログのデザインが、大きさの異なる2つの画面に合わせて最適化されていることが分かります。

レスポンシブテンプレートの詳細については、以下の記事「モバイル対応レスポンシブテンプレート」セクションをご参照ください。

Bloggerで使用できるテンプレートのダウンロード方法などもご紹介しています。

Google Bloggerのテンプレートに関する情報まとめ

Bloggerのスマホ表示について

レスポンシブテンプレートを適用することで、PCでもスマホでも違和感なくブログを閲覧できるよう、ブログの表示を最適化することができます。

まずはPCからブログを見てみましょう。使用しているテンプレートは、Blogger公式の「Contempo Light」です。

このテンプレートはレスポンシブに対応しているため、スマホから閲覧すると、スマホ用の表示に自動で切り替わります。

スマホからブログを見てみました。

PCにあったサイドバーはなく、ヘッダーや投稿がスマホ用に見やすく表示されています。

PCにあるようなサイドバーをスマホでも表示したい場合は、画面左上のハンバーガーメニューを選択します。

PCのサイドバーにあったコンテンツが、スマホでも表示されました。

PCとスマホではブログの見え方が大きく異なりますが、コンテンツそのものは変わりませんのでご安心ください。

スマホだと投稿はこのように表示されます。

PCよりも画像や文字が大きく表示され、とても見やすい印象です。

PCからスマホ表示を確認する

ここでは、Chromeの「デベロッパーツール」を利用して、PCからスマホ表示を確認する方法を説明します。

ChromeでBloggerの管理画面を開き、ブログを表示を選択します。

①ページ内を右クリックし、②検証を選択します。

デベロッパーツールが起動すると、ページを構成するHTMLやCSSなどのソースコードが表示されます。

スマホでの表示を確認するには、画面上部のToggle device toolbarを選択します。

ブログがスマホ表示に切り替わりました。

この画面では実際にページを移動したり、メニューを開いたりすることもできます。試しにメニューを開いてみましょう。

ブログのハンバーガーメニューを選択します。

メニューが表示されました。

簡単な操作でPC/スマホ表示を切り替えられるため、ブログのデザインを調整するのに役立ちます。

ぜひブログをカスタマイズする際にお役立てください。

また、画面上部の「Dimension Responsive」メニューから表示デバイスを選択することもできます。

この機能を使用することで、iPhone/iPad/Google Pixel/Galaxyといったさまざまなデバイスから見たブログを確認することができます。

機能を使用するには、①Dimension Responsiveのプルダウンメニューを選択し、②任意のデバイス（例：iPhone SE）を選択します。

表示デバイスを変更することができました。画面上部の数値を見ると、選択したデバイスの画面サイズに合わせて表示されていることが確認できます。

iPhoneやAndroidが手元になくても、それぞれのデバイスから見たブログを確認できるため、とても便利です。

Bloggerのスマホアプリについて

PCを使えないような場所や、外出先でブログを投稿したい場合は、「Bloggerアプリ」の利用をおすすめします。

2022年10月現在、BloggerアプリはAndroid版のみの提供となり、iOS版は配信されていません。

以下の記事では、Bloggerアプリをダウンロードする方法や、使い方をご紹介しています。

Bloggerアプリではできないことも説明していますので、アプリを利用しようか検討している場合は参考にしてください。

Google Bloggerのスマホアプリについて

iPhoneから投稿を編集する

iOS版のBloggerアプリはすでにサービス終了しており、App Storeでも配信されていません。

しかし、ブラウザからBloggerにアクセスすることで、iPhoneからでもブログの投稿を編集することができます。

iPhoneから投稿を編集する方法は、以下の通りです。

iPhoneでBloggerにアクセスし、ログインを選択します。

使用するGoogle アカウントを選択します。

使用したいアカウントが表示されていない場合は「別のアカウントを使用」を選択し、ログインを行ってください。

Google アカウントにログインできると、Bloggerの管理画面が表示されます。

編集したい投稿を選択します。

投稿画面が表示されます。試しに投稿の編集を行ってみましょう。

①今回は例として本文を入力し、②更新ボタンを押します。

「変更内容を保存しました」と表示されます。

編集した内容が反映されているか確認してみましょう。画面左上の戻るアイコンを選択します。

画面右上のハンバーガーメニューを選択します。

ブログを表示を選択します。

編集した内容がブログに反映されていることを確認できました。

アプリがなくてもこのようにブラウザから編集することもできますので、ご活用ください。