SWELLのブロック表示設定は非常に便利ですが、一つだけ「惜しい！」と思うポイントがありませんか？
それは、「スマホ用」の設定にタブレットも含まれてしまうこと。
「2カラムがSPで1カラムに変わったとき、左右位置をノーコードで調整したい」
「タブレットだと画像が大きすぎるから、ここだけ消したい」
そんな細かなこだわりを実現する、専用の出し分けツールを用意しました。
SWELL標準機能との違い
SWELL標準では「PC」か「それ以外（スマホ・タブ共通）」の2択ですが、このツールならタブレットとスマホを完全に切り離して制御できます。
| 出し分けの細かさ | SWELL標準 | 追加される設定 |
| PCのみで表示 | 「PCサイズでのみ表示する」 | PC専用 |
| PCとタブレットのみで表示 | 不可 | PC・TAB |
| タブレットとスマホのみで表示 | 「スマホサイズでのみ表示する」 | TAB・スマホ |
| タブレットのみで表示 | 不可 | TAB専用 |
| スマホのみで表示 | 不可 | スマホ専用 |
使い方ショート動画
実装方法
コードスニペットを導入する
こちらのボタンをクリックしてスニペットをダウンロードします。
会員限定コンテンツ
ここは会員限定コンテンツです。
＼お申込みはこちら／
コードスニペットをオンにします。
アドオン機能導入方法
管理画面「プラグイン」から、「プラグインを追加」を選択。
「プラグインの検索」欄に、Code Snippetsと入力。
このプラグインを「今すぐインストール」・「有効化」します。
該当ページから、コードスニペットをダウンロードします。
コピペではなく、ダウンロード形式で使用するものは上画像のような黄色いボタンで統一しています。
インポート/エクスポートが容易な、コード管理プラットフォームです。
「ひとつの機能としてパッケージングされたコード群」を、利用者はコードを触ることなくスイッチ（トグル）のオンオフで導入できる神ツールです。
管理画面「スニペット」「インポート」から、先ほどダウンロードしたコードスニペットをインストールします。
重複インストールを防ぐために下段にチェックを入れ、
Choose Filesエリアに先ほどダウンロードしたファイルをドラッグ&ドロップします。
インストールするファイルにチェックを入れ、「Import Selected」を押します。
管理画面「スニペット」「すべてのスニペット」から、先ほどインポートしたスニペットの左端にあるスイッチ（トグル）をオンにします。
目当ての機能が有効化されているか確認します。
使い方：1クリックで設定完了
使い方は非常にシンプルです。ブロックを選択したときに出る「目のマーク」から、表示したいデバイスを選ぶだけ。
メニュー項目の一覧
上から順に、直感的に選べるようになっています。
- 解除：設定をリセットし、すべてのデバイスで表示します。
- PC専用：パソコン画面（960px以上）でのみ表示。
- PC・TAB：スマホ以外（600px以上）でのみ表示。
- TAB・スマホ：PC以外（960px未満）で表示。※SWELLの「SP用」と同じ挙動です。
- TAB専用：タブレット（600px〜959px）でのみ表示。
- スマホ専用：スマホ（600px未満）でのみ表示。
設定ミスを防ぐ「編集画面」の工夫
「どのブロックに何を設定したか忘れてしまった…」という心配はありません。 このツールは、今のエディタ幅で「非表示」になるブロックを自動で半透明（うっすら表示）にしてくれます。
- 通常表示：そのデバイスで表示される設定です。
- 半透明：そのデバイスでは非表示になる設定です。
「スマホ表示で確認しながら編集しているときは、PC専用ブロックが半透明になる」ため、公開後のミスを未然に防ぐことができます。
FAQ
- 設定が反映されません。
-
コードスニペットのトグルがオンになっているか確認してください。
