読者です 読者をやめる 読者になる 読者になる

犬も歩けば猫も歩く

中年サラリーマンの生活と副業について書いています。

スポンサーリンク

スマホとPCでコンテンツの表示/非表示を切り替える!

SEO

表示/非表示を切り替える

いよいよゴールデンウィークも最終日となりました。
みなさんはいかがお過ごしでしょうか?

 

今日は、PCやタブレットなどの大型端末では閲覧できて、スマートフォンなど小型のモバイル端末ではコンテンツ(画像や表など)を表示させない方法をご紹介します。


今回は、下の画像をPCなどの大型デバイスでは表示、スマホなどの小型デバイスでは非表示になるようにしたいと思います。

 

スマホでは表示させたくない画像「チーバくん」
「チーバくん」です。かわいいでしょ!


1.まずは任意のclassを作成

ホームページ作成ソフトで、新規CSSを作成して、
セレクトタイプ:クラス(HTMLエレメントに適用可能)
セレクタ名:.spNone
OKボタンを押す。

カテゴリ > ブロック > Display(D):noneを指定してください。


2.CSSにMedia Queriesを記述

次に、CSS内にメディアクエリを記述します。
今回は、横幅480px以下の端末では非表示にしたいと思います。

すでにCSSの一番下に、

.spNone {
display: none;
}

が、記載されていると思いますが、その下に下記のタグを入れてください。

@media screen and (max-width: 480px){
.spNone { display: none;}
}

3.class名を指定

次にHTMLファイル内に、小型のモバイル端末では表示させたくないコンテンツにclassを指定します。下記のように、<div>タグで囲んでください。

 

<div class="spNone">小型端末で表示させたくないコンテンツ</div>

 

この後データをアップロードすると、
PCでは上記のままで、スマホプレビューすると「チーバくん」の画像は表示されなくなっています。


スマホの狭い領域では、見せないようにした方がいい細かな写真やコンテンツなどは、このようにして非表示にしてしまった方がよい場合もあります。

 

お役に立てましたでしょうか?

それでは、また・・・。