ワードプレスの囲み枠をおしゃれにするには？プラグインを紹介！

ワードプレスの囲み枠は、記事の重要な部分を目立たせたり、内容に変化を出したいときに便利です。

テーマによっては、標準でおしゃれな囲み枠が用意されていたりしますが、無料のテーマだと、備わっていない場合があります。

そこで、こちらの記事では、ワードプレスで「囲み枠」を作る方法について解説したいと思います。

ワードプレスの囲み枠とは

ワードプレスの囲み枠とは、次のようなものです。

このように、文章や画像を「囲う枠」のことです。

囲み枠の中でさらに、別の枠をつけることもできます。

枠を使いすぎると、コンテンツが見づらくなることもあるので、注意が必要です。

囲み枠を使うメリット

ワードプレスで囲み枠を使うことで次のようなメリットがあります。

ブログの記事は、書籍や雑誌と違って、ユーザーに最初から最後まで読まれることは少ないです。

ユーザーは「自分にとって必要な情報だけを知りたい」のです。

ブログは、結論から先に書くことが大前提です。

そのために、囲み枠を使って、要点をわかりやすく目立たせることは、ユーザーにとって、非常に役立ちます。

また、囲み枠を使うことで、文字ばかりの記事にならず、変化が生まれます。

画像や動画の埋め込みと同じように、読者を飽きさせずに最後まで記事を読んでもらえやすくする効果が期待できます。

囲み枠は、「かっこいい」や「かわいい」といったデザイン上の効果だけを狙っているわけではないのです。

囲み枠を使う際の注意点

囲み枠を使う際には、次のような点に注意する必要があります。

囲み枠を、プラグインを使わずに独自で作成する場合、表示崩れに注意が必要です。

枠線の一部が表示されていなかったり、枠内のコンテンツと枠線の間の余白がなかったりすることがよくあります。

また、囲み枠はデザインの面でも見た目を良くしてくれますが、調子に乗って、1つの記事内でたくさんの色を使うと、どれが一番重要なのかわかりづらくなります。

1記事内の枠線の色は、多くても3種類以内に収めるようにしましょう^^

さらに、囲み枠は、枠内のコンテンツと枠線の間に余白を必要とするため、1行に表示できる文字数が少なくなります。

スマホ画面では、横幅が狭いため、囲み枠を使うことで、改行が増えてしまい、文章が読みづらくなる場合があります。

囲み枠を使う場合は、スマホ画面で、表示くずれがないかを確認するようにしましょう！

ワードプレスの囲み枠をつける方法

ワードプレスのブロックエディタでは、標準では囲み枠をつけることはできません。

ワードプレスで囲み枠をつける方法は、以下の通りです。

方法①カスタムHTMLとCSSを使う

カスタムHTMLとCSSを使う場合、Googleで検索してテンプレートを探すことになります。

コードが見つかれば、コピーするだけで囲み枠を作ることができますが、枠内のコンテンツをHTMLで記述しなければなりません。

いずれにしても、HTMLの知識が必要になるため、初心者には少しハードルが高いです。

方法②ブロック要素とCSSを使う

既存ブロックとCSSを使う場合、枠内のコンテンツも「ブロック要素」なので、HTMLをほとんどいじることなく、「囲み枠」を作ることができます。

複数のブロックを「グループ化」することで、囲み枠の中のコンテンツを増やすことができます。

最初に用意するブロック要素の中を、「空白」または「ダミー」にしておくことで、「囲み枠」のテンプレートを作成することができます。

作成したグループボックスを「再利用ブロック」に登録するだけです♪

方法③プラグインを使う

「囲み枠」を作成する専用のプラグインはありません。

ですが、あらかじめ「囲み枠のテンプレート」を作成しておき、必要な時に呼び出せる機能を持ったプラグインがあります。

それが、「AddQuicktag」です。

①AddQuicktagをインストールして有効化

②あらかじめ「囲み枠」のテンプレートを用意する

開始タグと終了タグは、Googleで検索した「囲い枠」を表示するコードをコピーします。

開始タグの例

<div style=”padding: 10px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 10px; width: 50%;”>

終了タグの例

</div>

AddQuicktagは、ブロックエディタでは、そのままだと使えません。

作成したタグを使用するためには、「クラシックブロック」を追加して、その中で「タグ」を呼び出しましょう。

方法④テーマの標準機能を使う

テーマの標準機能を使う方法がもっとも簡単です。

こちらのサイトでは「JIN」テーマを使っています。

JINの場合、下図の位置に囲み枠に相当する「シンプルボックス」があります。

ちなみに、見出しつきボックスの場合、次のように、囲み枠の上部に見出しスペースが追加されます。

このように、テーマに「囲み枠」が標準で搭載されていれば、とても簡単に「囲み枠」を作ることができます。

ただ、無料テーマなど一部のテーマには、備わっていない場合があります。

テーマを選ぶ際には、「囲み枠」が標準で備わっているかどうかも、選択の基準に含めるといいですね。

ワードプレスのおしゃれな囲み枠デザイン

ワードプレスで使えるおしゃれな囲み枠デザインをいくつかご紹介しておきます。

基本の囲み枠「背景色」

追加するHTML

<div class="normal-box1">
  <p>ここにテキスト</p>
</div>

追加するCSS

.normal-box1{
  margin: 1em 0;
  padding: 1em;
  background-color: #b3e5fc;
}

.normal-box p{
  margin: 0;
  padding: 0;
}

基本の囲み枠「丸みを帯びた角にする」

追加するHTML

<div class="normal-box2">
  <p>ここにテキスト</p>
</div>

追加するCSS

.normal-box2{
  margin: 1em 0;
  padding: 1em;
  background-color: #fce4ec;
  border-radius: 10px;
}

.normal-box2 p{
  margin: 0;
  padding: 0;
}

基本の囲み枠「枠線をつける」

追加するHTML

<div class="normal-box4">
  <p>ここにテキスト</p>
</div>

追加するCSS

.normal-box4{
  margin: 1em 0;
  padding: 1em;
  background-color: #b3e5fc;
  border: solid 3px #29b6f6;
}

.normal-box p{
  margin: 0;
  padding: 0;
}

おしゃれな囲み枠「枠線を点線にする」

追加するHTML

<div class="normal-box6">
<p>ここにテキスト</p>
</div>

追加するCSS

.normal-box6{
  margin: 1em 0;
  padding: 1em;
  background-color: #fff9c4;
  border: dashed 3px #ffca28;
}

.normal-box6 p{
  margin: 0;
  padding: 0;
}

おしゃれな囲み枠「点線を囲み枠の内側にする」

追加するHTML

<div class="fashionable-box1">
  <p>ここにテキスト</p>
</div>

追加するCSS

.fashionable-box1{
  margin: 1em 10px;
  padding: 1em;
  background-color: #b3e5fc;
  border: dashed 3px #29b6f6;
  box-shadow: 0 0 0 10px #b3e5fc;
  border-radius: 5px;
}

.fashionable-box1 p{
  margin: 0;
  padding: 0;
}

おしゃれな囲み枠「タイトル付きの囲み枠にする」

追加するHTML

<div class="title-box2">
<div class="title-box2-title">タイトル</div>
  <p>ここにテキスト</p>
</div>

追加するCSS

.title-box2{
  margin: 1em 0;
  padding: 1.5em 1em 1em;
  position: relative;
  border: 1px solid #81d4fa;
  background-color: #e1f5fe;
}

.title-box2-title{
  position: absolute;
  top: -0.8em;
  left: 20px;
  font-weight: bold;
  font-size: 1.1em;
  background-color: #81d4fa;
  color: #fff;
  padding: 0 0.5em;
}

.title-box2 p{
  margin: 0;
  padding: 0;
}

おしゃれな囲み枠「タイトル付きの囲み枠にする」②

追加するHTML

<div class="title-box3">
<div class="title-box3-title">タイトル</div>
  <p>ここにテキスト</p>
</div>

追加するCSS

.title-box3{
  margin: 1em 0;
  background-color: #e3f2fd;
  border: 2px solid #2196f3;
  letter-spacing: .3px;
}

.title-box3-title{
  color: #fff;
  font-weight: bold;
  background-color: #2196f3;
  padding: 4px 6px;
  text-align: center;
}

.title-box3 p{
  margin: 0;
  padding: 1em;
}

おしゃれな囲み枠「タイトル付きの囲み枠にする」③

追加するHTML

<div class="title-box4">
<div class="title-box4-title">タイトル</div>
  <p>ここにテキスト</p>
</div>

追加するCSS

.title-box4{
  margin: 2em 0 1em 0;
  background-color: #f3e5f5;
  border: 2px solid #9c27b0;
}

.title-box4-title{
  font-size: 16px;
  position: absolute;
  margin-top: -37px;
  margin-left: -2px;
  background-color: #9c27b0;
  color: #fff;
  font-weight: bold;
  border-radius: 4px 4px 0 0;
  padding: 4px 10px;
}

.title-box4 p{
  margin: 0;
  padding 1em;
}

この他にも、いろいろなテンプレートがあります。

気に入った囲み枠を見つけたら、「再利用ブロック」に登録したり、「AddQuicktag」に登録して、いつでも使えるようにしておくと便利です。

ワードプレスの囲み枠をおしゃれにするには？プラグインを紹介！のまとめ

ワードプレスで囲み枠を作る方法は、主に以下の通りです。

おすすめの方法は、「元々、標準機能に備わっているテーマを選ぶ」です。

もし、お使いのテーマが「囲み枠」を搭載していない場合、既存ブロックとCSSを使う方法がおすすめです！

また、プラグイン「AddQuicktag」を使うことでも、「囲み枠」を作ることができます。

その場合、HTMLのコードをGoogleで検索して、気に入ったデザインのものをコピーして作成しましょう！

また、囲み枠を作る際には以下の点に注意が必要です。

囲み枠は、「重要な部分を目立たせる」ことができて、ユーザーにとっても役立つものですが、表示くずれに注意が必要です。

特に、自分でHTMLを作成した場合は、スマホ画面も含めて、レイアウトが崩れていないかチェックをするようにしておきましょう！^^b

最後までご覧いただき、ありがとうございました！