2005年04月24日

色で見るCSSその5(コメントとトラックバック)

おはようございます。
PCリカバリしたりソフト入れなおしたりしてたら徹夜しちゃいました。眠い……

5回目はコメントとトラックバックです。
色付け前の画像(クリックで大きくなります)
色見0commenttrackback-0

色付け後の画像(クリックで大きくなります)
色見commenttrackback


コメント
comments(contentに優先・textに非優先)
背景(若草):コメント部分
文字:反映されず

comments-head(「この記事へのコメント」「コメントを書く」)
背景(薄橙):上記二箇所の背景
文字(緑色):「〜コメント」の文字

comments-body(コメント投稿情報・コメント本文の周り・コメント記入欄)
       (comments-headに優先)

背景(紫色):上記三箇所の背景
文字(紅色):コメント投稿情報・コメント記入の項目
リンクに関しては本文と同様になるようです。

comments-post(コメント投稿情報)(comments-bodyに優先)
背景(薄紫):コメント投稿情報部分
文字(青紫):コメント投稿情報
comments-post a(コメント投稿情報のリンク部分)(comments-postに優先)
背景(緑色):コメント投稿情報のリンク部分
文字(黄色):コメント投稿情報のリンク文字
      (指定しなかった場合、配色はcomments-postと同様になります。
       本文と一緒にはなりません)


トラックバック
trackback(トラックバック)(contentに優先)
背景(水色):トラックバック部分
文字(紫色):トラックバック部分
trackback a(トラックバック部分のリンク)
背景(灰色):トラックバック部分のリンク背景
文字(白色):トラックバック部分のリンク

trackback-url(?)
背景:変化なし
文字:変化なし
「この記事へのTrackBack URL」じゃないかと思うんですが何も変わらなかった…

trackback-body(?)
背景:変化なし
文字:変化なし
これも何も変わらず。

trackback-post a
背景:変化なし
文字:変化なし
これも変わらない。



というわけで最後の方はちょっとわかりませんでした。
今回はここまでです。お付き合いありがとうございましたるんるん
タグ:CSS
posted by 四葉屋 at 08:21| Comment(6) | TrackBack(0) | 色で見るCSS | このブログの読者になる | 更新情報をチェックする

2005年04月22日

色で見るCSSその4(記事の部分/date・title・text・blockquote・posted)

今回はdate・title・text・blockquote・postedです。記事の部分ですね。
色付けは前回の続きになります。上にナビがなかったりと実際には少し違いますが。
画像はこちら↓(クリックで大きくなります)
色見date~posted


date(日付)(blogに優先)
背景(赤紫):日付部分の背景
文字(黄緑):日付

title(記事タイトル)blogbody・リンク色に優先(リンク色はtetle aのみ)
背景(紫色):記事タイトル部分
文字(白灰):記事タイトル
      (同じ日の二つ目の記事には反映されずリンク色のまま)
title a(titleに優先)
背景(小豆):記事タイトル文字の背景のみ
      (同じ日の二つ目の記事の場合少し幅が狭い)
文字(橙色):記事タイトル(二つ目の記事も)


text(記事本文)(blogbodyに優先)
背景(薄紫):記事本文背景・コメント本文背景
文字(黄土):記事本文・コメント本文
text a(textに優先(背景))
背景:本文中のリンク背景(指定しない場合は本文背景と一緒)
文字:本文中のリンク文字

blockquote(引用)

背景(薄緑):引用部分(一つ前の画像の本文と色が似てるけど関係ないです)
文字(緑色):引用文章(指定しない場合は本文と同じ色)

posted(投稿情報)(blogbodyに優先(背景))
背景(黒色):投稿情報部分
文字(赤紫):投稿者・時間・しきり
posted a(postedに優先(背景))
背景(黄色):投稿情報のリンク背景のみ(カテゴリだけちょっと幅が狭い?)
文字(白紫):投稿情報のリンク文字のみ


もう何がなんだかわからなくなってきました……


*次回予告*
CSSを見るとこのあとはサイドバーが来るわけですが
先にコメント・トラックバックをやろうと思います。
ちなみに次々回(一応最終回)はサイドバーとその他です。
本当はこの間にダイエットログをはさむつもりだったんですが
トラックバックまでやった時点で「終わった〜」と思って
真っ白な状態に戻してしまいました_| ̄|○|||
はじめから最後まで一気にやってたのでなんだかぼーっとしちゃっててたらーっ(汗)
というわけでとりあえずダイエットログは飛ばします。
ダイエットログの部分を知りたかった方、ごめんなさい(>_<)

5回目は多分土日のどちらかに。
お付き合いありがとうございました!



*私信*
メールありがとうございます(^0^)
こちらこそ色々と参考になりました!
取り急ぎお礼まで。




タグ:CSS
posted by 四葉屋 at 01:15| Comment(0) | TrackBack(0) | 色で見るCSS | このブログの読者になる | 更新情報をチェックする

2005年04月18日

色で見るCSSその3(navi・content・blog・blogbody)

3回目はnavi・content・blog・blogbodyです。
今回も真っ白からスタート。
色付け後の画像はこちら↓(クリックで大きくなります)
色見navi~blogbody


navi(個別ページで出る前後の記事へのリンク)(contentに優先)
背景(茶色):ナビ部分
文字(黄色):矢印としきり(文字はリンクの色)

content(記事部分・コメント・トラックバック)

背景(桃色):記事部分・コメント・トラックバック
文字(緑色):日付・記事本文
      (投稿情報はデフォルト。記事タイトルはリンク色)

blog(記事部分)(contentに優先)
背景(水色):日付から投稿情報のちょっと下まで
文字(紫色):日付・記事本文(記事タイトルはリンク色)

blogbody(記事部分の一部)(blogに優先)

背景(白緑):記事タイトルから投稿情報ほぼぎりぎりまで
文字(赤色):記事本文


ごちゃごちゃしてますが重なり具合を見るために次回はコレをベースに続きます。

お付き合いありがとうございましたm(_ _)m
タグ:CSS
posted by 四葉屋 at 18:23| Comment(0) | TrackBack(0) | 色で見るCSS | このブログの読者になる | 更新情報をチェックする

2005年04月15日

色で見るCSSその2(見出し関係/h1〜h3・banner・description)

2回目となる今日はh1〜h3・banner・descriptionをまとめてやります。
ベースはシンプルホワイトなので真っ白からのスタートです。
とその前に「a」について。
h1・h3にはそれぞれに「a」のついたものがあって
文字色はそこに書くみたいなんですが、そこに背景色も指定してみました。

今回の画像はこちら↓(クリックで拡大できます)
色見h1~description


h1(ブログタイトル)(bannerに優先)
背景(薄紫):ブログタイトルの背景からずーっと右の方まで
文字:変化なし
h1 a(h1に優先)
背景(深緑):文字部分の背景だけ
文字(白緑):ブログタイトルのみ

h2(日付)
背景(紺色):日付の背景部分
文字(柿色):日付

h3(記事タイトル)
背景(黄緑):記事タイトルの背景部分
文字:反映されず
H3 a(h3に優先
背景(水色):記事タイトルの文字背景部分だけ
文字(紫色):記事タイトル

banner(バナー)
背景(青色):画面最上部
文字(黄色):ブログ説明文のみ変化
      (ブログタイトルはh1で指定した色。未指定の場合はリンク色のまま)

description(ブログ説明)(bannerに優先)
背景(水色):ブログ説明文の文字背景のみ
文字(赤色):ブログ説明文


ここでまたリセット。
「〜に優先」っていうのがたくさん出てきてわかりにくいですね(^-^;A
優先順位は一番最後にまとめようと思ってます。
今日はここまでです。読んでくださってありがとうございましたわーい(嬉しい顔)




実験とは関係ないつぶやき
配布CSSearthpieceの見え方がIEとFirefoxでだいぶ違うので困ります。
本当は真ん中に配置したいんですが……

タグ:CSS
posted by 四葉屋 at 23:12| Comment(0) | TrackBack(0) | 色で見るCSS | このブログの読者になる | 更新情報をチェックする

2005年04月13日

色で見るCSSその1(body・container)

色で見るCSSとは。

テンプレート「シンプルホワイト」の背景や文字に色をつけていって
CSSの中のどれがどこを変える部分なのかを確認しよう、というものです。
アフィリエイトは試してません。ごめんなさい。
(ルールを読むのがめんどくさいのでやったことないんです)
実際にはベースにするCSSによって色々違ってくる部分があるかとは思いますが
まあ大体どのあたりをいじってるのかの参考になればいいなと。
一つの記事にすると画像が多くなるので何度かに分けます。
今のところ他にすることもありませんし。

基本的にこんな感じで書いていきます。

CSSのグループ(どこに影響するものか)(何に優先するか)
[画像]
背景(色):どこが変わったか
文字(色):どこが変わったか



説明は私の解釈なので間違ってる可能性があります。

それでは1回目。例によって画像クリックで大きくできます。


body(全体)
色見body
背景(桃色):全部。
文字(緑色):記事本文・サイドバーのリンクの解説(上)
青はデフォルトのリンク色です。

container(全体又はbodyの内側)(bodyに優先)
重なりを見るために横幅を90%にしてあります。
ちなみにこの幅をあんまり小さくするとサイドバーや記事が落ちます。
色見container
背景(水色):containerで指定した範囲の背景(bodyに優先)
文字(赤色):記事本文・サイドバーのリンク解説(上)


あまり色数を増やすとわかりにくいのでとりあえず元に戻します。
これ以降に指定した場合に上の二つと重複する箇所については
bodyやcontainerよりもそちらが優先する……はず。


次は幾つかまとめてになるので今回はここまで。
すごく簡単な部分しかやってませんねたらーっ(汗)
次回は今週末くらいに投稿する予定です。
お付き合いありがとうございました!
タグ:CSS
posted by 四葉屋 at 20:58| Comment(0) | TrackBack(0) | 色で見るCSS | このブログの読者になる | 更新情報をチェックする

広告


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

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

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


×

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