WordPressテーマSANGOの質問

カスタムHTMLウィジェットでまわりに余白をつけたい

アバター
しずか

お世話になっております。
スマホのハンバーガーメニューにプロフィールを設置したのですが、一番左側の文字が左に寄りすぎて見づらくなっています。
左側に余白を設置する方法がありましたら教えていただけると幸いです。

このプロフィールは、ウィジェットのスマホ用ナビドロワーにカスタムHTMLで設置しています。

ウィジェットの設定をしよう:広告の貼り方も解説
コメントへの回答
サルワカくん
サルワカくん
2019/08/19

お世話になっております。

▼ハンバーガーメニュー内のカスタム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;
}

よろしくお願いします。

アバター
しずか
2019/08/19

きれいに反映されました。
ご丁寧に確認くださり、どうもありがとうございました!