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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

WordPress

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

HTML

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

CSS

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

Q&A

解決済

1回答

1634閲覧

Wordpressサイトのトップページ記事一覧で一部の記事がIphoneで表示されない

hirororo

総合スコア72

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

WordPress

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2016/06/15 15:40

編集2016/06/15 16:08

はじめまして!

ワードプレスでサイト運営をしております。

サイトのトップページでは投稿記事の一覧が表示されるのですが
一部の記事がIphoneで表示されません。

例えば、パソコンでは10記事すべて表示されますがIPHONEだと4つ目と5つ目の記事が表示されません。
全部で8記事表示されます。

HTML、CSSの問題でしょうか?

トップページの記事一覧のキャプチャを撮りましたのでアップさせていただきます。

■パソコンでトップページを表示

パソコンで表示

■Iphoneでトップページを表示(4つ目と5つ目の記事が表示されない)

Iphoneで表示

■トップページの一部ソース

lang

1 2 3 4<div id="main"> 5 <div class="main-inner"> 6 7<div id="popular_post_content" class="front-loop"> 8 9<h2><i class="fa fa-clock-o"></i> 最近の投稿</h2> 10<div class="wrap"> 11<div class="front-loop-cont"> 12 13 14<!-- 1記事目 --> 15<article id="post-190" class="popular_post_box recent-1 省略> 16 </article> 17 18 19<!-- 2記事目 --> 20<article id="post-139" class="popular_post_box recent-2 省略> 21 </article> 22 23 24<!-- 3記事目 --> 25<article id="post-161" class="popular_post_box recent-3 省略> 26 27 </article> 28 29 30<!-- 4記事目 --> 31 <article id="post-349" class="popular_post_box recent-4 post-349 post type-post status-publish format-standard has-post-thumbnail hentry category-3lht"> 32 <a href="http://www.tralabo.com/hp/2016/04/04/apppp/" class="wrap-a"> <div class="post-thumbnail"> 33 <img width="280" height="158" src="http://www.tralabo.com/hp/wp-content/uploads/2016/04/4-300x169.png" class="attachment-300x158 size-300x158 wp-post-image" alt="4" srcset="http://www.tralabo.com/hp/wp-content/uploads/2016/04/4-300x169.png 300w, http://www.tralabo.com/hp/wp-content/uploads/2016/04/4-768x432.png 768w, http://www.tralabo.com/hp/wp-content/uploads/2016/04/4-304x171.png 304w, http://www.tralabo.com/hp/wp-content/uploads/2016/04/4-281x158.png 281w, http://www.tralabo.com/hp/wp-content/uploads/2016/04/4.png 960w" sizes="(max-width: 280px) 100vw, 280px" /> </div> 34 <p class="p_category">《〜初級編〜》</p> 35 <h3>4 アプリの使い方</h3> 36 <p class="p_date"><span class="date-y">2016</span><span class="date-mj">04/4</span></p></a> 37 </article> 38 39 40<!-- 5記事目 --> 41<article id="post-278" class="popular_post_box recent-5 post-278 post type-post status-publish format-standard has-post-thumbnail hentry category-3lht"> 42 <a href="http://www.tralabo.com/hp/2016/04/05/unyou/" class="wrap-a"> <div class="post-thumbnail"> 43 <img width="280" height="158" src="http://www.tralabo.com/hp/wp-content/uploads/2016/04/5-300x169.png" class="attachment-300x158 size-300x158 wp-post-image" alt="5" srcset="http://www.tralabo.com/hp/wp-content/uploads/2016/04/5-300x169.png 300w, http://www.tralabo.com/hp/wp-content/uploads/2016/04/5-768x432.png 768w, http://www.tralabo.com/hp/wp-content/uploads/2016/04/5-304x171.png 304w, http://www.tralabo.com/hp/wp-content/uploads/2016/04/5-281x158.png 281w, http://www.tralabo.com/hp/wp-content/uploads/2016/04/5.png 960w" sizes="(max-width: 280px) 100vw, 280px" /> </div> 44 <p class="p_category">《〜初級編〜》</p> 45 <h3>5 運用シミュレーション</h3> 46 <p class="p_date"><span class="date-y">2016</span><span class="date-mj">04/5</span></p></a> 47 </article> 48

■変更前CSSファイルの一部

lang

1 2body.home .front-loop .front-loop-cont { 3 padding: 40px 0; 4 overflow: hidden; 5}

■変更後CSSファイルの一部

lang

1body.home .front-loop .front-loop-cont { 2 padding: 20px 0; 3 overflow: hidden; 4 clear: left; 5}

■試してみたこと1
トップページのソースを開いてみて、IPHONEで見ると表示されなく記事のを探し出して、
CSSでその幅の変更や、回り込みの設定を解除するなど試してみたですが、変化はありませんでした。

■試してみたこと2
記事に問題があると思い、4つ目と5つ目の記事を削除したところ、
6つ目と7つ目の記事がIphoneで表示されなくなったので、記事の問題ではないと思っています。

解決の糸口が見つからず行き詰っております。アドバイス頂けると幸いです。

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

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

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

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

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

kei344

2016/06/15 15:43

出力されたHTML(ブラウザで「ページのソースを表示」)およびCSSを質問文に追記されたほうが回答が望めると思います。
hirororo

2016/06/15 16:05

お世話になっております。 ご指摘ありがとうございます! HTMLとCSSを質問文に追記させていただきました。
guest

回答1

0

ベストアンサー

メディアクエリで指定している箇所が原因です。

CSS

1@media screen and (max-width: 991px) 2body.home .front-loop .popular_post_box.rank-4, 3body.home .front-loop .popular_post_box.rank-5, 4body.home .front-loop .popular_post_box.recent-4, /*ここ */ 5body.home .front-loop .popular_post_box.recent-5 /*ここ */ { 6 display: none; 7}

投稿2016/06/15 16:10

kei344

総合スコア69364

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

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

hirororo

2016/06/15 16:23

見事に一発で表示されました! 的確なアドバイスありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問