ワードプレスでおしゃれな囲み枠の作り方はソースコードのコピペだけ

ブログ

2024.12.18

こんにちは、解説ゾロです！

前回は「文字の幅」に合わせた、

ここに文字

ここに文字や文章

ここにも文字

こんな感じの「囲み枠」が簡単にできる内容でした。

が、

今回は、横いっぱいの「四角い枠」から「タイトル付き」の、

ここにタイトル

ここに文字や文章を入れる

こんな感じのおしゃれなワードプレスの「囲み枠」が、コピペするだけで簡単にできてしまう内容です。

今日は、ワードプレスで使えるおしゃれな「囲み枠」のコピペ用ソースコードのサンプルと各ソースコードの簡単な意味（命令内容）を併せた内容でお送りいたします。今日の「囲み枠」も楽しいので一緒にやりましょ！

前回の記事はこちら

ワードプレスで文字幅に合わせた囲み枠のサンプルコードで簡単に設置

ワードプレスの囲み枠の中から文字幅や文章の長さに合わせた囲み枠の解説です。シンプルな囲み枠やタイトル付きのサンプルもありますので「テキスト」の画面にペーストするだけでオシャレな文字を囲った枠が完成します。簡単で楽しいので一緒にやりましょ！

ワードプレスで「おしゃれな囲み枠」のソースコードの使い方
1. 「おしゃれな囲み枠」の使い方手順
2. 「おしゃれな囲み枠」のコードをペーストする場所
ワードプレス「おしゃれな囲み枠」サンプルの見方
ワードプレス「おしゃれな囲み枠」サンプル
最後に「7.ここに文字」の数値をちょっと遊んでみると、
まとめ

ワードプレスで「おしゃれな囲み枠」のソースコードの使い方

ワードプレスで使えるおしゃれな囲み枠はサンプルのソースコードで簡単に設置することができます。

「おしゃれな囲み枠」の使い方手順

全体的な手順の流れは、2つだけ！

下記サンプルの「ソースコード」をコピー
「テキスト」の画面にペースト

たったこれだけで「おしゃれな囲み枠」が完成します。

「おしゃれな囲み枠」のコードをペーストする場所

前回同様に下記サンプルでお好みの「コード」をコピーして、いつも記事を書いている「投稿を編集」の画面で「ビジュアル」から「テキスト」の画面に変更し「ペースト」するだけで「ワードプレスのおしゃれな囲み枠」が簡単に作れます。

ワードプレス「おしゃれな囲み枠」サンプルの見方

「おしゃれな囲み枠の「サンプル」は次のように表示しています。

表示される囲み枠の「デザイン」

コピペ用の「ソースコード」

各ソースコードの簡単な「命令内容」

特に「説明」がある場合のスペース

ワードプレス「おしゃれな囲み枠」サンプル

それでは、横いっぱいのおしゃれな囲み枠のサンプルコードをおおくりいたします。「文字の幅に合わせた囲み枠」の場合は、ソースコードに display:inline-block; を追加すればOKです。

ワードプレスおしゃれな囲み枠「線種別」サンプル

1.ここに文字

<div style=”border: 1px solid;”>1.ここに文字</div>

枠線の情報＝borde
　枠線の種類＝実線（solid）
　枠線の太さ＝1px

文字が枠の線に近すぎていますので、上記のコードに「padding」というコードを追加して、今回は文字の上下左右に10px分の余白を挿入してバランスを良くします。（枠の外側も少し余裕が欲しければ　margin: ○○px;　も追加してください）

2.ここに文字

<div style=”border: 1px solid; padding: 10px;”>2.ここに文字</div>

枠線の情報＝border
　枠線の種類＝実線（solid）
　枠線の太さ＝1px

枠内の余白＝padding
　余白の数値＝10px

padding（パディング）で10px分の余白を追加したことで、枠線と文字のバランスがよくなりました。この、10の数値の上下で余白も増減します。

3.ここに文字

<div style=”border: 3px double; padding: 10px;”>3.ここに文字</div>

枠線の情報＝border
　枠線の種類＝二重線(double)
　枠線の太さ＝3px

枠内の余白＝padding
　余白の数値＝10px

4.ここに文字

<div style=”border: 3px dashed; padding: 10px;”>4.ここに文字</div>

枠線の情報＝border
　枠線の種類＝破線(dashed)
　枠線の太さ＝3px

枠内の余白＝padding
　余白の数値＝10px

5.ここに文字

<div style=”border: 5px dotted; padding: 10px;”>5.ここに文字</div>

枠線の情報＝border
　枠線の種類＝点線(dotted)
　枠線の太さ＝5px

枠内の余白＝padding
　余白の数値＝10px

ワードプレスおしゃれな囲み枠「角の丸み・背景色・カラー」サンプル

6.ここに文字

<div style=”border: 1px solid; border-radius: 5px; padding: 10px;”>6.ここに文字</div>

枠線の情報＝border
　枠線の種類＝実践(solid)
　枠線の太さ＝1px

角を丸く＝border-radius
　丸さ＝5px
枠内の余白＝padding
　余白の数値＝10px

7.ここに文字

<div style=”border: 1px solid; border-radius: 0 30px 0 30px; padding: 10px;”>7.ここに文字</div>

枠線の情報＝border
　枠線の種類＝実践(solid)
　枠線の太さ＝1px

角を丸く＝border-radius
　丸さ＝0 30px 0 30px
枠内の余白＝padding
　余白の数値＝10px

角を丸く命令する「border-radius」は、4か所それぞれの角の丸さを指定できます。指定する順番は、左上、右上、右下、左下で、数値を入れていきます。丸さの数値が0の場合は、丸さが無いので直角のままです。この囲み枠の場合は、左上は「0」ですので直角、右上は「30px」の丸さ、右下も「0」ですので直角、左下は「30px」の丸さ、という命令になります。

8.ここに文字

<div style=”border: 1px solid; border-radius: 5px; padding: 10px; background: #ffff66;”>8.ここに文字</div>

枠線の情報＝border
　枠線の種類＝実践(solid)
　枠線の太さ＝1px
角を丸く＝border-radius

　丸さ＝5px
枠内の余白＝padding
　余白の数値＝10px
背景色＝background: #ffff66（黄色）

9.ここに文字

<div style=”border: 2px solid#ff3300; border-radius: 5px; padding: 10px; background: #ffff66;”>9.ここに文字</div>

枠線の情報＝border

　枠線の種類＝実践(solid)

　枠線の太さ＝2px

　枠線の色＝#ff3300（赤）

角を丸く＝border-radius

　丸さ＝5px

枠内の余白＝padding

　余白の数値＝10px

背景色＝background: #ffff66（黄色）

10.ここに文字

<div style=”border: none; border-radius: 5px; padding: 10px; background: #ffff66;”>10.ここに文字</div>

枠線の情報＝border
　枠線の種類＝無し(none)
角を丸く＝border-radius
　丸さ＝5px

枠内の余白＝padding
　余白の数値＝10px
背景色＝background: #ffff66（黄色）

枠の線を消してスッキリしたい場合は「border」に「none 」を書くことで、枠線が消えます。

11.ここに文字

<div style=”border: none; border-radius: 20px; padding: 10px; background: #ffff66;”>11.ここに文字</div>

枠線の情報＝border
　枠線の種類＝無し(none)
角を丸く＝radius

　丸さ＝20px
枠内の余白＝padding
　余白の数値＝10px
背景色＝background: #ffff66（黄色）

12.ここに文字

<div style=”border: 3px dashed; padding: 10px; background: #e6002f; color: #ffffff;”><strong>12.ここに文字</strong></div>

枠線の情報＝border
　枠線の種類＝破線(dashed)
　枠線の太さ＝3px

枠内の余白＝padding
　余白の数値＝10px
背景色＝background: #e6002f（赤）
枠線・文字の色＝color: #ffffff（白）

ワードプレスおしゃれな囲み枠「タイトル付き」サンプル

13.ここにタイトル

ここに文字や文章を入れる

<div style=”position: relative; border: 2px solid #0000ff; padding: 20px 10px;”>
<div style=”position: absolute; top: -15px; left: 15px; background: #0000ff; color: #ffffff; padding: 0 10px;”><b>13.ここにタイトル</b></div>
<div style=”color: #000000;”>ここに文字や文章を入れる</div>
</div>

タイトル配置＝position: relative枠線の情報＝border
　枠線の種類＝実践(solid)
　枠線の太さ＝2px
　枠線の色＝#0000ff（青）
枠内の余白＝padding
　余白の数値＝20px 10px

タイトル配置＝position: absolute; top: -15px; left: 15px
タイトル背景色＝background: #0000ff（青）
タイトル文字色＝color: #ffffff(白)
枠内の余白＝padding
　余白の数値＝0 10px
文字色＝color: #000000（黒）

14.ここにタイトル

ここに文字

<div style=”border: 2px solid #008800;”>
<div style=”background: #008800; color: #ffffff; padding: 0 10px;”><b>14.ここにタイトル</b></div>
<div style=”padding: 10px; color: #000000;”>ここに文字</div>
</div>

枠線の情報＝border
　枠線の種類＝実践（solid）
　枠線の太さ＝2px
　枠線の色＝#008800（緑）

タイトル背景色＝background:#008800（緑）
タイトル文字色＝color: #ffffff(カラーコード白)
枠内の余白＝padding
　余白の数値＝0 10px
枠内の余白＝padding
　余白の数値＝10px
文字色＝color: #000000（黒）

15.ここにタイトル

ここに文字を入れる

<div style=”position: relative; border: 2px solid #ff99ff; padding: 20px 10px;”>
<div style=”position: absolute; top: -15px; left: 15px; background: #ffffff; color: #ff99ff; padding: 0 10px;”><b>15.ここにタイトル</b></div>
<div style=”color: #ff00ff;”>ここに文字を入れる</div>
</div>

タイトル配置＝position: relative
枠線の情報＝border
　枠線の種類＝実践(solid)
　枠線の太さ＝2px
　枠線の色＝#ff99ff（ピンク）
枠内の余白＝padding
　余白の数値＝20px 10px

タイトル配置＝position: absolute; top: -15px; left: 15px
タイトル背景色＝background: #ffffff（白）
タイトル文字色＝color: #ff99ff(ピンク)
枠内の余白＝padding
　余白の数値＝0 10px
文字色＝color: #ff00ff（濃ピンク）

最後に「7.ここに文字」の数値をちょっと遊んでみると、

ここに文字

<div style=”border: 1px solid; border-radius: 60px 0 60px 0; padding: 30px;”>ここに文字</div>

や、「border-radius」の丸さの命令と「padding」の余白の命令を「px」から「％」にしてみると、

ここに文字

<div style=”border: 1px solid; border-radius: 50%; background: #ffff99; padding: 30%; text-align: center;”><strong>ここに文字</strong></div>

こんなことも、できちゃいます！笑