PCとスマホで表示内容を部分的に変えたい場合

唐突に本題ですがPCとスマホでブログの表示内容を部分的に変えたい時ってありませんか？

例えばアプリや商品の紹介をしようとした時にPC用とスマホ用があったとします。そこでそれぞれの画像や説明に違うものを使用したい場合などが考えられるでしょうか。

別にこっちがPC用であっちがスマホ用ですと書いておけば済む話だと言えばそれまでですが、無用な混乱を避ける為にあえてどちらか一方だけを表示するようにしたい、当エントリーではそんな時に使える小技を紹介したいと思います。

クラス名をつけて表示をコントロールする

PCとスマホ両方のテンプレートのスタイルシートにコードを貼り付ける必要がありますが、これは1度行ってしまえばテンプレートを変更しない限りずっと利用出来ます。

また、PC用とスマホ用は必ずセットで使う必要は無く、どちらか一方のみ表示してもう一方では表示しないという使い方も出来ますんで、その辺りは巧く工夫して利用していただけると幸いです。

PCテンプレートの編集

PCテンプレートを開いてスタイルシートの一番下に以下のコードをコピペします。後で見た時に「これって何だったっけ？」という事の無いようコメント部分も含めておいた方がわかりやすいかと思います。

/* スマホのみ表示する部分を非表示に */
.mobile-only { display: none; }

スマートフォンのみ表示する部分をPCでは非表示にします。

スマートフォンテンプレートの編集

次にスマホ用のテンプレートを開いてスタイルシートに以下のコードをコピペします。

/* PCのみ表示する部分を非表示に */
.pc-only { display: none; }

こちらは逆にPCのみ表示する部分をスマホでは非表示にします。タブレット用のテンプレートも利用している方はそちらにもこのスマホ用と同じコードをコピペして下さい。じゃないと両方表示される事になりますんで…

要はPC用のテンプレートではスマホのみ表示する部分を非表示に、スマホ用のテンプレートではPCのみ表示する部分を非表示にするというそれだけの事だったりします。

記事を書く際の設定方法

PCのみ表示したい部分とスマホのみ表示したい部分をそれぞれ以下のコードで囲むだけの簡単なお仕事です。囲む範囲は複数行だろうが途中に画像があろうが構いません。

ただし、他にもpタグやdivタグのようなHTMLタグを使用している場合は閉じタグの位置に注意して下さい、レイアウトが崩れる原因となります。また、ひだっちブログのエディタでデザインモードを使用している場合はチェックを外して作業した方がよさそうです。

<div class="pc-only">
＠PCのみ表示したい部分＠
</div>

<div class="mobile-only">
＠スマホのみ表示したい部分＠
</div>

先ほども少し書いたようにPCとスマホでそれぞれ違う内容を表示したい場合は両方必要ですが、PCのみ表示してスマホには何も表示しなくていいという場合は"pc-only"のタグで囲んだ部分だけあればOKです。

テスト用サンプル

上記の方法を利用したサンプルがこちらになります。

当エントリーをPCから見ている場合は「あなたはPCから見ていますね？」と表示され、スマホから見ている場合は「あなたはスマホから見ていますね？」と表示されるはずです。

この内容はプレビュー画面にも反映されるので、PCプレビューとスマートフォンプレビューでそれぞれの表示を確認してから公開する事も可能です。

画面サイズで判断する方法もあります

当エントリーではPCとスマホでテンプレートが分かれている事を利用した方法を紹介しましたが、レスポンシブデザインに対応したテンプレートではこの方法は使えません。なので表示するデバイスの画面サイズ（と言うか横幅）でコントロールするという方法もありますが、それはまた別の機会にという事で。