Bloggerでは、モバイルテーマにCSSを適用させるためにはモバイルテーマを「カスタム」に設定する必要があるようなのですが、私がモバイル版で見てみると右側に変な空間ができてきれいに表示ができませんでした。
これでは見た目も良くないし、スクロールしたとき横に滑る時があり快適さが失われてしまいます。（記事下部注記あり）
何が原因なのか調べたところ、サイドバーに設定したページリンクがブログの一番下でプルダウンメニューになっていて、それがやたら長くなっているせいで表示がおかしくなっていることがわかりました。
 |
| プルダウンメニューの右側の▼が見切れている |
 |
| これだけはみ出している |
1. 原因となっているページリンクを特定する
まずはどのページリンクが原因となっているのかを特定する必要があります。モバイル版で表示を崩しているプルダウンメニュー内のリストと同じページリンクガジェットをBlogger管理画面の「カスタマイズ」で探して下さい。
前述しましたが私の場合、サイドバーに設定したページリンクガジェットが原因でした。
原因のガジェットを見つけたらそのガジェットの編集ウィンドウのURLを調べて下さい。URLの中の「&widgetId=〇〇」の〇〇の部分を使います。ページリンクの場合、「Pagelist?」（？は数字）になっているかと思います。
2. CSSを書き込む
先程調べたIDを使ってCSSでスマホで表示されるときだけ非表示になるようにします。
まず、管理画面の「テーマ」の”ブログで使用中”下の「カスタマイズ」を押します。左上の「上級者向け」から右隣の一番下「CSSを追加」を選択して出るテキストボックスに下のコードを書きます。
後は「ブログに適用」をクリックして終了です。
これは下記の他の方の記事を参考に作りました。
【レスポンシブ】PCとスマホで違う画像に切り替える方法！CSSだけで簡単画像切り替え！
ディスプレイ解像度の横幅が750px以下（750pxはiphone7の解像度だそうです）かどうかを判定して、当てはまった機器でブログが表示された時だけページリストを非表示にします。
なので、PCでブログを見た場合サイドバーのページリンクは問題なく表示されるはずです。
おまけ
逆にPC側では非表示にしてスマホ側でのみ表示させたい、という場合は以下のコードを書きます。これを利用することでPCとスマホで表示させたいページリンクの内容を変えることができます。
（2019/11月 追記）
↑の方法でモバイルページでの表示・非表示を設定したほうがCSSを使う方法よりかんたんでスッキリしますね。詳細はリンク先へBloggerのモバイルページにガジェットを表示する方法｜雑多なメモ帳
Bloggerでページを作っている時に、「PCページでは見えているサイドバーなどのガジェットがモバイルページで見えない」なんてことはなかったでしょうか？ テンプレートのHTMLを少し編集することで、簡単に表示することができますのでこの記事で紹介します。
「mobile='yes'」でガジェットがモバイル用ページでも表示され、冒頭の表示がおかしくしている原因となっているページガジェットには「mobile='no'」を追加することで非表示にすることが出来ます。
CSSを使用する方法はガジェット以外に使ったほうが良いみたいですね😓
（注記：Bloggerの統計情報ページにアップデートがあったあたりからモバイルテーマに対してCSSが適用されなくなった模様。追記のHTMLを編集する方法はページリンクには有効なようですが、他のガジェットには使用できないようです。）