こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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

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

添付のヘッダー下にある余白と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の調整ではないのでしょうか・・・?

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

投稿日時 - 2018-08-23 08:08:22

QNo.9530055

すぐに回答ほしいです

質問者が選んだベストアンサー

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

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

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

投稿日時 - 2018-08-23 12:33:30

補足

ただ・・色々と皆さまに教えて頂きながら自分自身でも調べたり、いじったりしているうちに、固定ページ編集で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の作成頑張ります!!!

投稿日時 - 2018-08-23 14:22:52

お礼

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

CSS:.nd_options_height_50 {
height: 50px;
}

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

投稿日時 - 2018-08-23 14:13:13

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(3)

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

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

投稿日時 - 2018-08-23 16:34:37

お礼

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

投稿日時 - 2018-08-25 02:03:57

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

投稿日時 - 2018-08-23 09:05:41

補足

色々と皆さまに教えて頂きながら自分自身でも調べたり、いじったりしているうちに、固定ページ編集で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の作成頑張ります!!!

投稿日時 - 2018-08-23 14:23:47

お礼

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

投稿日時 - 2018-08-23 12:08:25