ステップ１　枠をつけたいブロック部分を選択しHTMLとして編集を選びます

まず枠をつけたい部分のブロックを選択し、右側の点が縦に並ぶボタンからHTMLとして編集を選びます。

ステップ２　枠をつけたい部分を囲むPタグに枠のデザインを指定します。

Pタグを下記のように
style=”border:2px solid blue;border-radius:10px;padding:10px”
を追加して書き換えます

<p>この部分に枠をつけたい！</p>

↓

<p style="border:2px solid blue;border-radius:10px;padding:10px">この部分に枠をつけたい！</p>

ステップ３　ブロックをHTMLに変換し、プレビューしてみます

HTMLに変換しますか？というダイアログが表示されますので有効にし、プレビューボタンで枠線を確認することができるようになります。

枠線の色を変える

先ほど書き込んだスタイルのコードを見ていきましょう。
border:2px solid blue;border-radius:10px;padding:10px

・2px solid blue　は２ピクセルの枠で、１重線、線の色は青色という意味です。線の太さや、色を指定することができます。
※色指定できる名称等はこちらのページでご確認ください

・border-radius:10px　の部分は枠線の角の丸めを１０PXのサイズにするということです。数値を大きくするとより丸めが大きくなります。

・padding:10px　の部分は枠内の上下左右の余白の大きさを示しています。

WordPress ワードプレスの引っ越し、カスタマイズ、セキュリティー対策、開発のご相談・ご依頼はお気軽にワードプレスドクターのお送りください

関連記事:

  1. ワードプレスのプラグインを作成してみよう：ショートリンク生成プラグイン
    ワードプレスでプラグインを作る方法をこのページの右上に付いている、「ショートリンク生成機能」として実際に動作しているプログラムを全てコードも含めて公開いたします。 このプラグインは、ワードプレスのパーマリンクを使用すると長ったらしい日本語のリンクとなり、それはSEO効果があるのですがリンクをしたいユーザーにとってはリンクしづらいという問題点を解決する為に作成しました。 ショートリンクはワードプレスの基本URL表記方式　？p＝形式　で取得しています（このURLにアクセスするとワードプレスが自動でパーマリンクにリダイレクトしてくれます）。...
  2. ワードプレスにアコーディンによるFAQを組み込んでみましょう
    今回はワードプレスの特定のページにアコーディオンを組み込む方法を解説いたします。...
  3. ContactForm7　コピペで1分で作れるスタイル付きおしゃれコンタクトフォーム
    コピペで1分で作れるスタイル付きおしゃれコンタクトフォーム 下記のコンタクトフォームコードをワードプレスの管理画面＞お問い合わせ＞新規追加　よりコピペで挿入されてみてください。 <style>...
  4. ワードプレスで数字付きページネーションを出力する方法
    ワードプレスには組み込みでページネーションを出力する関数があります。この関数を使いページネーションを出力する方法を解説いたします。...
  5. ワードプレス(WordPress)の投稿でマークダウン記法を使えるようにする方法
    マークダウン記法とは、HTMLをもっと簡易にしたものと考えて差し支えありません。もともと、よく使うHTMLの文法だけをより簡略化して利用できるようにしてプログラムの説明文などを記載するために作られたものです。マークダウン記法を使うと、ワードプレスの投稿を「テキスト」モードで作っている方は特に、より高速に記事を執筆できるようになりますよ。 今回はこのマークダウン記法を投稿で使う方法をご紹介します。...