カスタムCSSを追加することで、予め用意されたレイアウトをサイトのデザインに合わせてカスタマイズすることができます。

ここでは、元々用意されていた「Three column（3カラム）」というレイアウトを、4カラムのレイアウトに変更します。

1. ウィジェットの編集画面より「デザイン」のタブを開き、「カスタムCSS」を確認します。

2. 右クリックをして「検証」をクリックします。

3. 矢印ボタンをクリックし、レイアウトを変更したい項目にカーソルを合わせます。

4. ここでは、カラム数を4つに変更させるために、”col-xs-8″というクラスのwidthを、「検証」で開いた画面の中で直接33%から25%へと変更します。

5. 先ほど変更した値をクラス名ごと、コピー＆ペーストで最初に確認した「カスタムCSS」という項目の中に貼り付け「保存」をクリックします。

6. 以上で設定完了です。

CSSの一例についてはこちら：カスタムCSS追加例の一覧