JimdoでCSS3の機能を使用して角丸の背景をつける
JimdoはHTML5に対応（完全対応とは言い難いのですが）しています。
スタイルシートもCSS3に対応した記述が可能になっています。
今回は背景画像を使わずに文字列に過度丸の背景をつける方法を案内します。
※この角丸はＩＥ８以下では確認することは出来ません。
ただPIKのサイトをチェックしたところ、ＩＥ８でアクセスしているパーセントは
既に２.1％となっております。しかもこの数パーセントの人たちは角丸が見えないだけで特に問題はありません。
CSS3で角丸の設定をする記述方法
h3{
baclground:#960; /* 背景をブラウンで塗る */
color:#fff; /*文字を白くする */
/*
以下は角丸の指定です。
本来はborder-radiusだけで良いのですが
ブラウザによって表記が一部異なるため
以下のように指定します。
6pxは角丸の半径です。
*/
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
上記のように指定した場合の表示例
上記の記述をすれば『見出し３』の外枠に角丸の背景を作ることが出来ます。
これが角丸になった背景です。
直接ＣＳＳを記載する方法
なお、『文章』の項目から『HTMLソース編集』画面で直接書く事も可能です。
その場合は以下のように書きます。
※以下はdivタグに対して角丸を適用した場合です。
※角丸の背景を持った文字は多用しないほうが良いので、見出しの２、３あたりに指定するか解説など特に読んでもらいたい箇所だけに限定するのが理想的です。
<div style="padding:5px 10px;font-weight:bold;background: #960; color: #fff; border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px;">これが角丸になった背景です。</div>
アクセントに使ってみてはいかがですか？
ご不明な点があればいつでもお電話でお訪ね下さい。
無料電話相談電話番号：03-6433-0422