HELP・お助け情報 ◆WordPress 記事内の文章を枠で囲み見やすくする方法

HELP・お助け情報             　　

WordPress 記事内の文章を枠で囲む方法

Wordperssの記事を読むときに、文章を箇条書きにして、”すっきりと見やすくしたい！”と思うときがあります。

勿論、表を作成してその中に文章を入れればいいのですが、もっと手軽に枠で囲みたいと思ってしまう特が有ります。

具体的には、実際の使用例です。

実施方法は、下記のタグをコピーして、記事（テキストモード）に埋め込んでからビジュアルモードに戻して枠の中に文章を書くだけです。

文章を枠で囲む　実線・超薄青

実践・青

<div style="padding: 16px; border: solid 3px #4169e1; border-radius: 10px; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;">ここに文章を入力します。実線・超薄青</div>

ビジュアルモードでの見え方

実践・青 背景・薄青

<div style="padding: 16px; border: solid 3px #4169e1; border-radius: 10px; background-color: #e0ffff; margin-top: 30px; margin-bottom: 30px;">ここに文章を入力します。実線・青 背景・薄青</div>

ビジュアルモードでの見え方

文章を枠で囲む　実線太・青 背景・薄青

実線太・青 背景・薄青

<div style="padding: 16px; border: solid 8px #4169e1; border-radius: 10px; background-color: #e0ffff; margin-top: 30px; margin-bottom: 30px;">ここに文章を入力します。実線太・青 背景・薄青</div>

ビジュアルモードでの見え方

文章を枠で囲む　実線・橙 背景・薄橙

実線・橙 背景・薄橙

<div style="padding: 16px; border: solid 3px #ff9933; border-radius: 10px; background-color: #fffacd; margin-top: 30px; margin-bottom: 30px;">ここに文章を入力します。実線・橙 背景・薄橙</div>

ビジュアルモードでの見え方

文章を枠で囲む　実線太・橙 背景・薄橙

実線・橙 背景・薄橙

<div style="padding: 16px; border: solid 8px #ff9933; border-radius: 10px; background-color: #fffacd; margin-top: 30px; margin-bottom: 30px;">ここに文章を入力します。実線・橙 背景・薄橙</div>

ビジュアルモードでの見え方

文章を枠で囲む　タイトル・橙 背景・薄橙

<div style="height: 12px;"><span style="margin-left: 8px; padding: 6px 10px; background: #ff9933; color: #ffffff; font-weight: bold; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;">タイトル</span></div>
<div style="border: 2px solid #ff9933; background-color: #ffe0b2; padding: 25px 12px 10px; font-size: 16px; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;"><span style="font-size: 16px;"><span style="font-size: 16px; color: #0000ff;">・ｘｘｘｘ</span></span></div>