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

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

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

SEO(Search Engine Optimization)は、検索エンジンでウェブページがランキング上位に上がるように工夫する様々なテクニックの事です。

WordPress

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

Google

Googleは、アメリカ合衆国に位置する、インターネット関連のサービスや製品を提供している企業です。検索エンジンからアプリケーションの提供まで、多岐にわたるサービスを提供しています。

受付中

Googleサーチコンソールでモバイルフレンドリーではないとエラーが出ました

退会済みユーザー

退会済みユーザー

総合スコア0

SEO

SEO(Search Engine Optimization)は、検索エンジンでウェブページがランキング上位に上がるように工夫する様々なテクニックの事です。

WordPress

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

Google

Googleは、アメリカ合衆国に位置する、インターネット関連のサービスや製品を提供している企業です。検索エンジンからアプリケーションの提供まで、多岐にわたるサービスを提供しています。

0回答

-1評価

0クリップ

1487閲覧

投稿2018/10/03 12:15

編集2022/01/12 10:55

Googleサーチコンソールでエラーがでました。内容は
「コンテンツの幅が画面の幅を超えています」というものです。
コンソール内のエラー確認ページでは、スマホだとヘッダー画像がCSSが反映されていない状態ではみ出ていました。
実際公開しているサイト上では問題なく表示されています。また、エラーが出ているページはwordpressで作成した個別記事ページの1記事で、ほかの記事ページにはエラーは出ていません。
同じ条件で制作した他の記事ページにはエラーが出ず、エラーが出たページも実際は問題なく表示されている場合、どの部分を修正すればエラーが消えるのでしょうか。
詳しい方、ご教授ください。

---------------------追記---------------------
@media screen and ( max-width:960px) {
/* 画面サイズが960px以下はここを読み込む */

/================== header ==================/

header h1 img {
width: 180px;
height: auto;
}

header .sns {
padding:0.8rem 0.5rem;
}

header .sns li {
width: 35px;
padding: 0.3rem 0 0 0.5rem;
list-style: none;

}

header {
padding: 1.3rem 1rem ;
}

#pc_nav {
display: none
}

/================== nav ==================/

header nav {
padding:1.5em;
position: absolute;
top:0;
left:0;
display: flex;
}

#nav-drawer {
position: relative;
}

/チェックボックス等は非表示に/
.nav-unshown {
display:none;
}

/アイコンのスペース/
#nav-open {
display: inline-block;
width: 30px;
height: 22px;
vertical-align: middle;
}

/ハンバーガーアイコン/
#nav-open span, #nav-open span:before, #nav-open span:after {
position: absolute;
height: 3px;/線の太さ/
width: 25px;/長さ/
border-radius: 3px;
background: #000;
display: block;
content: '';
cursor: pointer;
}

#nav-open span:before {
bottom: -8px;
}

#nav-open span:after {
bottom: -16px;
}

/閉じる用の薄黒カバー/

#nav-close {
display: none;/はじめは隠しておく/
position: fixed;
z-index: 99;
top: 0;/全体に広がるように/
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .3s ease-in-out;
}

/中身/
#nav-content {
overflow: auto;
position: fixed;
top: 0;
left: 0;
z-index: 9999;/最前面に/
width: 90%;/右側に隙間を作る(閉じるカバーを表示)/
max-width: 330px;/最大幅(調整してください)/
height: 100%;
background: #fff;/背景色/
transition: .3s ease-in-out;/滑らかに表示/
-webkit-transform: translateX(-105%);
transform: translateX(-105%);/左に隠しておく/
}

/チェックが入ったらもろもろ表示/
#nav-input:checked ~ #nav-close {
display: block;/カバーを表示/
opacity: .5;
}

#nav-input:checked ~ #nav-content {
-webkit-transform: translateX(0%);
transform: translateX(0%);/中身を表示(右へスライド)/
box-shadow: 6px 0 25px rgba(0,0,0,.15);
}

header nav .menu {
font-weight: bold;
font-size: 2em;
padding: 1.1em;
}

header nav li {
padding: 1em;
font-size: 1.3rem;
}

header nav a {
text-decoration: none;
color:#000;
font-weight: bold;
}

header nav .sub { display: flex; justify-content: space-between; padding: 2rem; } header nav .sub li { font-size: 0.8rem; } /*ラベル*/

.accbox label {
display: block;
cursor :pointer;
transition: all 0.5s;
}

/チェックは隠す/
.accbox input {
display: none;
}

/中身を非表示にしておく/
.accbox .accshow {
height: 0;
padding: 0;
overflow: hidden;
opacity: 0;
transition: 0.8s;
}

.accbox .accshow p {
padding:0.4rem;
}

.accbox .accshow a {
font-size:0.9rem;
font-weight:normal;
font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
}

/クリックで中身表示/
.cssacc:checked + .accshow {
height: auto;
padding: 5px;
opacity: 1;
}

/================== wrapper ==================/

/================== banner ==================/

.banner img { width: 100%; }

/================== footer ==================/

footer .sitemap li {
display: none;
}

footer .sitemap {
display: flex;
flex-wrap: wrap;
padding-top: 1rem;
}

footer .sitemap_menu {
width: 50%;
text-align: center;
padding: 0.8rem 0;
}

footer .sitemap_menu a {
color:#777676;
text-decoration:none;
}

footer .map {
width: 100%;
padding: 1rem 2rem ;
}

footer .map p {
display: none;
}

footer iframe { height: 250px; } footer .sitemap2 li { list-style: none; font-size: 0.7rem; } footer .sitemap2 li a { text-decoration: none; } footer .sitemap2_wrap { padding: 3rem 2rem; } footer .shop_deta { text-align: center; padding-bottom: 2rem; } footer .shop_deta li { padding-bottom: 0.5rem; } footer .shop_deta img { margin-bottom: 1rem; } footer .copy { text-align: center; } footer .copy ul { text-align: center; } footer .copy li { display: inline-block; }

.single .navigation {
margin-top: 4rem;
line-height: 1.6rem;
}

.description .post img { width: 100%; height: auto; } .single .entry-content img { width: 100%; height: auto; } .single h1.entry-title { text-align: center; padding:3rem 0 0.5rem 0; font-size: 5vmin; line-height:1.6rem; } .single .entry-meta { text-align: center; }

.home .entry-content {
display:none;
}

.sp_main img {
height:100vh;
}

#main_img { display: none; }

.news_area {
padding: 2rem 0 3rem 0;
}

.news_wrap {
margin: 0 auto;
padding: 0 2rem;
}

.test {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 100px;
}

.easy {
font-size: 6vw;
white-space: nowrap;
}

.easy_text { font-size: 0.8rem; line-height: 1.6rem; width: 75%; margin: 0 auto; } .order { padding: 2rem 1rem; } .order img { width: 80%; } .order .easy { display: none; } .inner { width: 200px; } .tel_pc { display: none; } .contact_area .tel a { text-decoration: none; color: #000; } .news_area .date { padding-right:0.5rem; } .metaslider .flexslider { margin-bottom: 0 !important; } .title { line-height:1.5rem; } .toriatukai { display: none!important; } .sp_toriatukai { padding:0 2rem 3rem 2rem; } .sp_toriatukai img { width: 100%; } .toriatukai_img { background-color:#e2e3e3; } .toriatukai_text { background-color:#e2e3e3; padding:2rem; color:#908f8f; font-size:0.8rem; text-align:center; line-height:1.3rem; } .toriatukai_text .more { margin-top:1rem; display:block; background-color:#908f8f; padding: 0.7rem 1.5rem; color: #FFF; } .toriatukai_text img { margin-bottom:0.8rem; } .toriatukai .inner .more a { text-decoration:none; color:#FFF;

}
}

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

CHERRY

2018/10/03 23:58

問題のある HTMLも CSSもわからない状態では回答はつかないと思います。問題のあるHTMLやCSSを質問内に記載してください。
yoshinavi

2018/10/04 00:05

キャッシュクリア後に再送信と再チェックしてみてはどうですか?
退会済みユーザー

退会済みユーザー

2018/10/04 00:34

yoshinaviさん、ありがとうございます。やってみます。
退会済みユーザー

退会済みユーザー

2018/10/12 01:56

CHERRYさん、お返事が遅くなり申し訳ございません。エラーが出ているページはhttps://XXXXX.com/でトップページです。エラー箇所の絞り込みすらできていないので、htmlとCSSを全て記載すると膨大な量になってしまうのですが、viewportは<meta name="viewport" content="width=device-width, user-scalable=1">と記載しています。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

SEO

SEO(Search Engine Optimization)は、検索エンジンでウェブページがランキング上位に上がるように工夫する様々なテクニックの事です。

WordPress

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

Google

Googleは、アメリカ合衆国に位置する、インターネット関連のサービスや製品を提供している企業です。検索エンジンからアプリケーションの提供まで、多岐にわたるサービスを提供しています。