KaRaKuRy

アクセスカウンタ

zoom RSS 左右のサイドバー内のデザインが揃わないのを直す方法(3カラム)

<<   作成日時 : 2008/02/21 12:04   >>

なるほど(納得、参考になった、ヘー) ブログ気持玉 1 / トラックバック 1 / コメント 4

CSS編集をがんばって、サイドバー内の見出しや壁紙や微妙な位置などなど、自分流にアレンジしてみたのに、左右サイドバーのうち、なぜか右側にしか反映されないよ〜!ということはありませんか。

右側サイドバーには、utilitiesという識別用の名前(idという。読み方はそのまま「アイディー」)がついています。
CSS編集画面では、#utilitiesと書かれます。
これを含む項目は、全て右側サイドバーのなかに収まっている部品の設定です。
「#utilities #calendar」だったら、「utilitiesというidの欄の中の、calendarというidの欄」という意味です。

さて、一方、左側のサイドバーには、utilities2というidがついているんですが、CSS編集画面の初期設定では、なぜかこのutilities2に関する項目が用意されてません。
#utilities#utilities2、一字しか違わなくてもぱそこん的(?)には全く別モノです。
#utilities2の設定は、自分で書いてしまいましょう。

右側サイドバーの中にあるカレンダーの文字を緑にするなら、
#utilities #calendar{ color:green; }なのですが、
カレンダーを左側サイドバーに移動したあとだと、
#utilities2 #calendar{ color:green; }
の項目の設定が適用されます。

だから両方書いておけば、その日の気分で右にやったり左にやったりしても大丈夫。
↓基本的にはこんな感じ。

#utilities #calendar{ color:green; }
#utilities2 #calendar{ color:green; }

でも、手直しするときに左右用の設定の両方を書き直さなきゃならないなんて、めんどくさいですよね。デザイン左右で同じなのに。
なので、これをひとつにまとめてしまいましょう。
{ }の前に書いてある項目は、コンマ「,」で区切っておけば、いくつでも並べることができます。
並べておくと、その後ろの{ }の中に書かれている設定が、共通で使われます。

#utilities #calendar, #utilities2 #calendar{ color:green; }


こうやっとけば、右欄にやっても左欄にやっても、カレンダーの文字は緑になります。
見出しだったら、

/* コンポーネント見出し(共通) */
#utilities h2{
〜中略〜
}

↓こう書き換える。

/* コンポーネント見出し(共通) */
#utilities h2, #utilities2 h2{
〜中略〜
}

つまり#utilitiesから始まっている項目は、{ }の前の部分をコピーして、コンマを挟んで並べて、片方の「#utilities」を「#utilities2」に直しておけばいいという話ですね。
実際の例をもっと見たい人は、このブログのCSS編集画面でもみてやってください。
http://karakury.at.webry.info/200802/article_3.html

テーマ

関連テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ
気持玉数 : 1
なるほど(納得、参考になった、ヘー)

トラックバック(1件)

タイトル (本文) ブログ名/日時
フェラガモ アウトレット
左右のサイドバー内のデザインが揃わないのを直す方法(3カラム) KaRaKuRy/ウェブリブログ ...続きを見る
フェラガモ アウトレット
2013/07/03 19:14

トラックバック用URL help


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

タイトル
本 文

コメント(4件)

内 容 ニックネーム/日時
ずっとどうしたらよいのか分からなかったので、大変参考になりました。
ありがとうございます。

2008/05/05 02:19
コメントありがとうございます。
最初からCSS編集に項目がないと、なかなか分からないですよね。
お役に立てて嬉しいです^^
ゆき
2008/05/05 16:47
I comment each time I appreciate a post on a website or
if I have something to valuable to contribute to the conversation. Usually it is a result of the
sincerness displayed in the article I read. And after this post
_E_TCho[_fUC_____ヨ@i3J_j KaRaKuRy/EFu_u_O. I was excited enough to create a commenta response :) I do have 2 questions for you if you don't mind. Could it be only me or do a few of these remarks come across as if they are written by brain dead visitors? :-P And, if you are writing on additional social sites, I would like to keep up with you. Would you list the complete urls of your public sites like your Facebook page, twitter feed, or linkedin profile?
Alyssa
URL
2017/05/07 11:37
I comment each time I especially enjoy a post on a website or I have something
to valuable to contribute to the discussion. Usually it's caused by the sincerness communicated
in the post I looked at. And on this article _E_TCho[_fUC_____ヨ@i3J_j KaRaKuRy/EFu_u_O. I was actually moved enough to post a thought ;-) I actually do have a couple of questions for you if it's okay. Could it be only me or does it give the impression like a few of these comments appear like written by brain dead visitors? :-P And, if you are writing at additional online social sites, I'd like to follow you. Could you list all of all your social pages like your linkedin profile, Facebook page or twitter feed?
Nolan
URL
2017/07/03 16:37

コメントする help

ニックネーム
URL(任意)
本 文

おもちゃ箱

Arcana Collection
詳細記事は→こちら
KaleidoRound
自分でつくれる万華鏡

記事をさがす

powered by Google
WWW KaRaKuRy
Neko

おもちゃ箱

【Hamster】
ちょたたたたっ。
詳細記事は→こちら
【Arcana Collection】
登録無しでもお試し戦闘ができるようになったよ。
詳細記事は→こちら
ブログ仲間s'新着記事tv 中継所
Powered By 画RSS

テーマ

左右のサイドバー内のデザインが揃わないのを直す方法(3カラム) KaRaKuRy/BIGLOBEウェブリブログ
文字サイズ:       閉じる