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&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が入っていないかチェックしたが入っていなかった。
・キャッシュを削除したが隙間はなくならなかった。
回答1件
あなたの回答
tips
プレビュー