おしゃれな枠の中に文字を書く－WordPress－

こんにちは、ぷれじです。

自身のブログが淋しいとか、もう少し見栄えを良くしたいと感じた事はありませんか？

色々なブログを見ていると、おしゃれな枠の中に文字を書いている記事を良く見かけます。

誰でも簡単に、おしゃれな枠をコピペで出来る方法をまとめました

手順は簡単です。

①下記の枠の下にあるＨＴＭＬをコピペする。

②WordPressをビジュアルモードからテキストモードへ切り替える。

③コピペしたＨＴＭＬを貼り付ける。

④貼り付ける際に『❝❞』が全角になるので『””』半角に直す。

⑤ビジュアルモードに戻り、文字を入力する。

ここに文章

<div style=”background: #ffffea; padding: 15px; border: 2px solid #99cc00; border-radius: 10px; word-break: break-all;”>ここに文章</div>

上記の枠に『display:inline-block;』を入力すると幅が小さくなります。

ここに文章

<div style=”display: inline-block; background: #ffffea; padding: 15px; border: 2px solid #99cc00; border-radius: 10px; word-break: break-all;”>ここに文章</div>

ここに文章

<div style=”background: #ffffea; padding: 15px; border: dotted 3px #99cc00; border-radius: 10px; word-break: break-all;”>ここに文章</div>

ここに文章

<div style=”background: #ffffff; padding: 10px; border: double 10px #0099ff;”>ここに文章</div>

ここに文章

<div style=”background: #ffffff; padding: 10px; border: ridge 10px #cccccc;”>ここに文章</div>

見出し文字

ここに文章

<div style=”background: #ff9900; padding: 5px 10px; color: #ffffff;”><strong>見出し文字</strong></div>
<div style=”background: #ffffff; padding: 10px; border: 2px solid #ff9900;”>ここに文章</div>

見出しタイトル

ここに文章

<div style=”background: #ff6666; padding: 5px 10px; color: #ffffff; border-radius: 10px 10px 0 0;”><strong>見出しタイトル</strong></div>
<div style=”background: #ffffff; padding: 10px; border: 2px solid #ff6666; border-radius: 0 0 10px 10px;”>ここに文章</div>

見出しタイトル

ここに文章

<div style=”display: inline-block; background: #3399ff; padding: 5px 10px; color: #ffffff;”><strong>見出しタイトル</strong></div>
<div style=”background: #ffffff; padding: 10px; border: 2px solid #3399ff;”>ここに文章</div>

ここに文章

<div style=”background: #eddbff; padding: 15px; border: 0px solid #99cc00; border-radius: 10px; word-break: break-all;”>ここに文章</div>

ここに文章

<div style=”background: #ffffe0 ; padding: 15px; border: 0px solid #99cc00; border-radius: 10px; word-break: break-all;”>ここに文章</div>

ここに文章

<div style=”background: #ffffea; padding: 15px; border: 4px inset #99cc00; border-radius: 10px; word-break: break-all;”>ここに文章</div>

ここに文章

<div style=”background: #ffeaff; padding: 10px; border: 5px inset #ff0066; border-radius: 30px; word-break: break-all;”>ここに文章</div>

以上が手っ取り早くおしゃれな枠に文字を入れる方法でした。

ブログの生産性アップにお役立てください。

枠線の色を変更

囲み枠の枠線の色を変えるには、『#◯◯◯◯◯◯』を好きな配色コードに変えればOKです。

配色コードは⇒WEB色見本を参考にしてください。

背景色と枠線の太さの変更

<div style=”background: #ffffea; padding: 15px; border: 2px solid #99cc00; border-radius: 10px; word-break: break-all;”>ここに文章</div>

※#ffffeaが、背景色の変更。2が、枠線の太さの変更。

テキストモードで枠内の改行

『<p> </p>』を入力。

ぷれじ

２０１８年１２月からＩＰＯ（新規公開株）、２０１９年1月から仮想通貨、２０２０年９月からＦＸ（外国為替証拠金取引）を始める。

２０２１年５月から仮想通貨ＥＴＨ（イーサリアム）のマイニングを開始。

ＩＰＯは、年間３回から５回当選。

仮想通貨の最大含み益は、６００万円オーバー（まだ利確してません）。

ＦＸは、開始５ヶ月で５万円→２２０万円達成。

マイニングは、もうすぐ６桁のプラス。

個人で稼ぎ、

自由な時間を増やし、

出来るだけ長く、

家族と過ごしたいを目指しています。