きまぐれAWA's Life

アクセスカウンタ

zoom RSS CSS(スタイル編)第8回 いろんな場所のラインをいじってみよう♪

<<   作成日時 : 2008/02/13 19:58   >>

ブログ気持玉 0 / トラックバック 0 / コメント 0

CSS編集でブログの各箇所で線を入れたりデザインを変えたりすることが出来ます。
『ここにラインを入れたい』『この線の色やサイズを変えたい』など、
デザインの都合で出てくることもあるかもしれません。
今回は罫線のデザインをCSS編集でいじってみます。


線のデザインを指定する時には下のような文字列を使用します。
border-●:■ ▲ ◆;
この文字列で線のスタイルを一括指定できます。
※ :線の場所 :線の太さ :線の色 :線の種類

例えば…
border-top:1px #FF0000 solid;
この場合、『 枠の上部に 1px の太さで 赤色の 実線 を引く』という意味です。 


: 線を引く位置の指定 (上下左右指定します。)

・全体を囲んでしまう場合 (上下左右、線を引く位置を指定をしない)

全体を囲む
border:



・ 枠の部位で位置を指定(上、左、右、下)する場合

上部の線
border-top:


左側の線
border-left:


右側の線
border-right:


下部の線
border-bottom:




: 線の種類は使用する文字列でいろいろ選べます。

実線
solid


点線
dotted


二重線
double


破線
dashed


谷線
groove


山線
ridge


内線
inset


外線
outset




これらを使っていろんな場所の線を好みのデザイン変えます。





 各箇所の線をいじってみる  

お好みで線のデザインを変えてみましょう。
全部を上げると大変なので入力する位置はマップのほうで紹介します。
うちのブログでラインのデザインを変更した箇所を書いて見ますね。


 カレンダーの罫線 【 トップページ・記事ページ 】

文字列を入力した場所です。
『/* 年月 */』
border-bottom: 2px solid #FF99FF;

『/* 曜日 */』
border-bottom: 1px solid #FF99FF;


デザインテンプレートの色やサイズが適用されていたので変更しました。
『月日』の下には 2px の実線、『曜日』の下には 1px の実線。
太さは同じですが、色を変えてあります。
※『/* ●カレンダー */』の部分はカレンダー全体を囲むように線が入ります。

 B 『 トップ、月別、テーマ別ページ 』   CSS 全体Map 

/* ●カレンダー */
#utilities #calendar{
}

/* 年月 */
#utilities #calendar table caption{
border-bottom: 2px solid #FF99FF;
}

/* 曜日 */
#utilities #calendar th{
border-bottom: 1px solid #FF99FF;
}



カレンダーの『月日〜曜日〜日付』を区切る線がピンクになりました(はーと)










 各記事を区切っている罫線 【 トップページ 】

これは『CSS(スタイル編) 第6回 一覧の画像と罫線のサイズと色♪』で変更済みですね♪




 記事見出しの罫線 【 記事ページ 】

文字列を入力した場所です。
『/* 記事タイトル */』
border-bottom:4px #FFEEEE double;

デザインテンプレートの色やサイズが適用されていたので変更しました。
色を変更して、4px の二重線にしました。
※見出しアイコンを変更した時に入力した文字列が緑の部分になっています。

 C 『 記事ページ 』   CSS 全体Map 

/*----------------- 記事ヘッダ -----------------*/
#blog-head{
}

/* 記事タイトル */
#blog-head h2{
background-image:url(画像のURL);
background-repeat: no-repeat;
padding:0px 0px 0px ▲px; height:●px; border-left:none;

border-bottom:4px #FFEEEE double;
}

/* トラックバック数/コメント数 */
#blog-head .response{
}



記事見出しの線を水色からピンクの二重線にしました(はーと)










 関連テーマ、関連記事の罫線

文字列を入力した場所です。
『/* 関連テーマ見出し */』
border-bottom: 3px dotted #FF99FF;

『関連テーマ記事』の線ですが、うちのにはデフォルトでありませんでした。
なので、新規に次の文字列を追加しました。
/*追加 関連テーマ記事*/
#blog-foot #related h2{
border-bottom: 3px dotted #FF99FF;
}



※関連テーマ記事の前のリストアイコンも変更できます。
 関連記事  CSS(スタイル編) 第3回 アイコンを変更する♪ 〜 コンポーネント領域

リストアイコンの追加する際にデフォで文字列が無い場合、新規に次の文字列を追加します。

/*追加 関連テーマリスト*/
#blog-foot #related ul{
list-style-image:url(リストアイコンのURL);
}


※ /* ← 今回この中の文はうちのメモ書きです→ */ 特に入力する必要はありません。

  C 『 記事ページ 』   CSS 全体Map 

/*----------------- 記事フッタ -----------------*/
#blog-foot{
}

/* 関連テーマ */
#blog-foot #theme{
margin-left:auto;
margin-right:5px;
}

/* 関連テーマ見出し */
#blog-foot #theme h2{
border-bottom: 3px dotted #FF99FF;
}

/* テーマレーダボタン */
#blog-foot #theme #rader{
}

/*追加 関連テーマ記事*/
#blog-foot #related h2{
border-bottom: 3px dotted #FF99FF;
}


/*追加 関連テーマリスト*/
#blog-foot #related ul{
list-style-image:url(リストアイコンのURL);
}



各箇所の下線をピンクの点線に、そしてリストアイコンを小さなハートにしました(はーと)
※テーマ、テーマレーダーが右に寄っているのは今回の設定とは違うものです。









 トラックバック、コメント欄の枠

文字列を入力した場所です。
『/* フォーム フィールド */』
border:1px #FF99FF solid;

デザインテンプレートの色やサイズが適用されていたので変更しました。
色を変更して、1px の実線で全体を囲みました。
緑の文字列が以前デザインを指定した命令文になります。

  C 『 記事ページ 』   CSS 全体Map 

/* フォーム フィールド */
#blog input.txt,
#blog textarea{
background-image:url(画像のURL);
background-color:■;

border:1px #FF99FF solid;
}

/*追加 コメント入力欄の幅*/
#blog #comment .cont{
width:410px;
}


/*追加 トラックバックとコメントの幅*/
#blog #trackback table,
#blog #comment table{
width: 530px;
}



トラックバック、コメント入力欄の枠をピンクで囲みました♪








今回の書いた他にも線を入れたり変更することの出来る箇所はあります。
お好みで線のデザインを変えてください。

それでは、今回はこのくらいで(わら)


|ω・)ノシ See you♪

|彡 サッ




■ ブログをいじっちゃおぅ♪ 〜 ブログのレシピ 〜 ■


テーマ

関連テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ

トラックバック(0件)

タイトル (本文) ブログ名/日時

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(0件)

内 容 ニックネーム/日時

コメントする help

ニックネーム
URL(任意)
本 文
  現在の閲覧者数:

* ぱにゃステ *

『ぱにゃステ』 customized by mairis
 
 
ふぉろーみー

CSS(スタイル編)第8回 いろんな場所のラインをいじってみよう♪ きまぐれAWA's Life/BIGLOBEウェブリブログ
文字サイズ:       閉じる