WordPress 段落ブロックに枠線を入れる方法～CSSデザインサンプル

WordPressの段落ブロックに枠線（囲み線）を付ける方法をご紹介します。段落ブロックには、クリックだけで枠線を付与してくれるような便利機能は用意されていません。CSSなどを使って付与する必要があります。

今回は、段落ブロックの「高度な設定」機能を使って、CSSで段落ブロックに枠線を追加します。いくつかCSSのデザインサンプルを載せています。よろしければコピペしてご利用ください。

段落ブロックに枠線を付ける方法

STEP１：「高度な設定」にCSSクラスを追加する

枠線を付けたい段落ブロックを選択します。画面右側に「高度な設定」が表示されます。「追加 CSS クラス」に好みのクラス名を追加します。

今回は「waku」と付けています。

参考
ソースで見ると、段落<p>のタグが<p class="waku">に変更されます。

STEP２：スタイルシートを追加する

先ほど付けたクラス名に対するスタイル（デザイン）を、ご自身の方法でスタイルシートに記載します。どこを触ればいいか分からない場合は、こちらから追加できます。

「管理画面」＞「外観」＞「カスタマイズ」と進みます。

「追加CSS」へ。

ご自身のサイトに、オリジナルのスタイルシートを記述できるものです。

こちらに枠線のスタイルを入力します。

.waku {
  border: 1px solid #000;
}

「公開」ボタンを押すと保存（反映）されます。
これで、「waku」のクラスを追加した段落ブロックに枠線が追加されます。

デザインサンプル（コピペ用）

CSSのサンプルコードです。枠線の色は「#…」は好きな色を指定してください。

段落ブロックの背景色
枠線のスタイルに背景色を追加することもできますが、段落ブロック選択時に管理画面の右側に表示される「色設定（背景色）」で指定可能です。

.waku1 {
  padding: 1em; /*段落余白*/
  border: 3px solid #f582ae; /*枠線*/
}

.waku2 {
  padding: 1em; /*段落余白*/
  border: 3px solid #f582ae; /*枠線*/
  border-radius: 10px; /*角丸*/
}

.waku3 {
  padding: 1em; /*段落余白*/
  border: 3px solid #f582ae; /*枠線*/
  border-radius: 10px; /*角丸*/
}

.waku4 {
  padding: 1em; /*段落余白*/
  border: 5px double #f582ae; /*枠線*/
  border-radius: 10px; /*角丸*/
}

.waku5 {
  padding: 1em; /*段落余白*/
  border-top: 5px solid #f582ae; /*上の枠線*/
  border-bottom: 5px solid #f582ae; /*下の枠線*/
}

.waku6 {
  padding: 1em; /*段落余白*/
  border-top: 1px solid #f582ae; /*上の枠線*/
  border-left: 10px solid #f582ae; /*左の枠線*/
  border-right: 1px solid #f582ae; /*右の枠線*/
  border-bottom: 1px solid #f582ae; /*下の枠線*/
}

.waku7 {
  padding: 1em; /*段落余白*/
  border-top: 1px solid #f582ae; /*上の枠線*/
  border-left: 1px solid #f582ae; /*左の枠線*/
  border-right: 2px solid #f582ae; /*右の枠線*/
  border-bottom: 2px solid #f582ae; /*下の枠線*/
}

.waku8 {
  padding: 1em; /*段落余白*/
  border: 2px solid #f582ae; /*枠線*/
  border-radius: 30px 0 30px 0; /*角丸*/
}

.waku9 {
  padding: 1em; /*段落余白*/
  border: 2px solid #f582ae; /*枠線*/
  border-radius: 150px 20px 150px 20px / 20px 150px 20px 150px; /*角丸*/
}

まとめ

段落ブロックの枠線を追加する方法をご紹介しました。「高度な設定」でクラスを追加し、そのクラスに対するスタイルをスタイルシートに記述することで枠線を付与できます。

この方法は、他のブロックで枠線を追加する際にも基本的に同じように利用できます。見出しブロックなどは枠線（下線が引かれているなど）がもともとデザインされている場合があります。その場合は、border-width: 0px;をスタイルにまず追加すると、うまくいくかもしれません。