目立たないところの話ですが、ようやく本ブログのモバイルサイトにPCサイトと同じフッター設置する事ができました。
|
| モバイルサイトにようやくフッターが設置できました！ |
今回はこの設置方法の紹介になります。
■BloggerのモバイルサイトにPCサイトのサイドバーやフッターのガジェット（ウィジェット）を表示させる
●やりたいこと（困っていたこと）
モバイルサイトのフッターにPCサイトと同じような内容を表示させたかったのですが、Bloggerのテンプレート（HTML）を眺めてもモバイルサイトのフッターがどこで指定されているのか分からない（ソースコードが見つからない）んですよね～。
|
| PCサイト画面 |
デフォルトのモバイルサイトのフッターには何故か『自己紹介』だけが表示されています。
|
| デフォルトのモバイルサイトのフッターは『自己紹介』だけ |
●なぜ？（原因）
ようやく分かりました！
Bloggerの仕様として、ガジェット（BloggerのHTMLではwidget（ウィジェット）と言います）毎にモバイルサイトでの表示の要否を（省略可能な）『mobile』属性で指定する必要があるのです。
デフォルトでは『Header（ヘッダー）』、『PageList（ページリスト）』、『Blog（ブログ本文）』、『AdSense（広告）』、『Profile（自己紹介）』、『Attribution（"Powered
by Blogger"）』のwidget（ウィジェット）のみが表示されます。
以下、Bloggerのオフィシャルのヘルプページからの引用です：
ウィジットの属性：
mobile –（省略可）「yes」、「no」、「only」のいずれかを指定します。デフォルトでは「default」になります。ウィジェットをモバイルで表示するかどうかを指定します。mobile 属性に「default」を指定すると、モバイルでは Header、Blog、Profile、PageList、AdSense、Attribution が表示されます。
省略可能なのでテンプレートには記載がありません。クセ者ですよね～。そりゃいくらテンプレートを眺めていても分からない筈です😅。
●設置方法（対策）
以下ではBloggerのHTMLを編集します。編集する前に復旧できるように必ず忘れずにHTMLのバックアップを取ってから行ってください。
また、このHTMLの編集について本ブロブおよび筆者は一切の責任を負いません。参考にされる方は全て自己責任で実施してください。
原因が分かってしまえば、対策は簡単ですね😋。
Blogger管理画面のHTML編集画面（『テーマ』>『▼』>『HTMLを編集』）を開きます。
|
| Blogger管理画面の『テーマ』>『▼』>『HTMLを編集』でHTMLを編集します |
そこでモバイルサイトに表示させたいウィジット（widget）に『mobile='yes'』の属性を追記すれば良いだけです。
|
| BloggerのHTML編集画面 |
mobile属性：
- 『yes』：PCサイト、モバイルサイトの両方に表示される
- 『no』：PCサイトのみ表示される（モバイルサイトには表示されません）
- 『only』：モバイルサイトのみ表示される（PCサイトには表示されません）
なので、モバイルサイトだけに表示させたい場合（PCサイトには表示させない場合）は『mobile='only'』と指定すればOKです。
PCサイトのサイドバーのガジェット（ウィジェット）も同様にmobile属性を指定すれば、モバイルサイトのブログ本文の下に表示することができます。
●設置結果
狙い通りにフッターの設置ができました♪
|
| フッター設置後のモバイルサイト |
●まとめ
ウィジェット（widget）のmobile属性の設定によりPCサイトのフッターをモバイルサイトに設置することが出来ました😋。
Bloggerって無料でありがたいのですが、日本語の資料（マニュアルなど）が少ないので使いこなすにはちょっと苦労しますよね😅。
○【おまけ】完成したモバイルサイトのフッターのデザイン
（ここからは完全に私的な備忘録なので、読み飛ばしてください😅。）
完成したモバイルサイトのフッターのデザインはこんな感じです。
|
| 完成したモバイルサイトのフッター |
私が使っているBloggerのテンプレート『Simple Simple Simple』ではPCサイトとモバイルサイトのフッターの背景色の指定をCSSの異なる場所（クラス）で行っているので注意が必要です。
- PCサイトのフッターの背景色の指定：クラス『.footer-outer』
- モバイルサイトのフッターの背景色の指定：クラス『.mobile .footer-inner』
