Bloggerの追加ウィジェットをモバイル版で表示する最も簡単な方法

カスタマイズ
スポンサーリンク

どうも、kazuです。
あなたはBloggerで新しくウィジェットを追加した後、パソコン以外のデバイスで確認していますか?
実は、「関連記事の表示」に限らず、「ブログアーカイブ」や「ラベル」などのBloggerで追加したウィジェットはデフォルトではPC版にしか反映されません。
※「自己紹介」はデフォルトでスマートフォンでも表示されます。

そこで今回は、追加ウィジェットをスマートフォン(モバイル版)で表示する簡単な方法についてお話します。

※ご注意:テンプレートを直接編集していくので、必ず変更前データのバックアップをお忘れなく!

スポンサーリンク

追加ウィジェットをモバイル版で表示する方法

1. Blogger管理画面「テンプレート」 → 「HTMLの編集」をクリック

2. 「ウィジェットへ移動」 → プルダウンより該当のウィジェットを選択
※私の場合は関連記事を表示するウィジェット名は「HTML1」でした。

3. 下記のように「mobile=’yes’」を追加 → 「テーマを保存」をクリック

◆変更前
<b:widget id=’HTML1′ locked=’false’ title=” type=’HTML’ visible=’true’>

◆変更後
<b:widget id=’HTML1′ locked=’false’ mobile=’yes’ title=” type=’HTML’ visible=’true’>
※前と後に半角スペース

おしまい!お疲れさまでした。

他のウィジェットをスマートフォン(モバイル版)で表示したい場合も同様に「mobile=’yes’」を追加するだけでOK!

変更後の注意点

PC版では正しく表示されていても、モバイル版ではレイアウトが崩れる可能性があります。
変更後は必ずスマートフォンで表示する、もしくはパソコン上でモバイル版サイトを表示して、レイアウトの確認をしましょう!

スポンサーリンク

パソコン上でモバイル版を表示する方法 ~Chrome編~

1. 確認したいページを表示する → 「F12」キー

2. 「Developer Tools」が開くので、スマートフォンのアイコンをクリック(アイコンが青くなる

3. モバイル版が表示される

はい!これでモバイル版が表示されました。
思ったように表示されていればOK!

スポンサーリンク

さいごに

いかがでしたでしょうか?
最近は、スマートフォンで検索したり、他の方のブログを見たりすることが増えてきました。
せっかくウィジェットを追加しても表示されるのがPC版だけだとチョット悲しいですよね。
今後、ますますスマートフォンから見る人が増えてくると思うので、ぜひ、追加したがジェットをモバイル版でも「表示」できるようにしましょう!

最後まで読んでいただき、ありがとうございましたm(_ _)m
それではまた~!

コメント