- パソコンの時は「A」を表示させたいけど、スマホの時は表示させたくない
- パソコンの時は「700×40」の画像を表示させて、スマホの時は「300px300」のサイズに変更して表示させたい
- パソコンとスマホで広告のサイズを変えたい
など、「パソコン」と、「スマホ」で、表示内容を切り替えたいことってありますよね。
そんな時は、以下のように記述を行うことで対応可能です。
SPONSORED LINK
HTML、CSSの場合
html
<div class="pc-dsp">パソコンの時に表示させる内容</div> <div class="sp-dsp">スマホの時に表示させる内容</h2></div>
css
.pc-dsp { display:block; } .sp-dsp { display:none; } @media only screen and (max-width : 736px){ .pc-dsp { display:none; } .sp-dsp { display:block; } }
厳密に言うと「パソコン」「スマホ」で表示内容を切り替えるのではなく、
- 736px以下の画面サイズの場合は、「sp-dsp」の内容を表示
- 737px以上の画面サイズの場合は、「pc-dsp」の内容を表示
する方法です。
※「Media Queries」を使用しますので、<head>内に下記の記述を行わないと動きません。
html(<head>内に記述)
<meta name="viewport" content="width=device-width, initial-scale=1.0">
また、この方法は画面サイズによって表示、非表示を行っているだけなので、ソース上には「pc-dsp」「sp-dsp」両方の記述が出力されます。
WordPressの場合
<?php if (wp_is_mobile()) : ?> スマホの時に表示させる内容 <?php else: ?> パソコンの時に表示させる内容 <?php endif; ?>
WordPressの場合は、条件分岐タグを利用することで対応可能です。
先に紹介した「HTML、CSS」の時とは違い、
- パソコンからアクセスがあった時はこっち!
- スマホからアクセスがあった時はこっち!
っと、条件によって表示内容を判断するので、ソース上には2つ分の記述が出力されることはありません。
WordPressの場合(固定ページ、投稿記事)
先に紹介した「条件分岐タグ」を使う方法は、【index.php】【single.php】などの、テーマファイルに対して記述を行う場合に利用できます。
しかし、「固定ページ」や「投稿記事」に対しては使用できません。
「固定ページ」や「投稿記事」で表示内容を切り替える場合は、【functions.php】に以下の記述を追加することで対応可能になります。
»【wordpress】PC(タブレット)とスマートフォンで記事内の表示内容を切り替えるショートコードの設定方法
functions.php
//PCでのみ表示するコンテンツ function if_is_pc($atts, $content = null ) { $content = do_shortcode( $content); if(!wp_is_mobile()) { return $content; } } add_shortcode('pc', 'if_is_pc'); //スマートフォン・タブレットでのみ表示するコンテンツ function if_is_nopc($atts, $content = null ) { $content = do_shortcode( $content); if(wp_is_mobile()) { return $content; } } add_shortcode('nopc', 'if_is_nopc');
「固定ページ」「投稿記事」内で使用する場合は、下記のように記述を行ってください。
[pc]パソコンの時に表示させる内容[/pc] [nopc]スマホの時に表示させる内容[/nopc]
タブレットを、パソコン表示に含みたい場合
タブレットを、パソコン表示に含みたい場合は、【functions.php】の記述を、以下のように変更することで対応可能です。
※下記はiPadをパソコン表示に含んだ場合の記述です。
//PCでのみ表示するコンテンツ function if_is_pc($atts, $content = null ) { $content = do_shortcode( $content); $ua = $_SERVER['HTTP_USER_AGENT']; if( strpos($ua, 'iPad') !== false){ return $content; }elseif(!wp_is_mobile()) { return $content; } } add_shortcode('pc', 'if_is_pc'); //スマートフォン・タブレットでのみ表示するコンテンツ function if_is_nopc($atts, $content = null ) { $content = do_shortcode( $content); $ua = $_SERVER['HTTP_USER_AGENT']; if(wp_is_mobile()) { if(strpos($ua, 'iPad') !== false){ return false; }else{ return $content; } } } add_shortcode('nopc', 'if_is_nopc');