8570w blog: 5月 2017

Blogger のデフォルトの設定では

が表示されることになってます。

デフォルトの設定では、レイアウトのページで管理者が追加したサイドバーガジェットについては、PC 版ページにしか反映されず、モバイル版ページには表示されてくれないようです。

モバイル版ページを無効にして、モバイル端末から閲覧した場合も PC 版ページを表示する設定もあったりしますが、それだとモバイル端末でのユーザビリティが損なわれてしまいます。

しかし、モバイル版ページを生かしたままカスタマイズするやり方は一応あったりします。
たとえば、HTML/Javascript ガジェットを使って、モバイル版ページに「ブログランキング」を表示させたり、AdSense 広告を表示させたりするようなことができたりします。

ブログサービスによってこの辺りの設定の仕方、カスタマイズの可否などは様々なようです。

管理画面から「PC 版は表示、モバイル版では非表示」などといった風に簡単に設定できるブログもあれば、有料プランを契約しないとダメなブログなど、様々です。

Blogger は無料で利用でき、比較的カスタマイズ自由度の高いサービスのように思われます。

しかし、歴史あるサービスだけあってか？増築に増築を重ねたようなシステムはあまり直感的なものではない面もあるようで、当方も結構戸惑ってしまったことがあるので、ここにそのやり方をメモ書きしておきたいと思います。

この設定変更を済ませておかないと、以後説明することをやっても無駄です。当方はこのことに気づけずにいろいろ無駄な悩み事をしました。

といっても、ちょっとしたことで全然難しくありません。

先ほど開いた「テーマ」にある「HTML の編集」をクリックします。

何やら HTML タグがうじゃうじゃ出てくるので、何も考えずに Ctrl + F を押してページ内検索で文字列 <b:widget id= を探します。

いくつか存在するはずなので、モバイル版ページへの表示を制御したいウィジェット (「レイアウト」の設定画面では「ガジェット」と呼ばれています。いわゆるブログパーツ) のものを探しましょう。

「レイアウト」ページで表示される名前と比較しながら、それっぽいものを探し出します。たとえば、HTML/Javascript ガジェットだったら b:widget id が "HTML2" とか "HTML5" などのようなものが怪しいでしょう。推測が間違ってたら元に戻してやり直しましょう。

見つけたら、そのタグに mobile="yes" を書き加えれば、モバイル版でも表示されるようになります。

同様に、mobile="only" を書き加えれば、モバイル版だけで表示されるようになります。つまり PC 版ページでは表示されなくなります。

同様に、mobile="no" を書き加えれば、モバイル版では表示されなくなります。

例えば、ウィジェット ID 'HTML7' (これは当方の場合、管理画面では単に "HTML/Javascript とだけ表示されているものです)

について、PC 版でもモバイル版でも表示されるようにするのなら・・・

<b:widget id='HTML7' locked='false' title='' type='HTML'>

これを以下のように変更します。

<b:widget id='HTML7' locked='false' mobile='yes' title='' type='HTML'>

8570w blog