サイト全体設定 > お知らせバー お知らせバーにボタンを配置できます

アクションフック 'swell_before_post_head'

SWELLの「PCのみ・スマホのみ」表示・改行の出し分け機能を使いこなす

アクションフック 'swell_before_post_thumb'

SWELLには、以下の「PCのみ・スマホのみ」表示・改行の出し分け機能があります。

  1. 要素のPCのみ表示、スマホのみ表示
  2. PC表示のみ改行、スマホ表示のみ改行

それぞれ、ショートコード・CSSクラス名を追記するなどの方法で出し分け設定をすることができます。

目次

基本設定

要素のPCのみ表示、スマホのみ表示の出し分け(基本)

ブロックがデバイス制限に対応している場合は、右側の設定サイドバー > 「デバイス制限」でSPサイズ/PCサイズのどちらかを選択して表示の出し分けが可能です。

非対応のブロックについては、一度グループ化グループブロックに)してから、そのグループブロックに対してデバイス制限を設定します。

PC表示のみ改行、スマホ表示のみ改行(基本)

これについては、本文中に以下のショートコードを設置して行います。

PC表示のみ改行[pcbr]
スマホ表示のみ改行[spbr]

これについては、公式マニュアルでも解説されています。

エディター以外の場所などで、表示出し分けを実装するカスタマイズ

カスタムHTMLブロックを使用している場合や、エディター以外の場所などで、表示出し分けを実装するカスタマイズ方法です。

要素のPCのみ表示、スマホのみ表示の出し分け(応用)

高度な設定 > 追加CSSクラスに、pc_onlyまたはsp_onlyというクラス名を追加すると、グループ化しなくてもPCのみ表示・スマホのみ表示の出し分けが可能です。

また、

  • カスタムHTMLブロック内
  • 外観 > カスタマイズ内
  • ウィジェット内

などの特定の要素のみPCのみ表示・スマホのみ表示の出し分けをしたいときは、class="pc_only"またはclass="sp_only"などとクラス名を追加することにより、PCのみ表示・スマホのみ表示の出し分けが可能です。

そのため、本文中の特定の要素のみ表示出し分けをしたいときは、<span class="pc_only">~</span>または<span class="sp_only">~</span>などとすると良いでしょう。

PC表示のみ改行、スマホ表示のみ改行(応用)

PCのみ改行・スマホのみ改行したい場合は、HTMLで<br class="pc_">または<br class="sp_">と記述すると、ショートコードが使用できない場所でも改行の表示出し分けが可能です。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

埼玉県在住・男性。SWELLを使い続けて2年、フォーラムで回答し続けて1年以上。この経験から得られたノウハウをみなさんに役立てたいと思い、このサイトを作りました。

コメント

コメントする

コメントは日本語で入力してください。(スパム対策)

CAPTCHA

目次