こんにちは、ブログど素人のぷれじです。
自身のブログが淋しいとか、もう少し見栄えを良くしたいと感じた事はありませんか？
色々なブログを見ていると、おしゃれな枠の中に文字を書いている記事を良く見かけます。
ググッて調べてみると『ＣＳＳをコピペして[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です。
配色コードは⇒WEB色見本を参考にしてください。
背景色と枠線の太さの変更
<div style=”background: #ffffea; padding: 15px; border: 2px solid #99cc00; border-radius: 10px; word-break: break-all;”>ここに文章</div>
※#ffffeaが、背景色の変更。2が、枠線の太さの変更。
テキストモードで枠内の改行
『<p> </p>』を入力。
こんにちは、ぷれじです。
妻ひとり子供ひとりの既婚者です。
クラブ通い→ドライブ→高速バトル→ソシャゲーにハマる→モンハンを半年位でプレイ時間が１２００時間超える→ＤＱＸの総プレイ時間が２年間で１万時間を超えた。
何も考えずに楽しい事を優先して過ごしてたら、、、気付けば、もうこんな年齢になってしまった。
職歴は、生保と損保の保険業界です。
自称、元ダンサーで保険のスペシャリスト。残念ながらもう踊れません。
後々、損をしない保険の入り方をまとめます。
約１年前から投資をはじめました。データーを順次更新していきます。
２０２０年からは、為替を始める予定。
会社に依存せず、
自由な時間を増やし、
出来るだけ長く、
家族と長く過ごしたい（＾ω＾）❣️
