個別記事のページです

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の常識
過度な営業は一切しておりません。

簡単無料お見積もり

問い合せ内容 見積り  相談  更新管理  PPC広告・SEO対策
  • 売上げアップ
  • 会社拡大
  • ブランド力を持ちたい
  • 新規事業参入したい
  • 単価を上げたい
  • 価格競争したくない
  • 社内環境を良くしたい
  • 経営者が楽になる
  • 社員を成長させたい
  • 良い求人が欲しい
  • 離職率を下げたい
  • 残業を減らしたい
  • 客層をよくしたい
  • 会社がうまく回るようにしたい
  • クレームを減らしたい
  • リピート、口コミを増やしたい
  • ターゲットを絞りたい
  • 会社の方針を明確にしたい
  • SEO対策
内容
お問合せ