2015年5月12日

モバイル表示でのみ、フッターに特別なコンテンツを表示させたい。テンプレートに記入。

スポンサードリンク

 スマホページでは、一部コンテンツを非表示にしています。
容量が大きくなると、開くのに時間がかかり過ぎてしまうからです。

その注意書きを、スマホページのフッター内に入力しました。
ウィジェットではありません。

直接テンプレートに埋め込みました。


テンプレートに追加したいコンテンツを手入力



 まずは、

<!-- outside of the include in order to lock Attribution widget -->

を探します。
1つしかないので、すぐ見つかります。


 その直前に、


<b:if cond='data:blog.isMobile'>
<div class='for-mobile-user'>

ここに注意書き

</div>
<b:else/>
</b:if>


 コードの意味は、モバイル表示の時は、
or-mobile-user のCSSを使って、

「ここに注意書き」内を表示してね。

それ以外では、
何も表示しません。

という意味です。



 ちゃんとCSSも指定しておきました。

.for-mobile-user {
  margin: 0 5px 0 5px;
}

上記コードを
テンプレートのCSS内に記入します。



 左右から5px開けて、
コンテンツが表示されるようにしています。

お好みで変えましょう。


 当ブログは注意書きですが、
画像でも、広告でも、好きな物を入れられますよ。


 ウィジェットだと、PCでも表示されてしまいます。

それをさせないようにしようとすると
また別の問題が…。

話すと長いので、割愛。


 ざっくり言うと、
モバイルのみ表示させるコードをテンプレートに入れてしまうと、
管理画面のレイアウトが使いにくくなってしまうせいです。

理由は、Bloggerの仕様の影響です。
どうしようもありません。



 色々考えて、
テンプレートの中に埋め込むこととしました。


 当ブログ内の情報は、
全ての方に応用できるとは限りません。

必ずテンプレートはバックアップを取っておいて下さいね。


また、ご利用は自己責任でお願い致します。

ラビットしま子は美容ライターであり、
サイト制作のプロではありません。

個別のカスタマイズについてのご相談は、
乗ってあげたいけど、乗れません。(わからんから)


スポンサードリンク