2005年04月27日

色で見るCSSその6(サイドバーと残りの部分)

こんばんは。最終回となる今回はサイドバー関連です。
設定によっては真ん中に表示されるものもありますが…
全部真っ白からのスタートです。

まずはサイドバー全体とカレンダー。
色付け後の画像はこちら↓(クリックで大きくできます)
色見sonota1
ちなみに左:WinXP+Firefox 右:WinXP+IEで表示した画面です。
あとリンク部分については下の画像を見てください。


サイドバー全体
links-left(両サイドバー全体)
背景(薄桃):サイドバー全体(何故か右も)
文字(濃緑):リンクの解説(一部)のみ

links
背景:変化なし
文字:変化なし
色については両方ともlinks-leftで指定するようです。
右サイドバーのときはlinksでやってるんだけど…

--------
2005/05/13追記
すみません。大間違いでした。
正しくはlinks-leftと同様、
背景:サイドバー全体(何故か右も)
文字:リンクの解説(一部)のみ
となるようです。

サンプルHTMLを作るとき左サイドバーを丸々コピペして
<div class="links-left"臓のままだったのがいけなかったようですたらーっ(汗)
--------

カレンダーについては前にもやりましたが、一応。
重なり具合を見るためにそれぞれ幅を変えてあります。
カレンダー
calendar(カレンダー全体)(links-leftに優先)
背景(薄水):カレンダー全体
文字:変化なし

calendar table(カレンダーの本体)(calendarに優先)
背景(水色):カレンダーの本体
文字:変化なし

calendar head(カレンダーの年月の部分)(calendarに優先)
背景(薄紫):カレンダーの年月の部分
文字(藍色):カレンダーの年月の文字

calendarday(カレンダーの日付部分)(calendar tableに優先)
背景(白緑):リンクなしの日付部分の背景
文字(茶色):リンクなしの日付の文字(リンクなし)

calendarday a(カレンダーの日付のリンク有りの部分)(calendardayに優先)
背景(抹茶):リンク有りの日付の背景
文字(赤色):リンク有りの日付の文字


サイドタイトル
sidetitle(コンテンツ名)(links-leftに優先)
背景(薄黄):コンテンツ名部分
文字(紫色):コンテンツ名

side(コンテンツ内容)(links-leftに優先)
背景(水色):コンテンツ内容部分
文字(赤色):コンテンツ内容文字

side a(コンテンツ内リンク部分)(sideに優先)
背景(黄色):コンテンツ内リンクの背景
文字(桃色):コンテンツ内リンク文字



残り部分です。画像はこちら。
色見sonota2


その他
powered(一番下)
背景(青色):ブログ最下部
文字:確認できず(文字があれば反映されるのかも)
ちょっと自信ないです。最下部というよりはSeesaaのロゴが出てるあたりになるのかも。

syndicate(「RDF Site Summary」)
背景(柿色):「RDF〜」部分の背景
文字:確認できず(文字があれば反映されるのかも)
syndicate a(「RDF〜」のリンク)
背景(深緑):「RDF〜」のリンク部分の背景
文字(白色):「RDF〜」のリンク文字


以上です。
まだまだ不十分な部分があるとは思うんですが、
これでひとまずおしまいです。
ここまで読んでくださってありがとうございました!






*以下関係のないつぶやき*
最近呼称についてちょっと考えたり。
ネットで相手のことを呼ぶときに「さん」と「様」とどっちがいいのかなーと。
あちこち見て回ったところ「さん」の方が主・?っぽいし
そっちの方がフレンドリーな感じがするし
これからは「さん」付けでいこうかなと思ってます。


タグ:CSS
posted by 四葉屋 at 01:25| Comment(0) | TrackBack(0) | 色で見るCSS | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

この記事へのトラックバックURL
http://blog.seesaa.jp/tb/3175778

この記事へのトラックバック

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。


×

この広告は1年以上新しい記事の投稿がないブログに表示されております。