ブログの文章にHTMLコードのみでかわいい背景を簡単に設定する方法。
文章(ブログ)を書く上で、読みやすさや文字の強調などを考え装飾文章を作成したいと思いますよね！
読む側からしたら読みやすい、見やすい文章の方が最後まで読んでくれる事が多いです。 また他人のブログより目立つブログにしたい！カッコ良く装飾してみたい！って思った事があると思います。
そこで、誰でも簡単に文字の背景にかわいらし装飾を設定できるHTMLコードを紹介したいと思います。
HTMLのみでドット柄背景【コピペOK】
<div style="background-image: linear-gradient( -45deg, #ffffff 25%, #99ffcc 25%,#99ffcc 50%, #ffffff 50%, #ffffff 75%, #99ffcc 75%, #99ffcc );background-size: 20px 20px;font-size: 14px; padding: 10px;"> ここにテキスト </div>
ドット柄背景
ここにテキスト
ここにテキスト
HTMLのみで斜線柄背景【コピペOK】
<div style="background-image: linear-gradient( -45deg, #ffffff 25%, #99ffcc 25%,#99ffcc 50%, #ffffff 50%, #ffffff 75%, #99ffcc 75%, #99ffcc );background-size: 20px 20px;font-size: 14px; padding: 10px;"> ここにテキスト </div>
斜線柄背景
ここにテキスト
ここにテキスト
コードにある#〇〇〇〇〇〇や〇〇pxの〇部分を変えるだけで自分好みに設定変更が可能です。 設定変更したら、一度記事に貼り付けプレビューで確認しながら背景色やフォントサイズを変更してみてください。 早速 背景柄を使った文章を書いて見ましょう！
色の変更はカラーコード一覧を参考に↓↓↓ http://www.netyasun.com/home/color.html
実際に文章を書くとこんな感じになります。自分の個性を生かしたブログにしてみてください！
CSS&HTMLを分かりやすく解説した本
