記事を書いていると、たまに強調したいときとか枠線で囲みたい時がありますよね？
せっかく枠線で囲っても枠線の中は変えられないの？って思っていた人もいると思います。
枠線での囲み方は別の記事に書きましたが今回はその中を塗りつぶす方法です。
枠線の色は赤紫色になっていますが中の色が違っています。
これは記事を書くときにテキストを選びその中に
<div style=”background: #ffeeee; border: solid 2px #6e05a0; padding: 15px; width: 50%;”>記事</div>
と記載します。
solid 2px #6e05a0が枠線の色で、background: #ffeeeeが塗りつぶしの色です。
これには法則があって順番が違ったら表示されません。先にバックグランドを持ってきて次に枠線です。
このサイトのテンプレートですがSimplicityを使っていて記事の幅が680pxありますが、width: 50%はその半分って意味です。
記事内にこのように記載すると<div style=”background: #ffffcc; border: solid 2px #6e05a0; padding: 15px; width: 50%;”>記事</div>上のように表示されます。
記事本文の色を変える
バックグランドが暗過ぎて普段使っている文字色では見えなくなるので文字の色を変えてみました。
<div style=”background: #000000; border: solid 2px #6e05a0; padding: 15px; width: 50%;”><span style=”color: #ffffff;”>記事</span></div>
<span style=”color: #ffffff;”>この部分が文字の色です。
文字の色は記事を書く時の文字色変更からでも出来ます。
枠線を目立たせ記事内の文字色も変更して太くしてみました。
この作業はいつの記事を書いてる所で文字を変えることが出来ます。
文字だけが中央に寄せてあります。
<div style=”background: #ff99ff; border: solid 2px #6896e1; padding: 15px; width: 50%;”><center><strong><span style=”color: #0000ff;”>記事</span></strong></center></div>
これをコピー＆ペーストすれば下のようになります。
また<center></center>で囲むことで真ん中によります。
色の種類だとかはそのようなサイトがあるらしいです。
色々と試されてから実践してみてください。
このような枠線だとか枠線の中を塗りつぶすなどテキストタブで全て行います。
ビジュアルタブで記事を書いて文字に色を付けてテキストタブにすると色のテキストがわかります。その他でもテキストタブで役に立つことも多々あると思いますので是非テキストタブを利用することをお勧めします。