実装説明
SWELLのフルワイドセクション。
みなさんサイト制作には必ず使用しているのではないでしょうか。
「上下のpadding量（PC/SP）」の設定がありますね。これは、セクション上下端から内側に向けての余白を設定するものです。
これ、見ていただいたら分かる通り、「上下同じ量」しか設定できないんです。
しかも、よく見ると単位が無い！謎の「padding量」です。
微調整するにはクラス名を付けてCSSを書く必要があるのですが、フルワイドセクションは一ページに何個も存在します。
こういった細かい修正が積み重なり、あなたの時給を奪っていきます！
そこで、設定パネルから上下個別・PC/SPそれぞれで設定できるアドオンを作りました！
実装方法
コードスニペットを導入する
こちらのボタンをクリックしてスニペットをダウンロードします。
会員限定コンテンツ
ここは会員限定コンテンツです。
＼お申込みはこちら／
コードスニペットをオンにします。
アドオン機能導入方法
管理画面「プラグイン」から、「プラグインを追加」を選択。
「プラグインの検索」欄に、Code Snippetsと入力。
このプラグインを「今すぐインストール」・「有効化」します。
該当ページから、コードスニペットをダウンロードします。
コピペではなく、ダウンロード形式で使用するものは上画像のような黄色いボタンで統一しています。
インポート/エクスポートが容易な、コード管理プラットフォームです。
「ひとつの機能としてパッケージングされたコード群」を、利用者はコードを触ることなくスイッチ（トグル）のオンオフで導入できる神ツールです。
管理画面「スニペット」「インポート」から、先ほどダウンロードしたコードスニペットをインストールします。
重複インストールを防ぐために下段にチェックを入れ、
Choose Filesエリアに先ほどダウンロードしたファイルをドラッグ&ドロップします。
インストールするファイルにチェックを入れ、「Import Selected」を押します。
管理画面「スニペット」「すべてのスニペット」から、先ほどインポートしたスニペットの左端にあるスイッチ（トグル）をオンにします。
目当ての機能が有効化されているか確認します。
右側設定パネルから自由に設定できる！
スニペットをオンにしたら、編集画面でフルワイドセクションを設置してみましょう！
設定パネルに新たな設定項目が出現していることが分かると思います。
見ていただいたらわかる通り、PCの上/下、SPの上/下をそれぞれ設定することができるようになります！
デフォルトの設定は残したまま記載した箇所だけ上書きする仕様になっていますので、直感的にご使用いただけるかと思います。
使用上の注意点
設定パネルにも記載がある通り、いくつかの注意点があります。
標準機能として用意されている機能を上書きするものなので、注意点までしっかり把握してコントロールしていただければと思います！
数字だけ（例：「60」）を入力しても反映されません。必ず「60px」や「4em」のように単位を含めて入力する必要があります。
「注意点」というより、把握しておいていただきたい特徴であり、最大の強みです。
「PCの上だけ60pxにして、下はSWELLの標準設定のままにしておく」といった、片方だけのピンポイントな上書きができる仕様です。
SWELLでは通常、フルワイドブロックを上下に連続して配置すると、自動で間のマージン（隙間）を消して密接させてくれます。しかし、このスニペットで個別に余白を設定すると、その「マージンの自動調整」が効かなくなります。
もし「意図しない余白が空いちゃうな？」と思ったら、上のブロックのSWELL標準設定にある「ブロック下の余白量」を明示的に「余白量：0」に設定してみてください。
（ブログパーツにフルワイドブロックを登録して呼び出した時に、上のフルワイドブロックの余白を0にするのと同じ感覚です！）
Q&A
- アドオンが反映されません。
-
・コードスニペットのトグルがオンになっているか確認してください。
・編集画面を既に開いている場合は、画面を更新してください。 - なんか挙動がおかしいです。
-
コミュニティよりDMをいただければと思います。すぐに調査・対応します！
