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

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

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

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

HTML

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

CSS

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

Q&A

解決済

1回答

2146閲覧

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

退会済みユーザー

退会済みユーザー

総合スコア0

WordPress

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2017/10/08 08:09

編集2017/10/08 08:34

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; }

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

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

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

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

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

guest

回答1

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 08:41

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

退会済みユーザー

退会済みユーザー

2017/10/08 08:57

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問