Simplicityの特徴 › フォーラム › Simplicityについての質問 › サイドバーの仕切りをborderでしたいのですが
- このトピックには7件の返信、1人の参加者があり、最後に
チキンにより10年、 3ヶ月前に更新されました。
-
投稿者投稿
-
-
2016年2月21日 1:03 PM #36720
チキン
ゲストまた初歩的な質問で恐縮です。
サイドバーを枠線で囲みたいのですが、プロフィール部分(テキスト部分)だけ独立した別の枠線にしたいのです。プロフィール部分の枠と、アーカイブ、検索、最近のコメント等は同じ枠の中に、といった具合です。
現在はテキスト自体にスタイルを記述してプロフィールとしていて、テキスト部分だけスタイルシートの枠線が消せれば自然と2枠にできるはずなんですが、思うようにいきません。
sidebar全体をborderで囲ったあと、.textwidgetを:not()で外すととんでもない見た目になってしまったり、入れ子状になったり、枠線が適用されなかったりといった感じです。スタイルシートだけでなんとかしようと思ってたのですが、HTMLに要素追加してセレクタで指定できるようにしたほうがいいのでしょうか。
アドバイスのほどよろしくお願いします。
-
2016年2月21日 2:04 PM #36722
Hidekichi
ゲストサイドバーに入ってるウィジェットの配置が変わらない場合、もしくは今後追加したとしてもプロフィールの箇所が変わらないとした場合は、
#sidebar .widget_text:nth-child(n) { border: 1px solid red; }のようにして、いくつ目の.text-widgetかで別途指定することができます。
プロフィールが1つ目であれば、#sidebar .widget_text:nth-child(1) { border: 1px solid red; }こんな感じです。例えばSimplicity公式のに上記を追加したとしたら、Google検索が赤ボーダーで囲まれます。
-
2016年2月21日 3:53 PM #36726
チキン
ゲストHidekichiさん
早速返信ありがとうございます!
個別に指定して囲む事はできたのですが、サイドバー全体を枠で囲みつつ、検索ボックスだけを別の枠にする場合はどうすればよいでしょうか。
sidebarの中の1要素だけを別枠にしたいのです。
#sidebar :not(wiget-text:nth-child(1)){ border: 1px solid black; }として、さらにその後nth-child(1)を指定してborderをすれば2枠にできるかなっと思ったのですがうまくいきませんでした。
記述がおかしいかもしれません。よろしくお願いします。
-
2016年2月21日 5:13 PM #36728
Hidekichi
ゲストつまり、サイドバーの中にいくつかウィジェットがあって、仮に上3つを青線、下2つを赤線で分けるというような場合でしょうか?
もしこのような事であれば、それはやはりjQueryの力を借りることになりそうです。
#sidebar .widget .widget .widget .widgetこのようになっている構造では、#sidebarそのものと、各.widgetしかボーダーで囲えません。ボーダーはブロックの縁についているので、ブロックが必要になります。
サンプル: サイドバーの子要素にブロック挿入 | jsFiddle
プロフィールがどこに入っているかで、やり方も変わりますけども、まぁこんな感じで囲んだら良いのではないかと思ったり。
囲む他にも、予め必要なブロックを入れておいて、そこに挿入していくという方法もあります。> サイドバー全体を枠で囲みつつ、検索ボックスだけを
> 別の枠にする場合はどうすればよいでしょうか。#sidebar { border: 1px solid red; } #sidebar .widget_search { border: 1px solid blue; }質問をcssに直せばこうですが、おそらく言われているのはサイドバーを見た目に分割したいと言うことだと思うんです。つまり上記で言うと、赤枠の中に青枠を作りたいのではなく、赤枠と青枠を並んで表示させたいと言うことなのではなかろうかと。
そうなると、サイドバーを枠で囲む方向ですると、必ずサイドバーの枠の中にもうひとつ枠ができてしまうということになるので、サイドバー自体を枠で囲むのは意にそわないと思います。
ウィジェット自体は並びはどうにでも変えられるので、仮にプロフィールが一番上に入っているとして、#sidebar .block1 .widget_text(プロフィール) /.block1 .block2 その他のウィジェット /.block2 /#sidebarこんな感じの構造になったら良いわけです。で、jQueryの.wrapでプロフィールを囲み、それ以外を.wrapAllで囲むと言う感じでなら、
サンプル: 最初のサンプルのアップデート | jsFiddle
こんな感じじゃなかろうかと。
-
2016年2月21日 6:50 PM #36729
チキン
ゲストHidekichiさん
>サイドバーの中にいくつかウィジェットがあって、仮に上3つを青線、下2つを赤線で分けるというような場合でしょうか?
>赤枠と青枠を並んで表示させたいと言うことなのではなかろうかと。まさにその通りです、へたな説明を汲んでくださってありがとうございます。
jQueryを触るのがはじめてなので出来るかわかりませんが取り急ぎお礼をと思いまして。丁寧にありがとうございます、チャレンジしてきます!
-
2016年2月21日 7:14 PM #36730
チキン
ゲスト…この場合jQueryはどこに書くのがいいんですか(小声)
-
2016年2月21日 7:49 PM #36733
Hidekichi
ゲスト子テーマjavascript.jsにひとますまるっぽコピペで、後はセレクタを指定します。
セレクタはcssと同じ感じです。$(セレクタ).wrap(“挿入(囲む)するブロック”);
最初の(function($){はjQueryの$を使うため、次の$(function(){ はドキュメントの準備ができた時という意味です。
つまりセレクタを指定していけば良いということになります。
サンプルはだいたいで書いてあるので、正しいセレクタはデベロッパーツールで調べながらやってください。 -
2016年2月22日 12:03 AM #36736
チキン
ゲストHidekichiさん
すごくぎこちないですが出来ました!!!
度々丁寧に説明してくださって本当にありがとうございます!
-
-
投稿者投稿
- トピック「サイドバーの仕切りをborderでしたいのですが」には新しい返信をつけることはできません。