質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

5359閲覧

【テーマAnima】ヘッダー下の余白をなくしたい【レスポンシブデザインについて】

ayaple

総合スコア13

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/01/21 14:02

前提・実現したいこと

ワードプレス、テーマ「Anima」を使用し、ウェブサイトを作成しています。
表示画面が小さくなった場合やiPhoneから見た場合にレイアウトが崩れてしまいます。

発生している問題・エラーメッセージ

表示画面が小さくなった場合やiPhoneから見た場合に、ヘッダー下(ヘッダーとヘッダー画像の間。添付画像の◯印の部分)に余白ができてしまいます。
この余白をなくすには、CSSをどのように修正(もしくは追加)すればよいでしょうか。
ヘッダー画像のサイズは、テーマ内で推奨されている1920×420ピクセルです。
イメージ説明

該当のソースコード

ヘッダー部分のCSSです。

.masthead::after {
display: table;
clear: both;
content: "";
}

.masthead {
position: relative;
}

.branding {
float: left;
-webkit-transition: .5s height ease-in-out;
transition: .5s height ease-in-out;
}

.branding .identity {
float: left;
}

a#logo {
display: inline;
}

a#logo > img {
max-height: 90%;
vertical-align: middle;
}

.site-text {
position: relative;
top: 50%;
display: inline-block;
float: left;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}

.branding .identity + #site-text {
margin-left: 1em;
clear: none;
}

.site-title {
float: left;
position: relative;
display: inline-block;
line-height: 1.4;
-webkit-transition: .35s ease-out all;
-ms-transition: .35s ease-out all;
transition: .35s ease-out all;
}

.site-title a span {
display: inline-block;
}

.site-title:hover::before {
width: 100%;
}

.site-description {
display: none;
clear: left;
float: left;
margin-top: 3px;
font-size: .9em;
line-height: 1.2;
opacity: .75;
}

.site-header-main {
display: inline-block;
top: 0;
z-index: 101;
width: 100%;
margin: 0 auto;
vertical-align: top;
border-bottom: 1px solid transparent;
-webkit-transition: all .2s linear;
transition: all .2s linear;
}

.anima-over-menu #site-header-main {
position: absolute;
}

/* transparent background rule moved to responsiveness */

.site-header-main-inside {
position: relative;
display: block; /table/
width: 100%;
}

.header-fixed#site-header-main,
.header-fixed#site-header-main #access::after {
box-shadow: 0 0 3px rgba(0,0,0,0.2);
-webkit-transition: .25s background-color ease-in-out;
transition: .25s background-color ease-in-out;
}

.header-image-main,
.header-image-main-inside {
position: relative;
overflow: hidden;
}

.anima-cropped-headerimage div.header-image {
height: 100%;
}

.anima-responsive-headerimage #masthead div.header-image {
display: none;
}

.anima-cropped-headerimage #masthead img.header-image {
display: none;
}

.masthead .header-image {
display: block;
width: inherit;
max-width: 100%;
margin: 0 auto;
background-size: cover;
background-position: 50% 50%;
background-attachment: fixed;
}

.wp-custom-header {
position: relative;
line-height: 0;
}

.wp-custom-header-video-button.wp-custom-header-video-button {
position: absolute;
left: 0;
right: 0;
bottom: 0;
margin: auto;
background: rgba(255,255,255,.1);
opacity: 0;
cursor: pointer;
-webkit-transition: .3s all ease-out;
transition: .3s all ease-out;
}

.wp-custom-header:hover .wp-custom-header-video-button.wp-custom-header-video-button {
opacity: .7;
}

.wp-custom-header video {
object-fit: cover;
max-width: 100%;
}

/* Header widget area */
.header-widget-area {
display: block;
position: absolute;
overflow: hidden;
height: 100%;
top: 10px;
z-index: 99;
}
*/

試したこと

ヘッダー部分CSSの全てのmargin を0にして試してみたのですが、効果がありませんでした。

補足情報(FW/ツールのバージョンなど)

初心者のため、検討違いの質問でしたら申し訳ありません。
よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

丸投げですねぇ... (苦笑)


まずは、Webブラウザで、メニューと画像間の余白の部分 か ヘッダー画像の上で、「右クリック」してメニューを表示して、「検証」や「要素の検証」を実行してみましょう。

その部分の HTML や CSS が確認できると思います。

クリックした部分の CSS や その前後のHTMLタグに設定された CSS を確認すると CSS でマージンが指定されていますよ。

具体的には、画像を囲っている <div> で設定しているようです。

投稿2019/01/22 00:33

編集2019/01/22 00:35
CHERRY

総合スコア25171

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ayaple

2019/01/22 14:19

CHERRY 様 解決いたしました! Webブラウザ上の該当箇所の上で「検証」を実行することで、クラス名をピンポイントで定められることを恥ずかしながら初めて知り、大変助かりました。 丁寧にご回答いただき、本当にありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問