Lightning G3で枠線ボックスの横幅をカスタマイズする方法

WordPressのテーマ「Lightning G3」は、ブロックエディタで簡単に美しいデザインを作成できます。しかし、デフォルトの「枠線ボックス」ブロックは、コンテンツ幅いっぱいに表示されるため、「もう少し狭くしたい」「特定の横幅にしたい」と考える方もいるでしょう。

この記事では、Lightning G3の枠線ボックスを好きな横幅にするためのCSSカスタマイズ方法を解説します。

枠線ボックスのブロックに「追加CSSクラス」を設定する

カスタマイズしたい枠線ボックスに目印を付けます

1. ブロックエディタで枠線ボックスブロックを選択します。
2. 画面右側のサイドバーにある「高度な設定」を開きます。
3. 「追加CSSクラス」の欄に、任意のクラス名を入力します。ここでは例としてcustom-border-boxと入力します。

このクラス名は、後ほどCSSで指定する際に必要になります。半角英数字で、ハイフン「-」も使用可能です。

CSSを記述する

次に、先ほど設定したクラス名を使って、CSSを記述します。

Webサイト全体で使用する場合
WordPressの管理画面から「外観」→「カスタマイズ」に進み、「追加CSS」の項目を開きます。
以下のCSSコードをコピー＆ペーストして、必要に応じてwidthの値を変更してください。

1Pだけで使用する場合
画面右側のサイドバーにある「カスタムCSS」を開きます。
以下のCSSコードをコピー＆ペーストして、必要に応じてwidthの値を変更してください。

.custom-border-box {
    max-width: 200px;
    margin: 0 auto;
}

max-width: 200px;　枠線ボックスの最大横幅を600ピクセルに指定します。px以外にも%などで指定することも可能です。
margin: 0 auto;　このコードは、枠線ボックスを親要素の中央に配置するためのものです。これにより、左右の余白が自動で計算され、均等になります。

公開して確認する

CSSを貼り付けたら、画面上部の「公開」ボタンをクリックして変更を保存します。これで、先ほどクラス名を設定した枠線ボックスの横幅が、指定したサイズに変更され、中央に配置されます。

創人塾はあなたのデザインキャリアをしっかりサポートします。無料相談で、さらに詳しい情報をゲットしてください！

▶創人塾の詳細はこちら