【WordPress】CSSで段落ブロックやカラムに枠線（ボーダー）を入れる方法

「ワードプレスのブロック（段落）に枠線を入れたい」という話はよく出ますが、今回は枠線（ボーダー）をCSSで装飾する方法についてご紹介していきます。

枠線を入れてみます。

高度な設定（追加CSSクラス）

プラグインを使用するという方法もあるのですが、今回はメンテンス（後の効率）上の観点から別の方法で設定します。ワードプレスのブロックエディタには、便利な「高度な設定」という機能があります。こちらを活用します。

特定のブロックを選択している際に、画面の右側にブロックの設定画面が表示されます。

この中に「追加CSSクラス」という設定項目があります。

こちらに任意のクラス名を入れます。今回は「myboader01」としました。

段落やブロックに枠線を入れる

このCSSクラス名を使ってCSSを適用させます。

外観＞カスタマイズでカスタマイザーの画面を開いたら「追加CSS」を開きます。

以下のように追加してみます。

.myborder01{
border:1px solid black;
}

ボーダーが追加されました！

枠線のデザインを調整する

枠の内側が少し窮屈な感じもしますので調整してみます。

paddingを使うと、要素の内側の余白を作れますので下記のように調整してみます。

.myborder01{
border:1px solid black;
padding:10px;
}

枠線に余白が作られました！

まとめ

このようにして、追加CSSを使って枠線を作ることができます。今回のように追加した名前を活用することで、同じ名前を指定した場所のCSSデザインを一斉に変更することができるようになります。

ぜひCSSも使えるようになっておきましょう😃

つづきはまた。