サイドバーの仕切りをborderでしたいのですが

Simplicityの特徴 フォーラム Simplicityについての質問 サイドバーの仕切りをborderでしたいのですが

  • このトピックには7件の返信、1人の参加者があり、最後にチキンにより10年、 3ヶ月前に更新されました。
7件の返信スレッドを表示中
  • 投稿者
    投稿
    • #36720
      チキン
      ゲスト

      また初歩的な質問で恐縮です。

      サイドバーを枠線で囲みたいのですが、プロフィール部分(テキスト部分)だけ独立した別の枠線にしたいのです。プロフィール部分の枠と、アーカイブ、検索、最近のコメント等は同じ枠の中に、といった具合です。

      現在はテキスト自体にスタイルを記述してプロフィールとしていて、テキスト部分だけスタイルシートの枠線が消せれば自然と2枠にできるはずなんですが、思うようにいきません。
      sidebar全体をborderで囲ったあと、.textwidgetを:not()で外すととんでもない見た目になってしまったり、入れ子状になったり、枠線が適用されなかったりといった感じです。

      スタイルシートだけでなんとかしようと思ってたのですが、HTMLに要素追加してセレクタで指定できるようにしたほうがいいのでしょうか。

      アドバイスのほどよろしくお願いします。

    • #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検索が赤ボーダーで囲まれます。

    • #36726
      チキン
      ゲスト

      Hidekichiさん

      早速返信ありがとうございます!

      個別に指定して囲む事はできたのですが、サイドバー全体を枠で囲みつつ、検索ボックスだけを別の枠にする場合はどうすればよいでしょうか。

      sidebarの中の1要素だけを別枠にしたいのです。

      #sidebar :not(wiget-text:nth-child(1)){
      border: 1px solid black;
      }

      として、さらにその後nth-child(1)を指定してborderをすれば2枠にできるかなっと思ったのですがうまくいきませんでした。
      記述がおかしいかもしれません。

      よろしくお願いします。

    • #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

      こんな感じじゃなかろうかと。

    • #36729
      チキン
      ゲスト

      Hidekichiさん

      >サイドバーの中にいくつかウィジェットがあって、仮に上3つを青線、下2つを赤線で分けるというような場合でしょうか?
      >赤枠と青枠を並んで表示させたいと言うことなのではなかろうかと。

      まさにその通りです、へたな説明を汲んでくださってありがとうございます。
      jQueryを触るのがはじめてなので出来るかわかりませんが取り急ぎお礼をと思いまして。

      丁寧にありがとうございます、チャレンジしてきます!

    • #36730
      チキン
      ゲスト

      …この場合jQueryはどこに書くのがいいんですか(小声)

    • #36733
      Hidekichi
      ゲスト

      子テーマjavascript.jsにひとますまるっぽコピペで、後はセレクタを指定します。
      セレクタはcssと同じ感じです。

      $(セレクタ).wrap(“挿入(囲む)するブロック”);

      最初の(function($){はjQueryの$を使うため、次の$(function(){ はドキュメントの準備ができた時という意味です。

      つまりセレクタを指定していけば良いということになります。
      サンプルはだいたいで書いてあるので、正しいセレクタはデベロッパーツールで調べながらやってください。

    • #36736
      チキン
      ゲスト

      Hidekichiさん

      すごくぎこちないですが出来ました!!!
      度々丁寧に説明してくださって本当にありがとうございます!

7件の返信スレッドを表示中
  • トピック「サイドバーの仕切りをborderでしたいのですが」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)