WordPress 記事内の文章を枠で囲み見やすくする方法

Wordpress 文章を囲む
総合メニュー
ブログ概要 稼ぐ準備 稼ぎ方 実践記録 オススメ HELP サイトマップ

HELP・お助け情報               

HELP・お助け情報
00 HELP・お助け情報 目次
01 用語集
02 ブログ記事の書き方
03 パソコンの操作・設定
04 パソコンの安全対策
05 便利ツール
06 WordPress・プラグイン
07 WordPress ・小技集
08 Yobi

 プラグイン  小技集

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=”padding: 16px; border: solid 3px #4169e1; border-radius: 10px; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;”>ここに文章を入力します。</div>
↑↑↑
ここまでをコピー
使用方法
1.投稿の「テキスト」エディタに切り替えて上記のタグを張り付けます。
2.「ビジュアル」エディタに切り替えて枠内に文章を書きます。
3.文章作成時の改行はShiftキーを押しながら「Enter」キーを押します。

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

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

線の色の変更は、#4169e1の部分を#xxxxxxに変更してください。
色の見本コチラを参考に・・・色コード
色を表す記号を調べる場合には原色大辞典というサイトを参照してください。

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

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

HELP・お助け情報

HELP・お助け情報
00 HELP・お助け情報 目次
01 用語集
02 ブログ記事の書き方
03 パソコンの操作・設定
04 パソコンの安全対策
05 便利ツール
06 WordPress・プラグイン
07 WordPress ・小技集
08 Yobi

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

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

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

総合メニュー
Top (ブログの概要) 
   ネットで稼ぐための準備 
ネットで稼ぐ稼ぎ方
日々の実践記録
オススメ情報
  HELP・お助け情報

「ブログの概要」へ戻る

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

シェアする

フォローする

トップへ戻る