記事中の文章を枠線や綺麗な色でカッコよくする

ワードプレスやホームページを作成していますと、他の方との差別化を図りたくなります。記事中に飾りや色を一切使っていないサイトもありますが、要所要所にはアクセントを置きたいものです。

ソースをそのままコピーして「点線での囲い」の文章を書き換えてください。

黒の点線と白の背景の囲い

文章を点線で囲みました

<div style="border: 2px dotted #CCCCCC; padding: 5px;">
文章を点線で囲みました</div>

線の太さを調整したい場合はborder: 2pxの数字を変更すれば太くなります。線の種類を変更するには、solid(実線)、dotted(破線)、dashed(点線)、double(二重線、3px以上)などから選択します。
 

囲みの背景色を変更する

囲みの背景色を変更する
<div style="border: 2px dotted #CCCCCC; padding: 10px background-color:#99ffcc;">
文章を点線で囲みました</div>

 

いろんな枠線の囲い

太さ3px、点線、線の色#000000、余白10px、背景色#F4A460の枠
<div style="border: 3px dashed #000000; padding: 10px; background-color: #cccccc;">
太さ3px、点線、線の色#000000、余白10px、背景色##F4A460の枠</div>

 

太さ3px、二重線、線の色#0000FF、余白10px、背景色#F2F2F2の枠

<div style="border: 3px double #FF0000; padding: 10px; background-color: #f2f2f2;">
太さ3px、二重線、線の色#0000FF、余白10px、背景色#F2F2F2の枠</div>

 
 

太さ3px、二重線、線の色#0000FF、余白10px、背景色#F2F2F2の枠

<div style="border: 3px double #cccccc; padding: 10px; background-color: #ffffff;">
太さ3px、二重線、線の色#cccccc、余白10px、背景色#ffffffの枠</div>

 

左側に縦の罫線

<div style="padding:5px;background:#EFEFEF;width:90%;border-color:#cccccc;border-width:0 0 0 3px;border-style:solid;">左側に縦の罫線</div>

 

影がうっすらと見える囲い

<div style="padding:1px;background:#999999;height:42px;width:500px;border-color:#333333;border-width:1px;border-style:solid;"><div style="padding:5px;background:#EFEFEF;height:40px;width:498px;border-color:#FFFFFF #CCCCCC #CCCCCC #FFFFFF;border-width:1px;border-style:solid;"><p>影がうっすらと見える囲い</p></div></div>

 
記事の中で重要な部分を囲って表現するとちょっとしたアクセントになります。今回の場合はタグを直接ページに書き込んでいますが、CSSファイルに書き込んで指定するのがより良いと思います。

下記のバナーをクリックして頂けますとランキングに10ポイント加算されます。ご協力、宜しくお願い致します。
にほんブログ村 小遣いブログ アフィリエイトへ  

アフィリエイト商材の王道・ルレア(LUREA)

Facebook