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

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

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

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

PHP

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

Q&A

解決済

1回答

734閲覧

wordpressの個別投稿ページに謎の隙間ができる。

退会済みユーザー

退会済みユーザー

総合スコア0

WordPress

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

PHP

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

0グッド

0クリップ

投稿2018/10/20 20:05

編集2018/10/20 20:44

wordpressの個別投稿ページのテンプレートをデザインしました。

下記がそのコードなのですが「関連記事」のタイトル部分と関連記事の間がものすごく隙間が空いています。

この隙間をうめるにはどうしたらいいでしょうか。

イメージ説明

「コード」

<!-- postBox --> <section id="postBox"> <!-- newPostBox --> <div class="newPostBox cleaefix"> <?php if(have_posts()): while(have_posts()): the_post(); ?> <p class="date"><?php the_author(); ?> <?php echo get_the_date(); ?></p> <h2 class="title"><?php the_title(); ?></h2> <?php the_content(); ?> <?php endwhile; endif; ?> <!-- facebook--> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = 'https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v3.1'; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <!-- shareBox --> <div class="shareBox"> <div class="twBox"><a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false">Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script></div><div class="fb-share-button" data-href="http://aaaaaaa.jp/" data-layout="button_count" data-size="small" data-mobile-iframe="true"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Faaaaaaa.jp%2F&amp;src=sdkpreparse" class="fb-xfbml-parse-ignore">シェア</a></div> </div> <!-- shareBox --> <!-- relationBox --> <div class="relationBox"> <p class="pickTitle">関連記事</p> <?php // カテゴリーが複数設定されている場合は、どれかをランダムに取得 $categories = wp_get_post_categories($post->ID, array('orderby'=>'rand')); //表示したい記事要素を設定 if ($categories) { $args = array( 'category__in' => array($categories[0]), // カテゴリーのIDで記事を取得 'post__not_in' => array($post->ID), // 表示している記事は除外する 'showposts'=>3, // 取得したい記事数 'caller_get_posts'=>1, // 取得した記事を1番目から表示する 'orderby'=> 'rand' // ランダムで取得する ); $my_query = new WP_Query($args); if( $my_query->have_posts() ) { while ($my_query->have_posts()) { $my_query->the_post(); ?> <!-- imgTextBox --> <div class="imgTextBox"> <?php $cat = get_the_category(); $cat_slug = $cat[0]->slug; $cat_name = $cat[0]->name; ?> <p class="textP"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><br><span class="postDate"><?php echo get_the_date( $format, $post ); ?></span><span class="writeName"><?php the_author(); ?></span><span class="catName"><?php echo $cat_name; ?></span></p> <p class="imgP"><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumbnail'); ?></a></p> </div> <!-- imgTextBox --> <?php } wp_reset_query(); } else { ?> <p class="no-related">関連記事がありません。</p> <?php } } ?> </div> <!-- relationBox --> </div> <!-- newPostBox --> <!-- otherPostBox --> <section id="otherPostBox"> <!-- rankPostBox --> <div class="rankPostBox"> <p class="title-s">総合ランキング</p> <?php if (function_exists('wpp_get_mostpopular')) { $arg = array ( 'range' => 'all',//集計する期間(weekly,monthly,all) 'order_by' => 'views',//閲覧数で集計(comments(コメント数で集計),avg(1日の平均で集計)) 'post_type' => 'post',//ポストタイプを指定(post,page,カスタムポスト名) 'title_length' => '35',//表示させるタイトル文字数 'excerpt_length' => '0',//抜粋文字数 'stats_comments' => '0',//コメント数表示(1 or 0) 'limit' => 5, //表示数 'stats_views' => '0',//閲覧数表示(1 or 0) 'thumbnail_width' => '75',//サムネイルの幅 'thumbnail_height' => '75',//サムネイルの高さ 'post_html' => '<div class="postBox"><ul><li>{thumb}</li></ul><p>{title}</p></div>'//表示されるhtmlの設定({thumb}はリンク付きのサムネイル画像,{title}はリンク付きのタイトル,{summary}は抜粋文) ); wpp_get_mostpopular($arg);//リストが出力される。 } ?> <!-- ad1Box --> <div class="ad1Box"> </div> <!-- ad1Box --> <p class="title-w">週間ランキング</p> <?php if (function_exists('wpp_get_mostpopular')) { $arg = array ( 'range' => 'weekly',//集計する期間(weekly,monthly,all) 'order_by' => 'views',//閲覧数で集計(comments(コメント数で集計),avg(1日の平均で集計)) 'post_type' => 'post',//ポストタイプを指定(post,page,カスタムポスト名) 'title_length' => '35',//表示させるタイトル文字数 'excerpt_length' => '0',//抜粋文字数 'stats_comments' => '0',//コメント数表示(1 or 0) 'limit' => 10, //表示数 'stats_views' => '0',//閲覧数表示(1 or 0) 'thumbnail_width' => '75',//サムネイルの幅 'thumbnail_height' => '75',//サムネイルの高さ 'post_html' => '<div class="postBox"><ul><li>{thumb}</li></ul><p>{title}</p></div>'//表示されるhtmlの設定({thumb}はリンク付きのサムネイル画像,{title}はリンク付きのタイトル,{summary}は抜粋文) ); wpp_get_mostpopular($arg);//リストが出力される。 } ?> <!-- ad1Box --> <div class="ad1Box"> </div> <!-- ad1Box --> <p class="title-m">月間ランキング</p> <?php if (function_exists('wpp_get_mostpopular')) { $arg = array ( 'range' => 'monthly',//集計する期間(weekly,monthly,all) 'order_by' => 'views',//閲覧数で集計(comments(コメント数で集計),avg(1日の平均で集計)) 'post_type' => 'post',//ポストタイプを指定(post,page,カスタムポスト名) 'title_length' => '35',//表示させるタイトル文字数 'excerpt_length' => '0',//抜粋文字数 'stats_comments' => '0',//コメント数表示(1 or 0) 'limit' => 10, //表示数 'stats_views' => '0',//閲覧数表示(1 or 0) 'thumbnail_width' => '75',//サムネイルの幅 'thumbnail_height' => '75',//サムネイルの高さ 'post_html' => '<div class="postBox"><ul><li>{thumb}</li></ul><p>{title}</p></div>'//表示されるhtmlの設定({thumb}はリンク付きのサムネイル画像,{title}はリンク付きのタイトル,{summary}は抜粋文) ); wpp_get_mostpopular($arg);//リストが出力される。 } ?> </div> <!-- rankPostBox --> </section> <!-- otherPostBox --> </section> <!-- postBox -->

「試したこと」

・Chromeの検証機能を使って余計なpaddingやmarginが入っていないかチェックしたが入っていなかった。
・wordpressのCSSを確認したが余計なpaddingやmarginが入っていないかチェックしたが入っていなかった。
・キャッシュを削除したが隙間はなくならなかった。

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2018/10/21 04:37

実際のサイトのURLを教えてください
退会済みユーザー

退会済みユーザー

2018/10/21 07:36 編集

返信ありがとうございます。よくCSSを見てみたら大きなすきまがありました。修正したらなおりました。申し訳ありませんでした。
guest

回答1

0

ベストアンサー

Google Chromeの検証機能を使っているのであれば、問題の場所の周辺にあるオブジェクトにも注意してください。
こういう状態になっていることがわかります。

Google Chromeによる確認結果

投稿2018/10/21 07:28

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

退会済みユーザー

退会済みユーザー

2018/10/21 07:34

ありがとうございます。全然気づきませんでした。申し訳ありません。直してみます。
退会済みユーザー

退会済みユーザー

2018/10/21 07:35

直りました。すいません。昨日は全く寝ていなかったのでちょっとしたことを見落としてしまうのですね。気をつけます。
退会済みユーザー

退会済みユーザー

2018/10/21 08:03

すいません。関連記事のタイトルの下にある隙間に対する質問だったのですが、こちらも何か変な記述があったりしたのでしょうか?私ももう1度検証で調べてみます。シェアの部分の隙間のご指摘はありがとうございました。
退会済みユーザー

退会済みユーザー

2018/10/21 08:33 編集

すいません。ただのキャッシュが悪さしてるだけだったようで直りました。wordpressはキャッシュに悩まされていますのでキャッシュを消すプラグインを入れました。お騒がせしました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.49%

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

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

質問する

関連した質問