この記事には広告を含む場合があります。
記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。
ビジネスサイトのトップページのヘッダー直下のh1のタイトルを消す(非表示にする)方法
content.php を以下のように挿入&編集します。
【 変更前 】
<header class="entry-header"> <?php the_post_thumbnail(); ?> <?php if ( is_single() ) : ?> <h1 class="entry-title"><?php the_title(); ?></h1> <?php else : ?> <h1 class="entry-title"> <a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a> </h1> <?php endif; // is_single() ?>
【 変更後 】
<header class="entry-header"> <?php the_post_thumbnail(); ?> <?php if ( is_front_page() ) : ?> <?php elseif ( is_single() ) : ?> <h1 class="entry-title"><?php the_title(); ?></h1> <?php else : ?> <h1 class="entry-title"> <a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a> </h1> <?php endif; // is_single() ?>
以上で表示はされなくなります。
ヘッダー部の空白が広くて気になる方はこちらを変更!
スタイルシート(style.css)
【 メニュー直下の空白を縮小 】 /* Page structure */ 531 532 行あたり .site-content { margin: 6px 0 0;/*24px 0 0;*/ margin: 0.4285714285rem 0 0;/*1.714285714rem 0 0*/ } /* =Main content and comment content 685 686 行あたり .entry-header { margin-bottom: 6px;/*24px*/ margin-bottom: 0.4285714285rem;/*1.714285714rem*/ } 【 ヘッダー上下部の空白を縮小 】 /* Header */ 541 542 行あたり .site-header { padding: 6px 0;/*zono 24px 0*/ padding: 0.4285714285rem 0;/*zono 1.714285714rem 0*/ } 【 ヘッダー上部(画像上)の空白を縮小 】 573 574 .header-image { margin-top: 6px;/*zono 24px*/ margin-top: 0.4285714285rem;/*zono 1.714285714rem*/ } /* Navigation Menu */ 579 580 .main-navigation { margin-top: 6px;/*zono 24px*/ margin-top: 0.4285714285rem;/*zono 1.714285714rem*/ text-align: center; }