2008年06月14日

色で見るCSS−タグ編その3(その2の訂正と補足)

 タグクラウドのページに画像を入れていて気づいたんですが、「.tag-body」は上から下まで全部一続きではなく、記事・フォト・ビデオとそれぞれで一区切りになってました。記事部分の「blog」「blogbody」と同じような関係なんだからそりゃそうだろうって話ですね。でも全然気づいてなかった。というわけで画像差し替えて説明もちょっと修正しました。この分だと他にも間違いありそうだなあ……


 もうひとつ、昨夜書き忘れたんですが、一部の文字はデフォルトでは白字になってます。背景が白とか薄い色の場合はぱっと見何も書かれてないみたいになるので、必要に応じて色指定してください。オーディオ関係についてもおそらく同じことが言えると思います。
 これも一応画像つくってみました。クリックで大きいものがでます。
色見タグ4
 ここでは一番優先されるプロパティを記載していますが、絶対ここじゃないと反映されないってわけではないです。(例えば「.tag」で色指定すれば、リンク部分以外全部その色になります。)
ラベル:CSS
posted by 四葉屋 at 17:06| Comment(0) | TrackBack(0) | 色で見るCSS | このブログの読者になる | 更新情報をチェックする

色で見るCSS−タグ編その2

 すごく今更ですが、自分用メモも兼ねてアップします。
 以前の記事(タグクラウド編その1)と一部かぶっていたり、うっかり色づけを忘れた部分もありますが、今回は記事・フォト・ビデオが表示された状態のものに色をつけてみました。オーディオに関しては該当するファイルの手持ちがなかったのでやってません。
 画像はそれぞれクリックで大きいものが出ます。不十分な部分もありますが、CSSの該当箇所も書いてあるので画像だけでもだいたいわかるかと思います。

 また、一部デフォルトでは文字色が白色の部分があります。必要に応じて色指定してください。詳しくはその3をどうぞ。[2008/06/14 追記]



色見タグ2


.tag (色指定忘れました。タグクラウドから一番下の「もっと見る」までにあたります。気になる方はその1を見てください)
全体。タグクラウドから一番下の「もっと見る」まで。優先順位が一番低いので、他の部分で指定するとこちらの指定は反映されません。


#tag_cloud (水色)
ブログで登録しているタグクラウド一覧。


#tag_cloud a
タグクラウド一覧のリンクの色を指定したい場合はここ。


.tag-title (黒)
現在リスト表示されてるタグの名称。



.tag-body (画像右側の緑色の部分)
タグの種類や一覧など、選択されたタグに関して表示される部分全体それぞれ「.tag-more」のところで一旦区切られてます。優先順位は「.tag」より上でそれ以外より下。[2008/06/14 追記]


.tag-service (ピンク)
記事・フォト等、タグが登録されているものの種類。


.tag-search (黄)
「○○でSeesaa全体を検索する」の部分。


.tag-article (黄緑)
記事一覧。ただし「.tag-article-title」が優先。


.tag-article-title (黄緑)
記事一覧。「.tag-article」より優先。投稿日時については「.tag-article-posted」が優先。


.tag-article-posted(白)
それぞれの記事の投稿日時。


.tag-article-summary
summaryだから要約部分の何かだろうけどブログには特に反映されず。


.tag-more (赤)
「もっと見る」の部分。


.tag-photos (オレンジ)
写真とそのファイルの名前・サイズ・容量。ただし「.tag-photos-title」が優先。


.tag-photos-title(えんじ)
写真の名前・サイズ・容量。「.tag-photos」より優先。



.tag-audios{
}
.tag-audios-title{
}
.tag-audios-posted{
}
今回はやってませんが、多分他と同じ感じだと思います。



.tag-videos
ビデオのサムネイル?とそのファイルの名前・時間・容量。ただし「.tag-videos-title」が優先。


.tag-videos-title
ビデオの名前・時間・容量。「.tag-videos」より優先。



 また、「もっと見る」をクリックした先のページで該当記事等が多数ある場合、ナビが表示されますがこれは「.tag-navi」で指定します。(下の画像のピンク色の部分です)
色見タグ3



 これでオーディオ以外のタグは全部だと思います。多分。
 色分け画像、今見返すと思った以上に抜けが激しい…画像やオーディオのところの優先順位とかすっかり忘れてました。でもアップロードしちゃったしこのままです。ごめんなさい。
 あ、ちなみに前にどこだかわからないって言ってた「tag-word」は個別の記事の下に表示される、その記事の登録タグ一覧の部分でした。
ラベル:CSS
posted by 四葉屋 at 02:39| Comment(0) | TrackBack(0) | 色で見るCSS | このブログの読者になる | 更新情報をチェックする

2006年08月15日

色で見るCSS−タグ編その1

 思いっきり自分用なんですが、バックアップも兼ねてブログにもアップしておくことにします。
 タグクラウドを表示した状態の記事部分のHTMLから拾ってきた要素名と対応箇所は以下のとおり。(それぞれの要素の上についている/*  */部分が対応箇所の説明・画像中の色。このままCSSにコピペできる形になってるので見難いですが…)

 参考にさせていただいた記事はコチラ(ブログでabc順)。
「タグサービスを有効にする方法」Inqsite Blog/深田さん
「タグクラウド追加中」tagebuch-zweit/seiさん
 ありがとうございました!

色見タグ1

※画像は左からCSS指定なし、「.tag」のみ指定、「.tag-body」まで指定、それ以降の要素も指定した状態の画像を左→右へ重ねたものです。

/*タグ全体・灰*/
.tag{
}
/*タグ一覧・紫*/
#tag_cloud{
}
/*タグの名前・緑*/
.tag-title{
}
/*「記事」〜「もっと見る」(これ以下の項目を全て指定した場合は反映されず)・黄土*/
.tag-body{
}
/*「記事」>tag-body・赤*/
.tag-service{
}
/*「Seesaa全体を検索」>tag-body・青*/
.tag-search{
}
/*記事一覧>tag-body(tag-article-titleを指定した場合は反映されず)・橙*/
.tag-article{
}
/*記事の名前>tag-article(範囲はtag-articleと同じ)・橙*/
.tag-article-title{
}
/*記事概要(ページ上には変化なし)*/
.tag-article-summary{
}
/*「もっと見る」・>tag-bodyピンク*/
.tag-more{
}


 こんな感じです。あいかわらず見難い配色ですみません。
 「.tag-word」その他はまだ対応箇所がわからなかったりテスト用のHTMLが用意できてなかったりするので保留中です。
[2008/06/14 追記]
 tag-wordは個別の記事の下に表示される、その記事の登録タグ一覧の部分でした。
ラベル:CSS
posted by 四葉屋 at 00:00| Comment(0) | TrackBack(0) | 色で見るCSS | このブログの読者になる | 更新情報をチェックする

2005年05月02日

色で見るCSSまとめ(それぞれの優先順位)

こんにちは。
今回は「色で見るCSS」のまとめ……なんですが
全然うまくまとめられませんでした。ごめんなさい。

苦し紛れに表にしてみました。
はみ出ちゃうので画像にしてあります。

914×636(23KB)
色見まとめ表

640×445(81KB)
色見まとめ表(縮小版)

内容は同じです。
ブラウザのサイズに合った方を見てください。

今回はこれだけです(しょぼっ)
お付き合いありがとうございましたわーい(嬉しい顔)
ラベル:CSS
posted by 四葉屋 at 13:23| Comment(0) | TrackBack(0) | 色で見るCSS | このブログの読者になる | 更新情報をチェックする

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 | このブログの読者になる | 更新情報をチェックする

広告


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

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

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


×

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