こんにちは、ブログど素人のぷれじです。

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

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

ググッて調べてみると『CSSをコピペして[style.css]に貼り付ける』との説明。[style.css]までは辿り着くが、何処に貼り付けるのか分からず、断念💦

 

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

手順は簡単です。

 

①下記の枠の下にあるHTMLをコピペする。

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

③コピペしたHTMLを貼り付ける。

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

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

 

ここに文章
<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>&nbsp;</p>』を入力。

おすすめ: