当サイトにはアフィリエイト広告が含まれます。
なおレビューは私の感想を書いており、内容を指示するご依頼はお断りしています。(Noステマ宣言)

高コスパなゲーミングPCなら、
私も使うG-GEARの即納モデルがおすすめ!

マリオの映画がAmazonの見放題に登場!

Meta Quest3 好評発売中!
Meta / Amazon / 楽天 / メルカリ

【おすすめメタクエスト記事】

【50項目以上】メタクエストの機能・設定・小ネタまとめ
メタクエスト ジャンル別おすすめ 無料ゲーム・アプリ (記事:【Meta Quest】おすすめ無料ゲーム・アプリ30選!無料でこれだけ遊べる!)
100均グッズでも充分?Questを快適にしよう! (記事:【100均も活用】Quest2・3おすすめアクセサリー&グッズまとめ【快適性と没入感をアップしよう!】)
映画を観るなら「VRゴーグル」か「プロジェクター」か?(記事:【大画面で映画】プロジェクターかVRゴーグルか、デメリットを理解して選ぼう!)

【AFFINGER6】「パソコンのみ」「スマホのみ」表示するコンテンツを作成する方法

2023年1月14日

Writter: むねりょ

 

対面コミュニケーションは苦手なので、文字でのコミュニケーションに活路を見い出し、日本語の奥深さにハマる。制限がある中「工夫して問題を解決をする」のが好きで、その過程で見つけた役立つ知識を発信します。VRは最新技術にも触れ合えるし、コミュ症でも世界中の人と会える最高の技術です!皆さんとVRで会えることを楽しみにしています!(でもコミュ症なので、一緒にVRゲームとかから始めましょうね)

今回は、AFFINGER6で「パソコンのみ表示」「スマホのみ表示」するコンテンツを作成する方法を紹介します。

また、この「パソコンのみ表示」「スマホのみ表示」を2つ並べることで、パソコンとスマホで違うコンテンツを表示させることが可能です!


【パソコンかスマホか言い当てる】

パソコンのみ表示する画像


この方法を使うと、ほかにもこんなことも出来ます。

  • 画面に余裕があるパソコンでは表示して、画面の狭いスマホでは非表示にする
  • パソコンには横長のテーブル(表)を表示して、スマホには縦長のテーブル(表)を表示する
  • パソコンには記事内広告を表示して、スマホにはディプレイ広告を表示する

  

上手に使いこなして、ユーザーファーストなサイトを目指しましょう!

「パソコンのみ表示」「スマホのみ表示」を設定する方法

スマホかパソコンか、「表示するデバイスを選択する方法」は以下の2通りがあります。

  • 「グループブロック」を使って、表示させるコンテンツを選択する
  • 「ショートコード」を使って、表示させるコンテンツを限定する

  

それぞれの方法には、次のようなメリット・デメリットがあります。

グループブロックショートコード
メリット表示・非表示の切り替えが楽基本的にどこでも使える
デメリット記事本文にしか使えない編集が漏れやすい

  

設定方法を順番に解説します!

  

「グループブロック」を使って、表示させるコンテンツを選択する

グループブロックの設定の中の「デバイス」で、表示させるデバイスを選択することができます。

  • 通常表示 ⇒ スマホ・パソコン 両方に表示
  • PC閲覧時のみ表示 ⇒ パソコンのみ表示
  • PC閲覧時のみ非表示 ⇒ スマホのみ表示
表示デバイス選択欄の位置(グループブロック設定)

  

グループブロック方法には、次のメリットがあります。

  • 「デバイス」の選択肢を切り替えるだけで、表示デバイスを切り替えることができる
  • 「表示条件 ⇒ コメントアウト」を選択することにより、一時的にスマホ・パソコン両方で非表示にできる

  

反面、次のデメリットがあります。

  • ウィジェット内や、ショートコード記述の中では使えない

  

ブロックエディタを使用していない方や、ウィジェット内やショートコード記述の中で表示デバイスを限定したい場合は、次の「ショートコード」の方法を利用しましょう。

  

「ショートコード」を使って、表示させるコンテンツを限定する

次のショートコードでコンテンツを囲うことで、表示するデバイスを限定することができます。

  • [pc] [/pc] ⇒ パソコンのみ表示
  • [nopc] [/nopc] ⇒ スマホのみ表示

  

なお、この記事の冒頭にあった【パソコンかスマホか言い当てる】は、上記のショートコードを両方続けて使うことで実現しています。

(冒頭の表示の内部)

【スマホかパソコンかを言い当てる】の作成のブロック並び

  

ショートコードの方法には、次のメリットがあります。

  • 「カスタムHTML」の中でも、ショートコードそのままの記述で使える
  • ウィジェット内(STINGERカスタムHTML)やショートコード記述の中など、どこにでも使用できる

  

反面、次のデメリットがあります。

  • 開始タグ、終了タグの編集が漏れがあると、コンテンツの表示が崩れる
  • ショートコード記述の中で使えないこともある

  

グループブロックでの方法と比べると、自由度が高いことと引き換えに、編集漏れしやすい、編集漏れに気付きにくいという点が最大のデメリットです。

  

広告

「パソコンでの見え方」「スマホでの見え方」を確認しましょう

AFFINGER6で「パソコンのみ表示」「スマホのみ表示」するコンテンツを作成する方法を紹介しました。

  

当サイトでは、「この記事を書いた人」を画像化しており、この方法を使いパソコンの人には横長の画像を、スマホの人には縦長の画像を表示するようにしています。

【パソコン用の画像】

「この記事を書いた人」(パソコン用)

【スマホ用の画像】

「この記事を書いた人」(スマホ用)

「パソコン・スマホどちらかのみ表示させる」にはいいですが、「デバイス別で表示するコンテンツを変える」と、その分メンテナンスの手間も2倍になってしまいます。

紹介しておいてアレですが、先に行っている経験者のアドバイスとしては、「同じコンテンツを上手に表示させる方法」を探ってみることをオススメします…。

むねりょ
むねりょ

デバイス別の表示をやって正直後悔したので、せめてネタにしようと記事を書きました…

  

コンテンツを公開する際には、パソコン・スマホ両方での見え方を確認して、どうしても表示を分けたいときには今回の方法をご使用いただければと思います。

\アニメの「謎の光なし」も見放題/

  

-ブログのコツ
-, ,