忍者ブログ
Info
日々、ニンブロのテンプレート製作に励んでいます。お見苦しい箇所があるかと思いますが、お許し下さいマセ。また、お気付きの点などございましたらお知らせして下さると嬉しく思います。

各テンプレの質問などは、遠慮なくご質問下さい。カスタマイズ方法もOKです!

本館「MY HEALING☆彡」もよろしくお願いします。

NINJA BLOG TBP
Profile
HN:
Urara
性別:
女性
アクセス解析
Ninja☆BT
日々、ニンブロテンプレート&カスタマイズの研究・製作に励んでいるブログ
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

カスタマズと言うよりも小技?

エントリータイトルやブロック周りなどのラインを付けるのにちょっとした、手間を省こう!と言う記事です(笑)

例えば、実線で1pxの黒を付けたい場合。
border:solid 1px #000000; とこんな感じでやってますよね?
では、左右は点線の1px青・上下は実線の2pxの黒と付けたい場合は?
(こんなラインを付ける人はいないと思いますが・・例として)
border-top:solid 2px #000000;
border-bottom:solid 2px #000000;
border-right:dotted 1px #0000FF;
border-left:dotted 1px #0000FF;
↑こんな風にやってますよね?

それを、ひとまとめ?にした方法。
border-width : 2px 1px 2px 1px;
border-style : solid dotted solid dotted;
border-color : #000000 #000000 #000000 #000000;

上・右・下・左の順番となってます。
border-width ←ラインの太さ
border-style ←ラインの種類
border-color ←ラインの色

エントリータイトル
border-width : 0px 0px 1px 7px;
border-style : solid;
border-color : #990000;


エントリータイトル
border-width : 1px;
border-style : solid;
border-color : #FFFFFF #555555 #555555 #FFFFFF;
background:#C1BFBF;

(ちょっと影があるように見える風)

エントリータイトル
border-width : 0px 20px 1px 0px;
border-style : none solid dashed none;
border-color : #660033;
background:#EEEEEE;


こんな感じで色々と組み合わせれば個性的なラインも作れちゃいます^^
色々と楽しんでみて下さいネ♪
PR
この記事にコメントする
NAME:
TITLE:
MAIL:
URL:
COMMENT:
PASS: Vodafone絵文字 i-mode絵文字 Ezweb絵文字
この記事へのトラックバック
TRACKBACK URL :
Calendar
11 2017/12 01
S M T W T F S
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
Comments
Trackbacks
Recmmend
Puzzle Series Vol.3 SUDOKU 数独 ナンバープレートがDSにやって来た!只今、熱中してるゲームです。

スキップビート13 林檎と蜂蜜17 桜蘭高校ホスト部(クラブ) (8)

画像懐かしさを感じるキレイな曲。劇場版アニメ「時をかける少女」の主題歌。
Blog Pet

Amazon
Search
Copyright © Ninja☆BT。。All Rights Reserved.
Powered by NinjaBlog / Template by Ninja☆BT
忍者ブログ [PR]