ブロガーのガジェット、モバイルサイト（携帯）でも表示できるようにカスタマイズする方法！

ブロガーはテーマを選べば簡単にブログを始めることができます。

レイアウトから使いたいガジェットを追加すればある程度は思い通りのブログにカスタマイズができるのです。

しかし、モバイルサイトを閲覧してみると記事と基本情報（プロフィール）しか表示されません。これはデフォルト状態であるからなのです。
何故かモバイルサイトのカスタマイズは一工夫が必要なのですよね・・・。

そこでモバイルサイトのカスタマイズについて調べてみましたので備忘録として記事にしておきます。

今回のモバイルのカスタマイズは、2020年11月現在のものです。

この記事が古くなっていた場合にはご容赦くださいませ👀

まずこの記事を読んでいるということはPC用のカスタマイズが完了していてモバイルサイトもカスタマイズしたいという事でしょう。
そういう人を前提に話を勧めます。

このブログのURLは、

https://dagashinon.blogspot.com/

です。

このURLを

https://dagashinon.blogspot.com/?m=1

と入力するとモバイルサイトの表示に切り替わります。

モバイルサイトをPCからの表示確認するには、このURLを使います。

次にモバイルサイトのカスタマイズをします。

テーマを選択し、カスタマイズをクリックします。

カスタマイズのメニューからモバイルの設定を選択します。

モバイルを選択し、モバイルテーマの選択でカスタムを選択します。

これでモバイルサイトのカスタマイズができるようになりました。

今度はモバイルサイトに追加したいガジェットに修正するためガジェットのIDを確認します。

レイアウトからモバイルサイトに表示させたいガジェットを選んでください。

ポップアップされたガジェットURLの "widgetId" のIDを確認してください。

ここでは "LinkList1" がIDとなります。

次にテーマのカスタマイズから、HTMLを編集を選択します。

テンプレートの編集に移動したら、ウィジェットに移動をクリックします。

修正したいガジェット ここでは "LinkList1" を選択します。

するとHTMLソースの中からマッチするガジェットの位置までジャンプします。

  <b:widget id='LinkList1' locked='false' title='❖関連チャンネル' type='LinkList'>

このソースに赤字部分を追加し保存します。

  <b:widget id='LinkList1' locked='false' mobile='yes' title='❖関連チャンネル' type='LinkList'>

これでこのガジェットはモバイルサイトでも表示が可能になりました。

ガジェットの表示位置はレイアウトから調整しましょう。

ちなみに、

 mobile='only' 

とするとモバイルサイトだけの表示にすることもできます。

HTMLソース内を一度クリックし、"Ctrl+F" を押すとキーワード検索をすることもできます。

[備忘録/ブロガー/モバイルサイト/設定/カスタマイズ]