WordPress ブログ内に枠線(文字を囲む枠)をいれたい

ブログを見てると、枠をうまく使ってるのを見かけますよね

 

例えば、こんなのとかです

ここは枠の中です1行目
ここは枠の中です2行目

 

これらは タグを使って作成します

具体的に どうやってるのか 試してみました

 



枠の指定の仕方です

 

機能をどんどん追加していく形で、いくつか例を挙げます

 

< とりあえずシンプルバージョンです >

ここに文字を入れます1行目
ここに文字を入れます2行目

<div style=”border: 1px solid;”>ここに文字を入れます1行目
ここに文字を入れます2行目</div>

 

< 文字の周りに余白を持たせます >

ここに文字を入れます1行目
ここに文字を入れます2行目

<div style=”border: 1px solid; padding: 10px;”>ここに文字を入れます1行目
ここに文字を入れます2行目</div>

 

< 枠線の色を変えます >

ここに文字を入れます1行目
ここに文字を入れます2行目

<div style=”border: 1px solid #20a020; padding: 10px;”>ここに文字を入れます1行目
ここに文字を入れます2行目</div>

 

< 線を太くします >

ここに文字を入れます1行目
ここに文字を入れます2行目

<div style=”border: 3px solid #20a020; padding: 10px;”>ここに文字を入れます1行目
ここに文字を入れます2行目</div>

 

< 角を丸くします(IE8では表示されません) >

ここに文字を入れます1行目
ここに文字を入れます2行目

<div style=”border: 3px solid #20a020; padding: 10px; border-radius: 10px;”>ここに文字を入れます1行目
ここに文字を入れます2行目</div>

 

< 枠線を点線にします >

ここに文字を入れます1行目
ここに文字を入れます2行目

<div style=”border: 3px dotted #20a020; padding: 10px; border-radius: 10px;”>ここに文字を入れます1行目
ここに文字を入れます2行目</div>

 

< 枠内の塗りつぶしをします >

ここに文字を入れます1行目
ここに文字を入れます2行目

<div style=”border: 3px dotted #20a020; padding: 10px; border-radius: 10px; background-color: #90c090;”>ここに文字を入れます1行目
ここに文字を入れます2行目</div>

 

< 横幅を固定します >

ここに文字を入れます1行目
ここに文字を入れます2行目

<div style=”border: 3px dotted #20a020; padding: 10px; border-radius: 10px; background-color: #90c090; width: 200px;”>ここに文字を入れます1行目
ここに文字を入れます2行目</div>

 

< 影を付けます(IE8では表示されません) >

ここに文字を入れます1行目
ここに文字を入れます2行目

<div style=”border: 3px dotted #20a020; padding: 10px; border-radius: 10px; background-color: #90c090; width: 200px; box-shadow: 10px 10px 10px #808080;”>ここに文字を入れます1行目
ここに文字を入れます2行目</div>

 



上記の例をまとめると

 

・線の太さ 線の種類 線の色
例)border: 1px solid #20a020;

solid:実線
dotted:点線
dashed:破線
double:二重線
none:無し

 

・文字の周りに余白
例)padding: 10px;
上下左右 10pxの余白です

例)padding: 10px 20px 30px 40px;
上、右、下、左の順に余白を指定します

 

・枠内の塗りつぶし
例)background-color: #90c090;

 

・横幅の固定
例)width: 200px;

 

・枠の角を丸く(IE8は表示しません)
例)border-radius: 10px;

 

・影を付ける(IE8は表示しません)
例)box-shadow: 10px 10px 10px #808080;

コメント

タイトルとURLをコピーしました