会員登録(無料)
ログイン
スキルアップは今すぐこちら!▶

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

WordPress(ワードプレス)
この記事は約2分で読めます。

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

枠線(ボーター)を入れたいです!

枠線を入れてみましょう!

枠線を入れてみます。

高度な設定(追加CSSクラス)

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

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

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

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

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

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

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

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

.myborder01{
border:1px solid black;
}

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

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

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

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

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

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

まとめ

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

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

つづきはまた。

タイトルとURLをコピーしました