お世話になっております。
▼ハンバーガーメニュー内のカスタムHTMLの左右に余白を作るCSS
#drawer .widget .custom-html-widget {
padding: 0 15px;
}
↑これを貼り付ければハンバーガーメニュー内のカスタムHTMLの左右に余白ができます。
やや難しいのが、プロフィール用のカスタムHTMLウィジェット以外にも、カスタムHTMLウィジェットを使っているようなので(メニューの部分)、上のCSSだと全体の余白が変わってしまいます。そこでブラウザの検証機能を使って余白を作りたいカスタムHTMLウィジェットのidを探します。
<div id="custom_html-19" class="widget_text widget widget_custom_html">
余白をつけたいウィジェットの中身
...
↑ウィジェットのあたりのソースコードを見るとid(custom_html-19
)が見つかるので、そちらにだけ適用されるよう、以下のようなCSSを追加します。
#custom_html-19 .custom-html-widget {
padding: 0 15px;
}
よろしくお願いします。
きれいに反映されました。
ご丁寧に確認くださり、どうもありがとうございました!
WordPressテーマSANGOの質問
カスタムHTMLウィジェットでまわりに余白をつけたい
お世話になっております。
スマホのハンバーガーメニューにプロフィールを設置したのですが、一番左側の文字が左に寄りすぎて見づらくなっています。
左側に余白を設置する方法がありましたら教えていただけると幸いです。
このプロフィールは、ウィジェットのスマホ用ナビドロワーにカスタムHTMLで設置しています。