「ワードプレスのブロック(段落)に枠線を入れたい」という話はよく出ますが、今回は枠線(ボーダー)をCSSで装飾する方法についてご紹介していきます。
枠線(ボーター)を入れたいです!
枠線を入れてみましょう!
枠線を入れてみます。
高度な設定(追加CSSクラス)
プラグインを使用するという方法もあるのですが、今回はメンテンス(後の効率)上の観点から別の方法で設定します。ワードプレスのブロックエディタには、便利な「高度な設定」という機能があります。こちらを活用します。
特定のブロックを選択している際に、画面の右側にブロックの設定画面が表示されます。
この中に「追加CSSクラス」という設定項目があります。
こちらに任意のクラス名を入れます。今回は「myboader01」としました。
段落やブロックに枠線を入れる
このCSSクラス名を使ってCSSを適用させます。
外観>カスタマイズでカスタマイザーの画面を開いたら「追加CSS」を開きます。
以下のように追加してみます。
.myborder01{
border:1px solid black;
}
ボーダーが追加されました!
枠線のデザインを調整する
枠の内側が少し窮屈な感じもしますので調整してみます。
paddingを使うと、要素の内側の余白を作れますので下記のように調整してみます。
.myborder01{
border:1px solid black;
padding:10px;
}
枠線に余白が作られました!
まとめ
このようにして、追加CSSを使って枠線を作ることができます。今回のように追加した名前を活用することで、同じ名前を指定した場所のCSSデザインを一斉に変更することができるようになります。
ぜひCSSも使えるようになっておきましょう😃
つづきはまた。