【Blogger】スマホ表示で右側に余白ができる問題の修正

スマホ（モバイル）で本ブログを表示した際に、以下の動画のように右側に変な余白ができてしまったり中央寄せのはずの画像が片側に寄ってしまうことがありました。テンプレートはQooQ、JetThemeどちらの使用時でも発生する問題でした。

記事のHTMLコードを編集していた際に原因を偶然発見し無事修正できたので紹介します。また、修正時には便利なオンラインツールを利用したのであわせて紹介します。

原因

結論、Bloggerに画像を挿入した際に自動でHTMLに書き込まれる以下のstyleが原因でした。

style="margin-left: 1em; margin-right: 1em;"

画像を挿入した際の<a>タグ、画像にキャプションを指定した際の<table>タグ等に左右のmarginを指定するstyleが指定されることが原因のようです。

これらを全て削除したところ、正常に表示されるようになりました。

ちなみに、記事によっては1emではなく以下のようにauto指定となっているところもありましたが、こちらは上述の症状には特に影響ないようです。

style="margin-left: auto; margin-right: auto;"

修正に用いたオンラインツール

原因はわかったのですが、Blogger管理画面にてstyle="margin-left: 1em; margin-right: 1em;"で検索をかけたところほぼ全ての記事が該当しました（※Blogger管理画面の検索ボックスではタグや本文テキストだけでなく記事内HTMLにも検索をかけることができます）。各記事を全て手打ちで修正するのは面倒だと思っていたところ、以下のようなウェブツールを発見しました。

Blogger Find & Replace :: Adam W. Lewis

This tool will search all posts made on a blogger blog for a specific string and replace it with another string.

www.adamwlewis.com

ブログ内の公開記事から文字列検索し一括置換できます。

サイト利用にあたってBlogger管理のアクセス権限を許可する必要があります。Googleアカウントの管理画面（セキュリティ→サードパーティ製のアプリとサービス）で確認したところ

• Blogger での投稿とブログの表示と管理
• Blogger のコメントの表示と管理

とのことだったので、Bloggerに載せている情報以外の個人情報などは含まれなさそうです。操作ミスなどで記事内容を破壊しうる（置換後はもとに戻せません）ので一応注意。心配な方はブログテーマおよび全記事をエクスポートし同内容のテストブログを作ってそちらでまず試すと良いかもしれません。また、使用後は上記Googleの管理画面から念のためアクセス権を削除しておくと良いでしょう。

修正方法は「TRANSFER ME TO GOOGLE SO I CAN AUTHORIZE THIS TOOL」より上記サイトに権限付与した後、対象のブログを選択し「Find」に上記styleを入力、「Replace」を空欄のまま「PERFORM THE FIND & REPLACE」を実行するだけです。

私の場合は投稿HTML内で個別にstyle指定することはほぼ無いので上記の方法でOKでした。

まとめ