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

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

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

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

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

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

CSS

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

Q&A

解決済

4回答

437閲覧

スマホ版)ページの下にあるはずの記事が上に表示されてしまう

gangarujoma

総合スコア14

WordPress

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

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

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

CSS

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

0グッド

0クリップ

投稿2018/08/26 04:11

編集2018/08/26 04:12

スマホ版)ページの下にあるはずの記事が上に表示されてしまう

昨日、何日も頭を悩ませていた問題を、こちらで解決いただきました。
ありがとうございます。早速新たな質問ですみません。

カスタム投稿タイプでカテゴリ分けした記事を、1列につき3記事、リスト表示させています。

▼該当URL
WORKS部分
http://www.yamanoco.com/
ページ全体
http://www.yamanoco.com/design/
http://www.yamanoco.com/bookbinding/

スマホ版のみ、いつもではないのですが、気まぐれに
下にあるはずの記事やボタン、ページャーが上に上がって表示されてしまいます。
スクロールすると元の正常な位置に戻ります。

見る分にはまあ問題ないのですが、
気になってしまっておりまして、出来れば直したいと思っております。

どのようにしたら直すことができますでしょうか。


◼️確認デバイス
iPhone SE
・safari
・chrome

◼️Wordpressテンプレート
minar
http://wp.regaltheme.com/minar/

イメージ説明

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

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

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

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

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

guest

回答4

0

こういうおかしなタグがあったり、開始タグと終了タグの数があっていない(未検証)からでは?

HTML

1</div"></div"></div"></section">

Firefoxの「ページのソースを表示」で構文エラー(閉じタグが赤く表示されたりする)が見れるので、「エラーが有るか無いか」を確認するのにお勧めです。ちなみにエラーの表示位置は必ずしも問題の箇所ではないので、その近辺のタグの対応を確認する必要があります。

【FireFoxでソースチェック HTML全般| システム開発ブログ(システム開発のアイロベックス|東京都中央区の業務システム開発会社)】
https://www.ilovex.co.jp/blog/system/html/firefox-1.html

投稿2018/08/26 04:29

kei344

総合スコア69364

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

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

gangarujoma

2018/08/26 05:30 編集

昨日に引き続きご確認ありがとうございます。 Firefoxはしばらく離れてみておりませんでしたが、エラーの有無がわかりやすくできているのですね。 今後も使えそうです。ありがとうございます。 タグですが、ほんとですね。おかしなタグですね。早速削除しました。 ありがとうございます。 ただ削除したところ崩れてしまいました・・。 これはphpの記述方法がおかしいということですよね。 トップページは固定ページで作られていて、 下記がトップページの「works」の部分に入れている構文なのですが、 sectionをそんなに呼び出したつもりはなかったのですが、 呼び出している設定になっているのでしょうか・・。 phpは特に色々手探り状態でして、す・すみません。 ▼php =========== function new_workslist() { global $post; $newlist = get_posts( array( 'post_type' => array('design','bookbinding'), 'posts_per_page' => 3 )); echo '<section class="portfolio-area portfolio-six light-bg clearfix Space">'; echo '<div class="row">'; echo '<div class="col-xs-12">'; echo '<div class="masonry-grid portfolio-grid">'; foreach( $newlist as $post) { setup_postdata( $post ); ?> <div class="grid-item percent-33" > <?php if(has_post_thumbnail()): ?> <div class="blog-img single-portfolio overlays light-1"> <a href="<?php echo esc_url( get_the_permalink()); ?>" class="light"> <?php the_post_thumbnail('minar_blog_img', array('class' => 'attachment-post-thumbnail size-post-thumbnail wp-post-image')); ?> </a> </div> <?php endif; ?> <div class="project-title pl-30 ptb-35"> <a href="<?php echo esc_url( get_the_permalink()); ?>"><h4 class="font-20 we-medium uppercase mb-5"><?php the_title(); ?></h4></a> <p class="font-12 uppercase we-regular l-height-1"><?php echo esc_html(get_post_type_object(get_post_type())->label); ?></p> </div> </div> <?php echo '</div>'; echo '</div>'; echo '</div>'; echo '</section>'; } wp_reset_postdata(); } add_shortcode( 'newworkslist', 'new_workslist' ); ===========
gangarujoma

2018/08/26 06:10

同様にエラーが出ている別ページをFirefoxで調べてみたところ、 こちらは構文エラーは出ていないようでした。 構文エラーとはまた別のところに問題があるのでしょうか。
kei344

2018/08/26 07:29

まずエラーを直してから崩れについては考えたほうが良いです。 たとえば echo '</section>';がforeachの中にありますが、echo '<section class="portfolio-area portfolio-six light-bg clearfix Space">'; はforeachの外にあります。どのタグの閉じタグかを細かく見ながら修正してください。
gangarujoma

2018/08/26 10:06

ありがとうございます!なんとかエラーを直せたようです!
gangarujoma

2018/08/26 10:09

まだエラーは出るようです。心なしか頻度が減ったような・・。
kei344

2018/08/26 11:56

ブラウザやサーバ側にはキャッシュ機構があるため、反映が遅れることがあります。WordPressにもキャッシュ系プラグインがいくつもあり、導入していれば影響している可能性もあります。 【【みんなの知識 ちょっと便利帳】Webページを最新の状態で見る - ブラウザーのフルリロード、スーパーリロード方法】 http://www.benricho.org/Tips/page_reload/ 【Chromeブラウザでスーパーリロードする方法 #Pistatium】 http://kimihiro-n.appspot.com/show/86002
gangarujoma

2018/08/26 12:05

スーパーリロードなんてあるのですね。 スマホはないのですね。一応スマホで「履歴とWebサイトデータを消去」を選択してキャッシュをクリアして確認してみたのですがまだでるようです。
guest

0

いまざっと見ていたら気付いたのですが,画面幅によっては,ボタンの文字がはみ出してしまうようです
このような,はみ出すと困る要素にはmin-width(幅の最小値)をかけておくと良いです
イメージ説明

投稿2018/08/26 04:48

liveasnotes

総合スコア1284

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

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

liveasnotes

2018/08/26 05:01

Re:kei344さんの指摘  ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ そういえば,このサイトってwysiwig(What You See Is What You Get)系のツールで作ってるんでしょうか?それとも,コードを自分で編集しているのでしょうか? もし,wisywigだとしたら,文法エラーを直すにはテンプレートの方のソースコードをいじらないといけないかもしれないですし,そうでなければ,これから書き方を気を付ければ良いだけなのですが...
kei344

2018/08/26 05:09

To: liveAsNotesさん このコメントは私宛でしょうか? ソース内にある情報から、WordPressの自作テンプレートで、その部分での構文エラーだと思いますよ。
gangarujoma

2018/08/26 05:44

Re:liveAsNotesさま ご確認とアドバイスありがとうございます。崩れているのをなんとかしたあとに修正したいと思います。 ちなみにこのサイトは海外のテンプレートを元にいじっています。
gangarujoma

2018/08/26 11:31

崩れているレイアウトが直りましたので、ボタン部分も修正いたしました。 アドバイスありがとうございます。
liveasnotes

2018/08/26 15:00

phpの方に問題があったようですね,PHPの方は詳しくないので横から様子を見させていただきます(笑
guest

0

自己解決

8/26に記載したPHPの構文はトップページで表記させていたものなのですが、
それとは別に下記のページではフィルタリングでカテゴリを一覧表記させているPHPの構文(下記)があったのですが、
http://www.yamanoco.com/design/
http://www.yamanoco.com/bookbinding/

php

1<ul class="clearfix mb-40"> 2<li data-filter="*" class="active">all</li> 3<?php 4$parent_categories=get_terms('category_bookbinding'); 5foreach($parent_categories as $parent_category) { 6echo '<li data-filter=".'. $parent_category-> slug .'">'; 7echo $parent_category->name; 8echo '</li>'; 9?> 10</ul>

この中の

echo '<li data-filter=".'. $parent_category-> slug .'">';

の'.(ドット)'を',(カンマ)'に変えてみたところ、
それまでHTMLの出力が

html

1<li data-filter=".logotype" class>logo</li>

と無駄なclassが入ってしまったものも、

html

1<li data-filter=".logotype">logo</li>

上記のように無駄なclassが取れて出力されましたし、なんとなく頻度も減ったような気もしますし、
調べてみると、カンマを推奨しているような文面もありましたので、
https://qiita.com/trashtoy/items/5c76f3cd8cb636ac3c72

ひとまず一旦これで様子をみるようにしてみます。

お忙しい中お時間を割いていただき、ありがとうございます。
また何かわからない点がありましたら、質問させてください。

投稿2018/08/31 01:37

gangarujoma

総合スコア14

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

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

0

8/26に記載したPHPの構文はトップページで表記させていたものなのですが、
それとは別に下記のページではフィルタリングでカテゴリを一覧表記させているPHPの構文(下記)があったのですが、
http://www.yamanoco.com/design/
http://www.yamanoco.com/bookbinding/

php

1<ul class="clearfix mb-40"> 2<li data-filter="*" class="active">all</li> 3<?php 4$parent_categories=get_terms('category_bookbinding'); 5foreach($parent_categories as $parent_category) { 6echo '<li data-filter=".'. $parent_category-> slug .'">'; 7echo $parent_category->name; 8echo '</li>'; 9?> 10</ul>

この中の

echo '<li data-filter=".'. $parent_category-> slug .'">';

の'.(ドット)'を',(カンマ)'に変えてみたところ、
それまでHTMLの出力が

html

1<li data-filter=".logotype" class>logo</li>

と無駄なclassが入ってしまったものも、

html

1<li data-filter=".logotype">logo</li>

上記のように無駄なclassが取れて出力されましたし、なんとなく頻度も減ったような気もしますし、
調べてみると、カンマを推奨しているような文面もありましたので、
https://qiita.com/trashtoy/items/5c76f3cd8cb636ac3c72

ひとまず一旦これで様子をみるようにしてみます。

お忙しい中お時間を割いていただき、ありがとうございます。
また何かわからない点がありましたら、質問させてください。

投稿2018/08/31 01:39

gangarujoma

総合スコア14

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問