SIRIUSレスポンシブテンプレート【fine&grand】PCスマホ分岐条件タグ

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枚並んでしまいます。これは規約違反になっていて、広告掲載停止を食らうこともあります。

 

ですので対応策としては、
「記事下に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です。

 

SIRIUSレイアウト枠機能

 

スマホ用アドセンスコードの上下に「centerad~div」のタグが入っていますが、これは広告を中央寄せするためのタグです。

 

noreturnというタグも書かれていますが、このタグで囲まれた部分は改行が無視されるエリアになります。
アドセンス広告を貼る場合に利用しましょう。

 

 

SIRIUS改行無視エリア

 

SIRIUSの作業画面で右クリック >タグ挿入 からnoreturnタグを入れる事が出来ます。

 

さいごに

以上、PCとモバイル&タブレット表示分岐タグの使用例でした。

 

レスポンシブウェブは「PCサイト作るだけでスマホ表示も自動化されるのか、楽じゃ~ん」と思われがちです。
ですが、PCサイトを強引にスマホで見えるようにしているだけですので、端末によって表示を変える必要も出てくるんですね。

 

いろいろ考えて、このタグを上手に使いこなしてみてください!

 

【著者:マナ】

PCとスマホの分岐条件タグ

岩手県盛岡市の専業アフィリエイター。やり方は楽しさと役立ちを優先したホワイトハット。趣味はバイオリンと盛岡さんさ踊り。

【運営サイト】SIRIUSアピールサイト
【twitter】  @マナ
【お問い合わせ】 フォームはこちら
※本テンプレートのカスタマイズご相談は現在ご遠慮頂いております。
※本テンプレートはプレミアム会員様向け専用でご利用頂けます。

スポンサーリンク
スポンサーリンク