CSS（スタイル編）第８回いろんな場所のラインをいじってみよう♪ きまぐれAWA's Life/ウェブリブログ

CSS（スタイル編）第８回いろんな場所のラインをいじってみよう♪

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

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（スタイル編）第６回一覧の画像と罫線のサイズと色♪』で変更済みですね♪

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

文字列を入力した場所です。
『/* 記事タイトル */』
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（スタイル編）第３回アイコンを変更する♪ ～コンポーネント領域

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

/*追加　関連テーマリスト*/
#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;
}