PCとスマホで表示を変えよう
fine＆grandテンプレートは、前作facile同様にPCとスマホ・タブレット端末で表示する分岐条件機能を搭載しています。
PCだけに表示させるタグ
<div class="pc_display">
↑このタグで囲った部分はPCのみで表示される↓
</div>
スマホ・タブレットだけに表示させるタグ
<div class="mobile_display">
↑このタグで囲った部分はスマホ・タブレット端末のみ表示される↓
</div>
活用例
この端末分岐条件タグ、どう使うの？と思われる方もいることでしょう。
例えばアフィリエイト広告バナーではこんなことがあります。
アフィリエイト広告種類によるクリック率違い
AのバナーはPCではクリック率が高いのにスマホでは低い。
スマホではBのバナーの方がクリック率が高い。
っていうか、PCはテキストリンクにして、スマホではバナーにしたらもっとクリック率が良かった
こういうこともあるんですね。
こういう場合に、PCとスマホで表示させる広告を別々にすれば、最大限の収益化を狙うことができるようになります。
アドセンス広告の使用例
アドセンス広告の場合、PCサイトではよく記事下にレクタングル中を２つ設置しているサイトを見ます。
この説明書ページでも、参考例として記事下に2枚貼り付けています。
ですが、この状態でレスポンシブ化させてスマホ表示すると、アドセンス広告が縦に連続して2枚並んでしまいます。これは規約違反になっていて、広告掲載停止を食らうこともあります。
ですので対応策としては、
「記事下に2枚のアドセンス広告を表示させるのはPCだけにして、スマホではl広告表示1枚のみにする」という方法を取ります。
ワードプレスでアドセンス広告を貼っている人も、多くの人がこの方法を取っています。
コード記述例
↓PCだけに表示させる部分ここから↓
<noReturn>
<div class="pc_display">
<div class="layout_l" style="width:49%;">
<!-- ★▽左列ここから▽★ -->
PC用アドセンスコード①
<!-- ★△左列ここまで△★ -->
</div>
<div class="layout_r" style="width:49%;">
<!-- ★▽右列ここから▽★ -->
<span class="small">スポンサーリンク</span>
PC用アドセンスコード②
<!-- ★△右列ここまで△★ -->
</div>
<br clear="all" />
</div>
</noReturn>
↑PCだけに表示させる部分ここまで↑
↓スマホだけに表示させる部分ここから↓
<div class="mobile_display">
</div>
<div class="centerad">
スマホ用アドセンスコード
</noReturn>
</div></div>
↑スマホだけに表示させる部分ここまで↑
上記のように、PCでは横並びにアドセンスを2枚表示させ、スマホでは1枚だけ表示させるようにできます。
ちなみにアドセンスの横並び2枚表示は、SIRIUSのレイアウト枠の機能を使えばOKです。
スマホ用アドセンスコードの上下に「centerad～div」のタグが入っていますが、これは広告を中央寄せするためのタグです。
noreturnというタグも書かれていますが、このタグで囲まれた部分は改行が無視されるエリアになります。
アドセンス広告を貼る場合に利用しましょう。
SIRIUSの作業画面で右クリック ＞タグ挿入 からnoreturnタグを入れる事が出来ます。
さいごに
以上、PCとモバイル＆タブレット表示分岐タグの使用例でした。
レスポンシブウェブは「PCサイト作るだけでスマホ表示も自動化されるのか、楽じゃ～ん」と思われがちです。
ですが、PCサイトを強引にスマホで見えるようにしているだけですので、端末によって表示を変える必要も出てくるんですね。
いろいろ考えて、このタグを上手に使いこなしてみてください！
【著者：マナ】
【運営サイト】SIRIUSアピールサイト
【twitter】 @マナ
【お問い合わせ】 フォームはこちら
※本テンプレートのカスタマイズご相談は現在ご遠慮頂いております。
※本テンプレートはプレミアム会員様向け専用でご利用頂けます。
