2018年3月5日月曜日

Bloggerガジェットをモバイル版ブログに表示させる方法!

Bloggerにはたくさんのガジェットがありますね。

ガジェットによって様々な機能をブログに導入できます。

しかし、これらのガジェットの一部は、追加してもモバイル版では反映されないことがあります。

今回は表示されないガジェットをモバイル版に反映する方法について紹介します!


まずは準備を

ガジェット スマホ表示

ガジェットをモバイル版にも反映させる方法はそんな難しくないのですが、HTMLをいじる必要があります。

ので、慎重な方はバックアップをとっておきましょう。
(参考:Bloggerをカスタマイズしよう!その前に…)

また前提としてモバイルテーマを「カスタム」にしておく必要があります。

こちらを設定しておかないとモバイル版ブログはカスタマイズを反映してくれません
(参考:Bloggerをカスタマイズしよう!5つの方法(初級編))

「テーマ」→「歯車マーク」→「モバイルテーマの選択」

でセレクトボックスを「カスタム」にしましょう。


ガジェット(ウィジェット)コードの見つけ方


次にブログ管理画面から、

「テーマ」→「HTMLの編集」

にて、HTMLを編集し、
モバイル版に反映させたいガジェットにコードを記述するのですが、

そのためにはガジェットの表示を担っているコードを見つけなければなりません

ガジェットはみんな
<b:widget から始まるコードで記述されており、ガジェットの種類ごとに応じたidが振り当てられています。

ガジェットのidは「レイアウト」から、導入中のガジェットのURLの末尾を調べることで簡単にわかります。
BloggerガジェットのID

idはガジェットの種類ごとの特定の文字列数字から成っています
(基本的に数字は1。同種類のガジェットが複数あった場合、2、3と逐次的に数字が割り当てられる)

一応以下に、ガジェットの種類ごとのidの文字列の一覧を記します。
BloggerガジェットID一覧表
(HTML上ではこちらの文字列に数字が加えられています)

ガジェットのidがわかったなら、HTML編集画面にて、

「Ctrl」+「F」

検索窓を開いて、お目当てのガジェットのコードを検索するのも良いですし、



ウィジェットに移動 Blogger

上のように「ウィジェットへ移動」からガジェットのコードへと飛ぶことも可能です。

ちなみにですが、
「ウィジェット」と「ガジェット」の意味は同じようなものだと思っていただいて大丈夫です。
(どういう理由で使い分けているのかはわかりませんが…)


mobile='yes'を導入する


モバイル版に反映させたいガジェットのコードが見つかったなら、
その部分に

mobile='yes'

こちらのコードをウィジェットコードのカッコ内に記述しましょう。

場所ですが、locked='false'とtitleの間が良いようです。
mobile='yes'

コードとコードの間には半角スペースを入れることを忘れないでください(全角入れるとエラーになります)。

mobile='yes'を導入することでガジェットをモバイル版にも反映することができるようになりました


mobile='no'とmobile='only'



mobile='yes'の他にもガジェットのモバイル版表示を制御するコードがあります。

それがmobile='no'mobile='only'です。


mobile='no'


こちらはガジェットをモバイル版で表示させないようにするコードです。

ガジェットによってはデフォルトでモバイル版に表示されるものもあるので、

そういったガジェットをモバイル版に表示させたくない場合に便利ですね。


mobile='only'


こちらはガジェットをモバイル版のみに表示させるコードです。

PCには表示したくないけど、モバイル版だけに表示させたいガジェットがある場合に有用です!

ただ、こちらのコードは少々いわくつきでして…

mobile='only'を導入すると、そのコードが記述されている間、ガジェットのレイアウト変更が一切変更できなくなってしまうというウワサがあります。

が、私が試しに導入してみたところ・・・

特に問題なくレイアウト変更を行うことができました

なので、おそらくこの問題は修正されたのだと思います(^^)


まとめ
いかがでしたか?

大体のガジェットは初期状態ではモバイル版に反映されないようになっているので、ちょっとめんどくさいですが、コピペを駆使すれば存外に早く終わるかと思います。

モバイル版でもお気に入りのガジェットを設定しましょう!


ブログランキング・にほんブログ村へ
にほんブログ村(クリックお願いしますm(__)m)