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

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

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

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

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

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

手順は簡単です。

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

②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です。