個別記事のページです

2016年1月19日(火)
このエントリーをはてなブックマークに追加

MT記事内でPC・スマホの表示内容を切り替える

ホームページをパソコン版・スマホ版と分けていても
ブログ記事の内容は一緒になってしまいます。
そこで記事内でPC・スマホの表示内容を切り替える方法をご紹介します。
今回はAd広告の切り替えを例とします。

パソコンで見たときのAd広告は二つに並んでいますが、
ad_pc.png

スマホで見たときのAd広告は一つだけにしたい場合です。
S__38625282.jpg
パソコン版のブログ記事のCSSに「.hidden { display:none; }」と記述し、
スマホ版のブログ記事のCSSに「.none { display:none;}」を記述します。

<!----------PCのみ表示するAd広告---------->
<div class="none">
<p class="ad_txt">スポンサーリンク</p>
<table class="ban_mtlr">
<tr>
<td><!-- Google320-100モバイルラージバナー -->
ここにAdタグ入れる</td>
<!-- Google320-100モバイルラージバナー -->
<td>ここにAdタグ入れる</td>
</tr>
</table>
</div>
<!----------スマホのみ表示するAd広告---------->
<div class="hidden">
<p class="ban_mt">
ここにAdタグ入れる
</p></div>

display:none;は要素が取得されず、完全にその場にない扱いになるので
PCとスマホでclass名を変えて分けて使うだけで簡単に切り替えを行うことができます。

聞くと難しいと感じてしまいますが、実はCSSだけで簡単に実現できますのでぜひご活用ください!
書籍の内容と遜色のないPDFを無料プレゼントしております。
売れてる人しか知らない!売れるホームページの10の常識
過度な営業は一切しておりません。
お問合せ