html - HTML 本文のサイズのカスタマイズ

Question

ヘッダー (空白) とページの上部の間の灰色のギャップを削除する方法で、Wordpress テーマの「態度」の本文をカスタマイズしたいと考えています。つまり、この灰色のギャップと、フッター近くのボディの端とサイトの端の間の灰色のギャップを正確に削除したいと考えています。

ここに態度のライブデモがあります: http://themehorse.com/preview/attitude/

ご不明な点がございましたら、お気軽にお問い合わせください。

よろしくお願いします

score 0 · Accepted Answer

Chrome 開発ツールを使用して簡単に調べると、ヘッダー要素が原因のようです。IDセレクター30pxを使用して上部マージンを適用しているようです。branding

#branding {
   margin-top: 30px;
}

これは、style.css の 549 行目で変更できます。

さて、講義ですが…

そうではありませんが、将来この種の問題を解決するのに役立ついくつかのことをお見せしたいと思います.利用可能なツールについてもっと知りたいと思うことは決してありません.

ポップアップする chrome dev tools パネルの左上隅にあるボックス記号にマウスポインターがあります。クリックして有効にし、ページ上でマウスを動かすと、要素がさまざまな色で強調表示されます。

ここでは、上部の灰色のバーがオレンジ色で強調表示され、下の大きなセクションが青色で強調表示されていることがわかります。

上記のように要素が強調表示されている間にマウスの左ボタンをクリックすると、検査ツールの [要素] タブの要素にジャンプします。選択した要素はヘッダーで、ID はbranding

右側のスタイルインスペクターをすばやくスクロールすると、ブランディング用の ID セレクターと、上部マージンを 30px に設定する宣言が表示されます。インスペクターは親切にも、ルールがソースコードのどこから来たのか教えてくれます。style.css, line:549.

[ソース] タブに切り替えて、インスペクターで style.css を開く (またはテキストエディターでソースコードを開く) と、約束どおり 549 行目にブランド ID セレクターが見つかります。

ウェブページを探索する方法の詳細については、Google chrome または mozilla (どちらのブラウザを最もよく使用するか) の開発ツールガイドを読むことをお勧めします。

2 に答える 2