WordPressテーマのプルダウンメニューの余白や行間をCSSで詰めたい

CSSが全くわからないのですが、Custom CSSで行間が詰めれるのではないかと思っています。
そうは思っているのですが、どうすればいいのか全くわかりません。
メニューバーでマウスオーバーしたら現れる、プルダウンメニューの行間を詰めたいです。

＜追記＞

Negan - Clean, Minimal WooCommerce Theme
http://negan.la-studioweb.com/demo-14/
を利用しています。

このテーマの管理画面で、Custom CSS　Paste your custom CSS code here.とあります。
メニューバーのプルダウンメニューの周りの空白部分の幅と、行間を変更するにはどう記述すればいいのでしょうか？

＜追記＞

上下と左だけは幅を詰めることができたのですが、右側だけが今だに広いままです。dit.さんに教えてもらった”「10px 15px 15px 5px 」と書くと上、右、下、左の指定”でも試してみたのですが相変わらず変わりません。

退会済みユーザー

2017/10/26 16:03

実際のサイトを見れますか？

dit.

2017/10/27 01:10

まずはテーマ名とその入手方法（ダウンロードしたものであれば取得したURL）を提示してください

wptm

2017/10/27 02:12

Negan - Clean, Minimal WooCommerce Themeです。negan.la-studioweb.com/demo-14/

行動規範の内容に同意します

回答4件

ここの回答だけでCSSがまったくわからないと断言する人に解決方法が伝わる自信はありませんが、
スタイルシートの仕組み、概念、使い方、がわからないと
組み込むことすら出来ないのではないかと思われます。

スタイルシートは、対象のhtml要素を特定する方法の工夫と、
特定したhtml要素の見た目の変え方の工夫から成り立ちます。

対象のhtml要素を特定する方法には、id指定、class指定、html要素指定などがあり、
組み込んでいるWordPressテーマがどういう指定方法を使っているかを把握しないと
自分ルールの押しつけは出来ません。
どうやってhtml要素を特定しているかを把握するのに、
例えばMozilla FirefoxやGoogle Chromeに組み込まれている開発ツールを駆使することで、
（あるいは追加で便利な拡張機能を組み込んで）
把握することができるようになります。
Firefoxの開発ツール
 Chromeの開発ツール

html要素を特定すると、その要素に適用されているスタイルも把握できます。
marginやpaddingといったキーワードに注目すれば、余白の作り方がわかりますし、
開発ツール上でオンデマンドに数字を書き換えれば反映され、
どこをどういじればいいかがわかるはずです。

使っているWordPressテーマも示されていないので、
提供できる情報はこのくらいしかありません。
ここまで書いている情報で理解できなければ、
使っているWordPressのテーマを回答者側でも再現するための情報を提供ください。

投稿2017/10/27 00:47

退会済みユーザー

総合スコア0

wptm

2017/10/27 02:49

テーマはNegan - Clean, Minimal WooCommerce Themeを使っています。 negan.la-studioweb.com/demo-14/

退会済みユーザー

2017/10/27 04:15

その情報は、質問文に含めるべき内容ですね。追記すると良いと思います。

wptm

2017/10/27 06:40

はい、勉強になりました。追記はしておきました。

行動規範の内容に同意します

ベストアンサー

css
1/* サブメニューポップアップ部分全体の上下に20pxずつ余白 */
2.mega-menu .mm-popup-wide .inner>ul.sub-menu>li li ul.sub-menu, .mega-menu .mm-popup-narrow ul {
3    padding: 20px 0; /* 上下　左右 */
4}
5/* 横幅が広い方のサブメニューの各メニューの上下10pxずつ、左右15pxずつの余白 */
6.mega-menu .mm-popup-wide .inner>ul.sub-menu>li li>a, .mega-menu .mm-popup-narrow li.menu-item>a {
7    padding: 10px 15px; /* 上下　左右 */
8}
9/* 横幅が狭い方のサブメニューの各メニューの上下10pxずつ、左右40pxずつの余白 */
10.mega-menu .mm-popup-narrow li.menu-item>a {
11    padding: 10px 40px; /* 上下　左右 */
12}

おそらくこのあたりだと思うのですが、ご使用のテーマが有料のようでしたので実装テストはしてません。
Chromeのデベロッパーツールでデモサイトを切り替えて確認しただけです。

テーマのカスタマイズの中にCustomCSSがあるということなので、
これをそこに記述して数字を変更し、どこが変わるか確認してみてください。

上記のコードを記述し、キャッシュクリアして読み込みなおしてもうまく変わらない場合は優先度を上げるために!importantを使ってみてください。

css
1.mega-menu .mm-popup-wide .inner>ul.sub-menu>li li ul.sub-menu, .mega-menu .mm-popup-narrow ul {
2    padding: 20px 0 !important;
3}
4
5.mega-menu .mm-popup-wide .inner>ul.sub-menu>li li>a, .mega-menu .mm-popup-narrow li.menu-item>a {
6    padding: 10px 15px !important;
7}
8
9.mega-menu .mm-popup-narrow li.menu-item>a {
10    padding: 10px 40px !important;
11}

追記
横幅はここで指定しているようです。

css
1.mega-menu li ul.sub-menu {
2    min-width: 240px;
3}

投稿2017/10/27 07:31

編集2017/11/06 23:42

dit.

総合スコア3235

wptm

2017/10/27 15:27

できました！が、何故か全てのサブメニューポップアップの右側だけが反映されません。幅広いままになっています。その他はきちんと狭めることができました。とても助かりました。ありがとうございます。

dit.

2017/10/29 00:45

右側というのがどこを指すのかがいまいちピンとこないのですが、CSSは後から書いたものの方が優先されるので、幅の狭い方、広い方の記述の順番を逆にして試してみてもいいかもしれません。 (元の記述の順番を考慮せず回答してしまったかもです) また、「10px 15px」と書くと上下、左右ですが、「10px 15px 15px 5px 」と書くと上、右、下、左の指定ができます。

wptm

2017/11/06 07:33

質問に追記して右側がどこなのかの画像を貼りました。上、右、下、左の指定でもできませんでした。

wptm

2017/11/07 09:10

ありがとうございます。無事にできました。

行動規範の内容に同意します

以下の値を変更すれば変わります。

.mega-menu .mm-popup-wide .inner > ul.sub-menu > li li ul.sub-menu, .mega-menu .mm-popup-narrow ul {
padding: 20px 0;

例えば

.mega-menu .mm-popup-wide .inner > ul.sub-menu > li li ul.sub-menu, .mega-menu .mm-popup-narrow ul {
padding: 5px 0 !important:
}

こんな感じで出来ませんか？

投稿2017/10/27 02:25

編集2017/10/27 05:11

退会済みユーザー

総合スコア0

wptm

2017/10/27 03:06

ありがとうございます。 padding: 20px 0の数値を変更すればいいのは理解できました。が、これをCustom CSSにどう記入すればいいのでしょうか？

wptm

2017/10/27 06:39

.mega-menu .mm-popup-wide .inner > ul.sub-menu > li li ul.sub-menu, .mega-menu .mm-popup-narrow ul はどう書き換えるのでしょうか？そのまま貼り付けても変化はありませんでした。

退会済みユーザー

2017/10/27 07:13

管理画面からではなくFTPなどでCSSファイルを直接編集してください。 FTPなどの使い方は契約されてるホスティング会社のマニュアルを見てください。

wptm

2017/10/27 07:26

直接の編集だと、テーマがバージョンアップしたときに再度編集しないといけなくなるので、custom cssでの編集方法を質問させてもらっていました。

退会済みユーザー

2017/10/27 07:30

子テーマにすれば良いのではないですか？あの画像のような黒い画面は見たことないので分かりません。テーマの販売元に訊いた方が確実だと思います。

wptm

2017/10/27 15:28

dit.さんに教えてもらった方法でなんとかcustom cssで変更ができました。 ay03さんに教えてもらった方法もできていたんだと思います。 !important:を付けずに数値を何度変更しても変化がなかったので諦めてしまっていました。教えてもらったことをきちんと実行せずにすみませんでした。何度も教えて頂きありがとうございました。

行動規範の内容に同意します

CSSで行間の指定は、line-height:1.5;のように指定します。

投稿2017/10/26 23:07

amaryllis

総合スコア179

wptm

2017/10/27 07:28 編集

Firefoxのメニューにある調査から該当の場所を選択し、スタイルの絞り込みでline-heightを検索をかけたらでてきました。で、数値をいじったのですが、サイト全体？の行間が変化しました。メニューバーのプルダウンメニューのみの変更はできませんでした。が、わかったところでCustom CSSにその変更を行う記述の仕方もわからないのです。

amaryllis

2017/10/27 09:30

メニュー部分のhtmlとCSSは、どうなっていますか？それがないと回答出来ませんが、 htmlが、 <nav class="menu"> <ul> <li>メニュー1</li> ・・ </ul> </nav> だと、CSSは、 .menu ul li { line-height:1.5; } ↑ みたいになります。

wptm

2017/10/27 15:32

htmlとCSSはデモサイトのリンクを貼っていました。が、今回はすでにdit.さんに解決してもらいました。わざわざ教えて頂きありがとうございました。

行動規範の内容に同意します

あなたの回答