こんにちは、解説ゾロです！
ワードプレスの「囲み枠」って、ご存じですか？
コレです⇩
➀ここに文字
この「囲み枠」を表示するソースコードは、<div style=”border: 1px solid;”>➀ここに文字</div> に、なります・・・が、文字が線に近すぎて少し窮屈なので、上記のコードに、
padding: 10px;
（パディング）
という余白を、文字の上下左右に10px分を追加してバランスを良くします。（枠の外側も少し余裕が欲しければ margin: ○○px; も追加してください）
➁ここに文字
<div style=”border: 1px solid; padding: 10px;“>➁ここに文字</div>
すると、とても読みやすくなります。今日は、この➁の読みやすいソースコードを基本にして、文字幅や文章の長さに合わせたデザインの「囲み枠」をご紹介します。こんなやつです⇩
➂ここに文字
➃ここに文字や文章
➄ここにも文字や文章
オシャレで、とってもインパクトがあります！
コレ、自分でソースコードを書いて！なんて言われたらとても難しそうですが、やってみると、とっても簡単なのです。本日基本とした「囲み枠」の➁のソースコードに、
display:inline-block;
を追加するだけで、ワードプレスで文字幅に合わせた囲み枠が完成してしまいます。ハイ「➅のここに文字」が完成しました！笑
➅ここに文字
<div style=”display:inline-block; border: 1px solid; padding: 10px;“>➅ここに文字</div>
とても簡単に書けてしうのですが、コードの書き方はともかく、当記事では文字幅に合わせた囲み枠のサンプルコードを表示していますので、もっと簡単にコピペでご利用いただけます。
さらに、解説記事をよく見てみると、このソースコードは「枠の線の種類だ！」とか「これは文字の色だ！」「背景の色だ！」などがわかり、➂➃➄のようにカスタマイズすることが簡単にできるようになりますので、あなた様のお好みの文字幅に合わせた囲み枠のソースコードも書けちゃいます。笑
今日は、文字幅に合わせた囲み枠の解説をいたします。いつも記事を書いている「投稿を編集」の「ビジュアル」から「テキスト」の画面にポチっとして、ソースコードをコピペするだけで簡単にオシャレな囲み枠が完成します。楽しいので一緒にやりましょ！
前回の記事はこちら
消えた「スタイル」編集ツールをCocoonクラシックエディターで復活
WordPressテーマCocoonの「スタイル」編集ツールが消えてしまう原因と対処法をクラシックエディターで解説いたします。原因はプラグイン同氏が干渉して衝突するコンフリクトではありませんので簡単に解決できます。一緒にやりましょ！
ワードプレス「文字幅に合わせた囲み枠」サンプルの使い方
ワードプレスの「文字幅に合わせた囲み枠」は、とても簡単に使えることができ、カスタマイズも可能です。
「文字幅に合わせた囲み枠」の使い方手順
最初に、全体的な手順は以下になります。
- 下記サンプルの「ソースコード」をコピー
- 「テキスト」の画面にペースト
これだけで「文字幅に合わせた囲み枠」が完成します。
「囲み枠」のコードをペーストする場所
下記サンプルでお好みの「コード」をコピーして、いつも記事を書いている「投稿を編集」の画面で「ビジュアル」から「テキスト」の画面に変更し「ペースト」するだけで「文字幅に合わせた囲み枠」が完成します。
ワードプレス「文字幅に合わせた囲み枠」サンプル
今日の「文字幅に合わせた囲み枠」を作る場合に追加するソースコードはこちらです。
display:inline-block;
ワードプレス囲み枠「線種別」サンプル
<div style=”display:inline-block; border: 1px solid; padding: 10px;“>ここに文字</div>
枠線の種類＝実線（solid） 枠線の太さ＝1px
<div style=”display:inline-block; border: 3px double; padding: 10px;”>ここに文字</div>
枠線の種類＝二重線(double) 枠線の太さ＝3px
<div style=”display:inline-block; border: 3px dashed; padding: 10px;”>ここに文字</div>
枠線の種類＝破線(dashed) 枠線の太さ＝3px
<div style=”display:inline-block;border: 5px dotted; padding: 10px;”>ここに文字</div>
枠線の種類＝点線(dotted) 枠線の太さ＝5px
ワードプレス囲み枠「角の丸み」「背景色」「カラー」サンプル
<div style=”display:inline-block; border:1px solid; border-radius: 5px; padding: 10px;”>ここに文字</div>
枠線の種類＝実践(solid) 枠線の太さ＝1px 角を丸く＝radius 丸さ＝5px
<div style=”display:inline-block; border:1px solid; border-radius: 5px; padding: 10px; background: #ffff66;“>ここに文字</div>
枠線の種類＝実践(solid) 枠線の太さ＝1px 角を丸く＝radius 丸さ＝5px
背景色＝background: #ffff66（黄）
<div style=”display:inline-block; border:2px solid#ff3300; border-radius: 5px; padding: 10px; background: #ffff66;“>ここに文字</div>
枠線の種類＝実践(solid) 枠線の太さ＝2px 枠線の色＝#ff3300（赤）
角を丸く＝radius 丸さ＝5px
背景色＝background: #ffff66（黄）
<div style=”display:inline-block; border:none; border-radius: 5px; padding: 10px; background: #ffff66;“>ここに文字</div>
枠線の種類＝無し(none) 角を丸く＝radius 丸さ＝5px
背景色＝background: #ffff66（黄）
<div style=”display:inline-block; border:none; border-radius: 20px; padding: 10px; background: #ffff66;“>ここに文字</div>
枠線の種類＝無し(none) 角を丸く＝radius 丸さ＝20px
背景色＝background: #ffff66（黄）
<div style=”display: inline-block; border: 3px dashed; padding: 10px; background: #e6002f; color: #ffffff;”><strong>➄ここに文字</strong></div>
枠線の種類＝破線(dashed) 枠線の太さ＝3px 枠線・文字の色＝#ffffff（白） 背景色＝background: #e6002f（赤）
ワードプレス囲み枠「タイトル付き」サンプル
<div style=”display:inline-block; 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>ここにタイトル</b></div><div style=”color:#000000;”>ここに文字や文章を入れる</div></div>
枠線の種類＝実践(solid) 枠線の太さ＝2px 枠線の色＝#0000ff（青）
タイトル配置＝position: relative position: absolute
タイトル背景色＝background: #0000ff（青）
タイトル文字色＝#ffffff(白) 文字色＝＃000000（黒）
<div style=”display:inline-block; border: 2px solid#008800;”><div style=” background: #008800; color: #FFFFFF; padding: 0 10px;”><b>ここにタイトル</b></div><div style=”padding: 10px; color: #000000;”>ここに文字</div></div>
枠線の種類＝実践（solid） 枠線の太さ＝2px 枠線の色＝#008800（緑）
タイトル背景色＝background:#008800（緑）
タイトル文字色＝#ffffff(白) 文字色＝＃000000（黒）
<div style=”
display: inline-block;
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>ここにタイトル</b></div>
<div style=”color:
#ff00ff;”>ここに文字を入れる</div></div>
枠線の種類＝実践(solid) 枠線の太さ＝2px
枠線の色＝#FF99FF（ピンク）
タイトル配置＝position: relative position: absolute
タイトル背景色＝background: #ffffff（白）
タイトル文字色＝#FF99FF(ピンク) 文字色＝#ff00ff（濃ピンク）
まとめ
ワードプレスの文字幅に合わせた囲み枠のサンプルと解説の内容をおおくりいたしました。
思っていたより簡単に使えて、カスタマイズもできますので、色々組み合わせて楽しい「囲み枠」を作ってくださいませ！
楽しくやれば、うまくいく！笑
最後までお読みいただき、大変ありがとうございました。
では、また。解説ゾロでした！
関連記事：ソースコードのハイライト表示がWordPressのCocoonなら簡単
関連記事：WordPressのショートコードを文字列のまま本文に表示させる方法
関連記事：仕事が速い人の定番【ショートカットキー便利ランキング】8選
