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

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

ただいまの
回答率

90.38%

  • WordPress

    9413questions

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

  • CSS

    8118questions

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

  • HTML5

    5476questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

初心者です。ワードプレスのヘッダーの高さを変更したいです。

受付中

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 304

pakoyama

score 2

前提・実現したいこと

ヘッダーの高さを調整して、ロゴを上下の中央に配置したいです。

ワードプレステンプレートを使用しています。
テンプレートは、【twentyseventeen】です。

トップページのヘッダー部分の高さを調整したいのですが、
WEBサイトなどで解決方法を確認してためしたところ、
記載されている方法では高さが変わりませんでした(>_<)

また、高さも変わらず変化もありませんでした。

参考にしているサイトは下記になります。
https://058.jp/twentyseventeen/archives/288

よろしくお願いいたします。

クロームで確認すると下記のコードが確認できますが、
実際にコードがある箇所が見当たりません。

イメージ説明

▼上記のコードがかかっている場所
イメージ説明

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

エラーメッセージは特にありません。

該当のソースコード

<?php
/**
 * Displays content for front page
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 * @version 1.0
 */
?>
<img src="http://wp-content/uploads/2019/01/test02-min-min.jpg" width="100%" height="40%">
<article id="post-<?php the_ID(); ?>" <?php post_class( 'twentyseventeen-panel ' ); ?> >

    <?php if ( has_post_thumbnail() ) :
        $thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'twentyseventeen-featured-image' );

        // Calculate aspect ratio: h / w * 100%.
        $ratio = $thumbnail[2] / $thumbnail[1] * 100;
        ?>

        <div class="panel-image">
            <div class="panel-image-prop" style="padding-top: <?php echo esc_attr( $ratio ); ?>%"></div>
        </div><!-- .panel-image -->

    <?php endif; ?>
    <div class="panel-content">
        <div class="wrap">
            <header class="entry-header">
                <?php the_title( '<h2 class="entry-title">', '</h2>' ); ?>
                <?php twentyseventeen_edit_link( get_the_ID() ); ?>

<a href="wp-content/uploads/2019/01/pulpFiction1_002.jpg" class="ex" title="">
<img src="wp-content/uploads/2019/01/pulpFiction1_002.jpg" width="300" alt="">
</a>


                <h3 style="text-align: center;">テストタイトル</h3>
                <hr style="margin:50px 0px;">
.twentyseventeen-front-page.has-header-image .custom-header-media,
.twentyseventeen-front-page.has-header-video .custom-header-media,
.home.blog.has-header-image .custom-header-media,
.home.blog.has-header-video .custom-header-media {
    height: 75vh;
    }

@media screen and (min-width: 48em) {
  .admin-bar.twentyseventeen-front-page.has-header-image .custom-header-media,
  .admin-bar.twentyseventeen-front-page.has-header-video .custom-header-media,
  .admin-bar.home.blog.has-header-image .custom-header-media,
  .admin-bar.home.blog.has-header-video .custom-header-media {
    height: calc(75vh - 32px);
  }

  .twentyseventeen-front-page.has-header-image .custom-header-media,
  .twentyseventeen-front-page.has-header-video .custom-header-media,
  .home.blog.has-header-image .custom-header-media,
  .home.blog.has-header-video .custom-header-media {
    height: 75vh;
  }
}

試したこと

クロームで、どこのCSSが効いているのかを確認したところ、下記のコードが出てきたため
margin-bottomのチェックを外すと、高さが変わるのですがどこでいじれるのかわからず困っております。

element.style {
    margin-bottom: 72px;
}

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

テンプレートは、【twentyseventeen】

ここにより詳細な情報を記載してください。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+2

WordPress環境がないので考え方とヒント回答のみとなってしまうのですが、
element.styleはインラインでCSSが書かれている場合にそう表示されます。
つまり<div style="margin-bottom: 72px;">のように直に書かれている場合ですね。
確か、JavaScriptから挿入された場合も同様の表示になったはずです。
つまり、CSSファイルではなく、直にstyleが書かれているか、もしくはJavaScriptから指定されているかのどちらかだと思われます。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/01/10 16:18

    72pxの件はどこへいったのでしょうか・・?

    キャンセル

  • 2019/01/10 16:28

    確認したところ、最初に質問した<div style="margin-bottom: 72px;">というのが見つからず、どこにかかっているのかを確認したところ、

    html上に記載してあるclassのコードで
    class="site-branding"があり、選択するとクロームの検証画面に

    element.style {
    margin-bottom: 121px;
    }

    が表示されています。
    かかっている要素がどれかとのことだったのですが、要素というのはsite-brandingのことではないのでしょうか。

    キャンセル

  • 2019/01/11 04:57

    ブラウザ幅や他の要素との関係で可変的になってるようですね。となると、単にそこだけいじれば良いと言うわけではなく、他の要素との連動もあるので根は深そうです。
    Chromeでの検証はあくまで擬似的なものなので100%そのままでいけるかというと、そうでもないこともあります。
    element.styleは特に、ずばりその要素だけかかっているわけではなく、あくまで同じstyleがかかっている要素のひとつである可能性が高いです。
    もっと上層の親要素から別cssを設けて当てた方が確実と思います

    キャンセル

+1

おそらく下記のJSで追加されているかと。

/wp-content/themes/twentyseventeen/assets/js/global.js

        $branding = $customHeader.find( '.site-branding' ),
    // Set margins of branding in header.
    function adjustHeaderHeight() {
        if ( 'none' === $menuToggle.css( 'display' ) ) {

            // The margin should be applied to different elements on front-page or home vs interior pages.
            if ( isFrontPage ) {
                $branding.css( 'margin-bottom', navigationOuterHeight );
            } else {
                $customHeader.css( 'margin-bottom', navigationOuterHeight );
            }

        } else {
            $customHeader.css( 'margin-bottom', '0' );
            $branding.css( 'margin-bottom', '0' );
        }
    }

こちらを削除するか、もしくは嫌でなければ css で !important を指定するとstyle直書きされていても上書きできます。

すみません。。高さですが、下記CSSで
ブラウザ表示エリアの(約?)75%の高さで指定してあるようです。

/wp-content/themes/twentyseventeen/style.css

.has-header-image.twentyseventeen-front-page .custom-header,
.has-header-video.twentyseventeen-front-page .custom-header,
.has-header-image.home.blog .custom-header,
.has-header-video.home.blog .custom-header {
    display: table;
    height: 300px;
    height: 75vh;
    width: 100%;
}

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/01/10 20:27

    noRiwo様
    ご回答くださり、ありがとうございます。
    ファイルを開けて、
    上記、そのまま全てを削除してみたのですが高さがかわりませんでした。

    他のコードをいじっているから、かわらないという可能性がありますでしょうか。

    キャンセル

  • 2019/01/10 21:24 編集

    よく読んでおりませんでした。。。すみません。。
    追記しました。。

    キャンセル

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

  • ただいまの回答率 90.38%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • WordPress

    9413questions

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

  • CSS

    8118questions

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

  • HTML5

    5476questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。