【Attractive,Matureのみ】スマートフォン／モバイル端末表示対策用セレクタ

以下のCSSセレクタをHTMLタグの属性として指定することで、表示されるディスプレイサイズ(ブラウザの表示幅)に合わせて、任意のコンテンツの表示／非表示を制御することができます。

例えば、スマートフォンサイズ(表示幅:480ピクセル)の場合のみにある広告を表示したり、逆にスマートフォンでの表示の場合はPC用のコンテンツを非表示にすることができます。

指定の表示幅以下になった場合にコンテンツを表示するセレクタ一覧

• mq-show900 (900px幅で表示)
• mq-show850 (850px幅で表示)
• mq-show800 (800px幅で表示)
• mq-show750 (750px幅で表示)
• mq-show700 (700px幅で表示)
• mq-show650 (650px幅で表示)
• mq-show600 (600px幅で表示)
• mq-show550 (550px幅で表示)
• mq-show500 (500px幅で表示)
• mq-show (480px幅で表示)

表示例

下の画像は、ブラウザの横幅が480ピクセルより狭くなると表示されます。
PCで閲覧中には表示されません。

このコード

下の画像は、ブラウザの横幅が480ピクセルより狭くなると表示されます。
PCで閲覧中には表示されません。
<img src='https://digipress.info/_wp/wp-content/uploads/2012/04/blueberries-2278921_1280.jpg' class='mq-show' />

指定の表示幅以下になった場合にコンテンツを非表示にするセレクタ一覧

• mq-hide900 (900px幅で非表示)
• mq-hide850 (850px幅で非表示)
• mq-hide800 (800px幅で非表示)
• mq-hide750 (750px幅で非表示)
• mq-hide700 (700px幅で非表示)
• mq-hide650 (650px幅で非表示)
• mq-hide600 (600px幅で非表示)
• mq-hide550 (550px幅で非表示)
• mq-hide500 (500px幅で非表示)
• mq-hide (480px幅で非表示)

表示例

下の画像は、ブラウザの横幅が480ピクセルより狭くなると非表示になります。
PCで閲覧中は表示されます。

このコード

下の画像は、ブラウザの横幅が480ピクセルより狭くなると非表示になります。
PCで閲覧中は表示されます。
<img src='https://digipress.info/_wp/wp-content/uploads/2012/04/blueberries-2278921_1280.jpg' class='mq-hide' />