wordpressヘッダー下の余白の削除方法

質問

はじめまして。
wordpress初心者で、ネットで用語や作成の仕方を検索しながら、現在ＨＰを作成しています。

添付のヘッダー下にある余白とHOMEというテキストを消したいのですが方法が解りません、、、
購入先のデモサイト（http://www.nicdarkthemes.com/themes/wedding/wp/demo/wedding-planner/）
にはこの余白とHOMEテキストは無いのですが、私がインストールしたデモには、この余白とHOMEテキストがあります。

余白の下のRevolution sliderを上へ移動させてみたのですが、これ以上、上には移動できず、自分で調べてみたところ外観＞カスタマイズ＞追加CSSで編集できそうなのですが、CSSコードも全く解らず何を入れて良いのか、、行き詰っています。。。

↓これを入れてみましたが、変化はありませんでした、、、
例：#header {
margin-bottom: 0;

style.cssでheaderを検索したところ、↓が関係してそうなのですが、
.nicdark_datepicker .ui-datepicker-header .ui-datepicker-title { background-color: #F9F9F9; padding: 20px; font-size: 20px; font-weight: bolder; border-bottom: 1px solid #f1f1f1; }
このどれが空白部分を示しているのか・・(padding: 20px; ?)

もしかして、Headerの調整ではないのでしょうか・・・？

詳しく解る方教えて頂けますと幸いです。

回答No.2

roid_moon · ベストアンサー

普段のブラウザは何をお使いですか？
Google Chrome を例に説明すると、
1.特定したい要素の上で右クリック
2.出現したメニューの一番下、検証を選択
3.デベロッパーツール（開発者用画面）が開く
上記手順で選択した要素のidまたはクラス名を確認し、それに対してcssでdisplay:none;を指定してください。
IEやfirefoxでも同様の機能がありますので、お使いのブラウザ名と「開発者モード」あるいは「デベロッパーツール」という言葉で検索してみるといいでしょう。

全くの初心者ということでできるだけ具体的なアドバイスをしてあげたかったのですが、今いただいている情報だけではこれが限度です。
頑張ってください。

参考URL：

https://saruwakakun.com/html-css/basic/chrome-dev-tool

お礼

詳しく教えて頂きありがとうございます！！凄い～っ！！！デベロッパーツールって便利な機能ですね～！！今までに間違えてボタンを押してこの画面が出てきた事が何度かありましたが、HTMLとCSSが見れるとは・・！感動しました！！
試してみましたところ、恐らく下記だと思います。
HTMLコード：<div class="nd_options_section nd_options_height_50"></div>

CSS:.nd_options_height_50 {
height: 50px;
}

これを追加CSSに入力した下に、display:none;を入力すれば良いのでしょうか？

補足

ただ・・色々と皆さまに教えて頂きながら自分自身でも調べたり、いじったりしているうちに、固定ページ編集でwpbakery page builderの下の方に
ND options pageという項目に下記、

Title

□　Check if you want to hide the title page.

Margin Top / Bottom

□　Check if you want to remove the automatic page margin on top and bottom of the page.

という項目を見つけ、✔を入れたところ、余白もHOMEテキストも消すことが出来ました！！

皆さまから教えて頂いた内容とても勉強になり今後の糧になりました。
HPの作成頑張ります！！！

回答No.3

AsarKingChang

>これを追加CSSに入力した下に、display:none;を入力すれば良いのでしょうか？
それでいいかどうかも、デベロッパーモードですよ！
デベロッパーモードで書き換えると、リアルタイムに反映されますから！
で、思った通りのレイアウトなどになったら、
それをCSSに書けばいいのです！
毎回書いてアップロードなんてだるいでしょ！

ということで、デベロッパーモードでの直接エディットを
覚えれば、いろいろ楽になりますよ！！
ファイト！

お礼

回答ありがとうございます！デベロッパーモードに書き換えて確認するんですね！なるほど～！早速試してみます！！頑張ります！！

回答No.1

AsarKingChang

CSSではなく、要素そのものを特定してください。
それに対して、Dispay:Noneで消えますよ。
恐らくテンプレの中に実体があるとは思うので、それを探すのでもOKですが。
実際のものを見ないとなんとも。
ただ、要素そのものに対してのCSSのほうが強いので、
それでいったんは消えますよ。

お礼

お返事ありがとうございます！
すみません、、、HP作成が全くの初心者でして・・・要素そのものの特定とはどこを探したら良いか教えて頂けますか？
それに対してDispay:Noneというのは追加CSSに入力したらよいですか？

補足

色々と皆さまに教えて頂きながら自分自身でも調べたり、いじったりしているうちに、固定ページ編集でwpbakery page builderの下の方に
ND options pageという項目に下記、

Title

□　Check if you want to hide the title page.

Margin Top / Bottom

□　Check if you want to remove the automatic page margin on top and bottom of the page.

という項目を見つけ、✔を入れたところ、余白もHOMEテキストも消すことが出来ました！！

皆さまから教えて頂いた内容とても勉強になり今後の糧になりました。
HPの作成頑張ります！！！