リッチカラムの端数ブロック調整

実装例

「端数を中央揃えにする」

「端数を横幅一杯にする(Fill)」

目次

「リッチカラムの端数ブロック調整」とは

・「2カラムでは大きすぎるし、3カラムでは端数が出る。4カラムではギュウギュウすぎる!」
・レスポンシブでいい感じに割り切れる数にしてたのに、後出し指示で追加されてしまった…

なんてことありませんか!?私はあります。

Emanon Premium ではカラムが横幅一杯に広がってくれたりするんですが、SWELLでは端数カラムはすべて左揃えになりますよね。

このブロックスタイルを導入すれば、トグルボタン一つで端数カラムを自然に整えることができるようになります。

これが…

スイッチ一つで自然な配置!

実装方法

コードスニペットを導入する

こちらのボタンをクリックしてスニペットをダウンロードします。

会員限定コンテンツ

ここは会員限定コンテンツです。

\お申込みはこちら/

コードスニペットをオンにします。
(コードスニペットが分からない方は使用方法ページをご覧ください。)

ブロックスタイルの使い方

  1. 編集画面を開き、通常通りリッチカラムブロックを設置します。
  2. 「リッチカラム(”カラム項目”ではなく)」の右側設定パネルに「Revify カスタム設定」が追加されています。適宜選択してください。
  3. これで完了です。CSSもJavaScriptも要りません。

「端数を中央揃えにする」

「端数を横幅一杯にする(Fill)」

注意点

  • カスタム設定が見つからない場合は、以下の点を確認してください。
    • コードスニペットがオフになっていないか
    • 「リッチカラム」ではなく「カラム項目」を選択してしまっていないか
  • ブロックスタイルのCSSは、編集画面にも適用されます。
  • SWELLの仕様変更(クラス名や詳細度の変更など)があってもレイアウトが崩れないことを保証するものではありません。
    (ただし、特別なリスクというわけではなく、CSSを記述してカスタムするのと同じです。)
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次