• パソコンの時は「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');