以前、アメブロでブログ記事を投稿する時の
枠の付け方について、解説しました。

アメブロで、枠をつける方法

このときはここまでできる話でした。

お知らせ

枠にタイトルつけて囲ってみたりしたいなー。
とかいう要望は大丈夫ですか？

など。

さて。えらく間があきましたけど、さらに応用編です。

お知らせ

枠の中に色をいれてみるとかできたり。
枠の角を丸くしたりとか。

など。

これ、できるようになります。



 前提： ここまでは出来ていることにします。こちらの記事でできるから。

 HTML表示に変更。
こうなっているはずです。

 ここからが技ですよ！
 最初に書いた <fieldset> を次のように変更してみましょう。(ピンクのところ)

 <fieldset>

　

 <fieldset style="border:4px double red;background-color:pink;">


こんな感じね。

前に、「style="border: 4px double red;"」は解説済なので
そこは省略です。

背景の色を付ける部分についての解説。

この　background-color:pink;　の部分がその背景に色をつけているところです。

 background-color　…　読んで字のごとく背景(background)の(-)色(color)

なーんて簡単なっ！！！
そして、

 pink　…　色を指定しています。
　前に書いた通り一般的な色は英語でもOKですが、
　複雑な色は難しいのでカラーコードを書くことが多いです。

　カラーコードで書くときは、　#ffff00　等で書きます。
　色とカラーコードの対応表はこちらを参考にしてみてください。

　 カラーコード

というわけで。通常表示に戻すとこうなりますね。

さて、続いては角を丸くする件。


 HTML表示に変更。

 ここからが技ですよ！
 <fieldset>のところを次のように書き足してみましょう。

 <fieldset style="border:4px double red;background-color:pink;">



 <fieldset style="border:4px double red;background-color:pink;border-radius:15px;">


こんな感じです。

ダブルクオテーションの前につけたしたこの暗号。

 border-radius　…　borderは枠線、radiusは半径

つまり、半径どれぐらいの枠線にするかって意味です。

 15px　…　15ピクセルの半径にしてください

と指示を出しているわけですね。

これにより、角は半径15pxの円を描く形の枠線となり、
こういう形状になるのです。
数字が大きくなるとより大きな円弧になります。

なので、こんなことも出来ますね。
数字が大きくなる場合はこんな角。

　　枠線は緑
　　線種は点線
　　角は結構円に近いぐらいで

　　style="border:3px dotted green;border-radius:40px;"

数字が小さくなる場合はこんな角。

枠線は青
線種は実線
背景の色は黄色
角はほんのちょこっとだけ丸く

style="border:1px solid blue;background-color:yellow;border-radius:5px;"

いろいろ使えると思います。
明日から使える簡単な枠の応用、是非頑張ってみてください