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

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

ただいまの
回答率

90.86%

  • HTML

    8041questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • WordPress

    6404questions

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

  • CSS

    5139questions

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

Wordpressのtwentyseventeenでh2タグにおかしな隙間ができる

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 225
退会済みユーザー

退会済みユーザー

Wordpressで新着情報の一覧ページを作りました。

<h2 class="sub_new_title_h2">新着情報一覧</h2>


にCSSで背景色を付けると、右側に少し隙間ができてしまいます。
スマホで確認すると隙間がわかります。(Chrome、Safariで確認)
PCのブラウザでは隙間もなく表示されます。
隙間をなくすにはどうしたらいいでしょうか?

ためした事は、h2のwidthを100%にしてみたのですが、隙間はなくなりませんでした。

「画像」
(一部個人情報部分モザイク)
イメージ説明

[html]

<header>
  <div class="title_img"><a href="index.html"></a></div>
  <p class="header_p1">XXXXXXXXX</p>
</header>
<nav>
<input id="menu-cb" type="checkbox" value="off">
<label id="menu-icon" for="menu-cb"></label>
<label id="menu-background" for="menu-cb"></label>
<div id="ham-menu">
    <ul>
    <li class="menu_01"><a href="index.html">トップページ</a></li>
    <li class="menu_02"><a href="test1.html">TEST1</a></li>
    <li class="menu_03"><a href="test2.html">TEST2</a> </li>
    </ul>
  </div>
</nav>
  <!-- min_box -->
  <section id="min_box"> 
    <!-- new_box -->
    <article class="new_box">
<h2 class="sub_new_title_h2">新着情報一覧</h2>


<article id="post-69" class="post-69 post type-post status-publish format-image hentry category-1 post_format-post-format-image">
        <header class="entry-header">
        <div class="entry-meta"><span class="screen-reader-text">投稿日:</span> <a href="http://xxxx-xxxx.com/news/2017/10/07/xxxxxx/" rel="bookmark"><time class="entry-date published" datetime="2017-10-07T17:37:38+09:00">2017年10月7日</time><time class="updated" datetime="2017-10-07T17:48:39+09:00">2017年10月7日</time></a><span class="edit-link"><a class="post-edit-link" href="http://xxxx-xxxxx.com/news/wp-admin/post.php?post=69&#038;action=edit"><span class="screen-reader-text">"xxxxxxxx" を</span>編集</a></span></div><!-- .entry-meta --><h2 class="entry-title"><a href="http://xxxxx-xxxxx.com/news/2017/10/07/xxxxxxx/" rel="bookmark">xxxxxxxx</a></h2>    </header><!-- .entry-header -->


    <div class="entry-content">

        <p><img class="alignnone size-medium wp-image-75" src="http://xxxxx-xxxx.com/news/wp-content/uploads/2017/10/IMARIC20160805210023_TP_V-300x200.jpg" alt="" width="300" height="200" srcset="http://xxxxx-xxxx.com/news/wp-content/uploads/2017/10/IMARIC20160805210023_TP_V-300x200.jpg 300w, http://xxxxx-xxxx.com/news/wp-content/uploads/2017/10/IMARIC20160805210023_TP_V-768x512.jpg 768w, http://xxxxx-xxxx.com/news/wp-content/uploads/2017/10/IMARIC20160805210023_TP_V-1024x682.jpg 1024w, http://xxxxx-xxxx.com/news/wp-content/uploads/2017/10/IMARIC20160805210023_TP_V.jpg 1600w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<p>&nbsp;</p>
<p>TESTTESTTEST</p>

    </div><!-- .entry-content -->


</article><!-- #post-## -->


    </article>
    <!-- new_box --> 

  </section>
  <!-- min_box --> 

  <!-- footer -->
  <footer>
    <p class="footer_p"><small>Copyright (C) XXXXXXX. all rights reserved.</small></p>
  </footer>
  <!-- footer --> 

[CSS]

* {
    margin:0 auto;
    padding:0;
}

body {
    width:100%;
    color:#333;
}

header {
    width:100%;
    margin-top:20px;
    margin-bottom:20px;
}

.title_img {
    display:block;
      width:80px;
      height:80px;
      background-image:url("/shp/img/icon.png");
      background-repeat:no-repeat;
    text-align:center;
}

.title_img a {
    display:block;
      width:80px;
      height:80px;
}

.header_p1 {
    font-weight:bold;
    padding-top:25px;
    text-align:center;
}

a:link {
    color:#333;
    text-decoration:none
}
a:visited {
    color:#333;
    text-decoration:none
}
a:hover {
    color:#333;
    text-decoration:none
}
a:active {
    color:#333;
    text-decoration:none
}

a:hover {
   opacity: 0.5;
}

ul {
    list-style:none;
    line-height:2.5em;
}

#ham-menu {
    background-color: #fff; /*メニュー背景色*/
    box-sizing: border-box;
    height: 100%;
    padding: 10px 40px; /*メニュー内左右上下余白*/
    position: fixed;
    right: -300px; /*メニュー横幅 width と合わせる*/
    top: 0;
    transition: transform 0.3s linear 0s; /*0.3s はアニメーションにかかる時間*/
    width: 300px; /*メニュー横幅*/
    z-index: 1000;
}

#menu-background {
    background-color: #333; /*黒背景*/
    display: block;
    height: 100%;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    transition: all 0.3s linear 0s; /*0.3s はアニメーションにかかる時間*/
    width: 100%;
    z-index: -1;
}

#menu-icon {
    background-color: #fff; /*アイコン部分背景色*/
    border-radius: 0 0 0 10px; /*左下角丸*/
    color: #333; /*アイコン(フォント)色*/
    cursor: pointer;
    display: block;
    font-size: 50px; /*アイコン(フォント)サイズ*/
    height: 50px; /*アイコン縦高さ*/
    line-height: 50px; /*縦位置中央化*/
    position: fixed;
    right: 0;
    text-align: center;
    top: 0;
    width: 50px; /*アイコン横幅*/
    transition: all 0.3s linear 0s; /*0.3s はアニメーションにかかる時間*/
    z-index: 1000;
}

#menu-cb {
    display: none; /*チェックボックス本体は消しておく*/
}

#menu-cb:checked ~ #ham-menu,
#menu-cb:checked ~ #menu-icon {
    transform: translate(-300px); /*メニュー本体横幅 width と合わせる*/
}

#menu-cb:checked ~ #menu-background {
    opacity: 0.5;
    z-index: 999;
}

img { max-width:100%; height:auto; vertical-align:bottom; }


#min_box {
    width:auto;
}


footer {
    border-top: 1px solid #333333;
    border-bottom: 1px solid #333333;
    padding-top:10px;
    padding-bottom:10px;
}

footer {
    border-top: 1px solid #333333;
    border-bottom: 1px solid #333333;
    padding-top:10px;
    padding-bottom:10px;
    margin-top:20px;
}

footer .footer_p {
    text-align:center;
}


.clearfix {
 *zoom: 1;
}

.clearfix:after {
    content: '';
    display: table;
    clear: both;
}

/* 投稿ナビゲーション非表示 */
.pagination h2.screen-reader-text {
    display: none;
}

/* 編集バー非表示 */
.entry-footer {
    display: none;
}

/* 投稿一覧の本文非表示 */
.entry-content {
    padding-left:20px;
}

.entry-title {
    margin-bottom:20px;
}

/* 個別投稿前のページ・次のページ */
.pn_box {
    text-align:center;
}

/* 投稿一覧前のページ・次のページ */
.pagination {
clear:both;
padding:20px 0;
position:relative;
font-size:11px;
line-height:13px;
margin-left:35px;
}

.pagination span, .pagination a {
display:block;
float:left;
margin: 2px 2px 2px 0;
padding:6px 9px 5px 9px;
text-decoration:none;
width:auto;
color:#fff;
background: #555;
}

.pagination a:hover{
color:#fff;
background: #3279BB;
}

.pagination .current{
padding:6px 9px 5px 9px;
background: #3279BB;
color:#fff;
}
/* 投稿一覧前のページ・次のページ */

#min_box .entry-title {
    margin-top:20px;
}

#min_box .entry-meta {
    width:97%;
    background-color:#82c0fb;
    border-top: 1px dashed #333;
    color:#fff;
    padding:10px 0 10px 20px;
    margin-bottom:20px;
}

.sub_new_title_h2 {
    text-align:center;
    background: #8ebff6;
    color:#fff;
}

.entry-meta a {
    text-decoration: none; 
    color : #fff;
}

.entry-header {
    font-weight:bold;
    width:auto;
}

.entry-title {
    padding-left:20px;
    padding-right:5px;
    font-size:14px;
}

.entry-title:before {
    content:url("/pchp/img/wp/news_point.png");
      text-indent:10px;
    margin-right:10px;
    margin-left:10px;
}

.entry-content {
    margin-left:20px;
}

.pn_box {
    margin-top:20px;
    padding-top:20px;
    border-top: 1px dashed #333;
}

.pn_box p {
    font-weight:bold;
}

.updated {
    display: none;
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

0

padding:10px 0 10px 20px;の20pxではみ出して空白が出来てませんか?
20pxを0にしてwidthを100%にしておけば良いんじゃないかと思います。

#min_box .entry-meta {
    /*width:97%;*/
    width:100%;
    background-color:#82c0fb;
    border-top: 1px dashed #333;
    color:#fff;
    /*padding:10px 0 10px 20px;*/
    padding:10px 0 10px 0;
    margin-bottom:20px;
}

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/10/08 17:57

    ありがとうございます。修正したら解決しました。細かい所も見ていかないといけないですね。

    キャンセル

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

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

関連した質問

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

  • HTML

    8041questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • WordPress

    6404questions

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

  • CSS

    5139questions

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