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>

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

文章を枠で囲む　補足

枠の中の「ここに文章を入力します。」の文章を変更して文章を複数行入力しても自動的に枠が下に伸びていきます。

枠線の種類の変更は、”border: solid”のsolid（実践）を変更します。
dotted(点線)　double(二重線)　dashed(幅広の点線)　none(無し)

実線 ⇒ solid
点線 ⇒ dotted
破線 ⇒ dashed
二重線 ⇒ double
立体的に窪んだ線⇒groove
立体的に隆起した線⇒ridge
線無し ⇒ none

線の色の変更は、#4169e1の部分を#xxxxxxに変更してください。
色を表す記号を調べる場合ときはコチラを参考に・・・色コード

➤ 「HELP・お助け情報　小技集」へ戻る。

====================

HELP・お助け情報

➤ 「HELP・お助け情報　目次」へ戻る。

====================

初心者はネットで稼ぐために何をすべきか。

➤ 「ブログの概要」へ戻る

====================