WordPressテーマSANGOの質問

背景が白のためサイドバーのウィジェットの境界が分かりづらい

アバター
KUDO

お世話になっています。
現在背景色を白で設定しています。
なぜだかメニューボックスの左右と下部の枠線がなくなってしまっています。
トップページのタブ切替機能のようにシャドウを付けて背景色とメニューボックスの境を付けたいのですが可能でしょうか?
それか枠線が無くなった原因などがわかればお願いしたいです。
HTMLは何度も確認しましたが間違ってないと思います。
お手数ですがよろしくお願いします。

メニューの設定をしよう
コメントへの回答
サルワカくん
サルワカくん
2019/06/20

お世話になっております。
線が表示されない原因を究明するために、サイトのURLを教えていただけますか?
(コメント欄に貼っていただければ公開しないようにします)

もしくは以下のCSSを外観→カスタマイズ→追加CSSに貼ってみると直るかもしれません。

.widget-menu li, .widget-menu li:nth-child(even) {
border-color: #000000; /* 線の色を変更 */
}

(これで直る場合、線の色が各メニューのタイル色と被っていたことが原因です)

よろしくお願いします。

アバター
kudo
2019/06/24

コメント返信ありがとうございます。
お聞きしたかったのはメニューボックスの外の枠線だったのですが、SANGOで出来ている他サイトも色々見ていたらもしかしたら初めから枠は無いんじゃないかと思っています。
背景色を白にしているのでタブ切替機能のようなシャドウがあると境目がわかりやすいのですが、教えていただくことは可能でしょうか?
お手数ですがよろしくお願いします。

サルワカくん
サルワカくん
2019/06/24

あ、メニューのタイル全体を囲む枠線ということですね。それであれば、以下のCSSでつけることができます。

.widget-menu {
    border: solid 2px #ececec;
    border-top: none;
}

とはいえ、背景が白なので、ウィジェットとの境界が分かりづらくなってしまっているようですね。
以下のCSSを使えば、どのサイドバーウィジェットの境界も明確になって良いかと思います(こちらを使う場合、上のCSSは不要です)。

.widget {
  box-shadow: 0 2px 4px rgba(0,0,0,.2);
  border-radius: 4px;
  overflow: hidden;
}
/*検索ウィジェットは元から影がついているため、影は不要*/
.widget_search {
  box-shadow: none;
}

よろしくお願いします。
(コメントのタイトルは修正させていただきました)

アバター
kudo
2019/06/25

本当に有難うございます。
ウィジェットとの境界のcssまで書いていただき助かりました。
さっそく追加してみました。
ウィジェットとの境目が出来て本当に見やすくなり良い感じです。
お手数おかけしました。