※ ChatGPTを利用し、要約された質問です(原文:ブログトップページの記事1と記事2の間に謎の空白)
ブログトップページに謎の空白ができる問題
このQ&Aのポイント
ブログトップページで、1つ目の記事と2つ目の記事の間に謎の空白ができてしまいます。トップページで表示される記事の設定に問題がある可能性があります。
表示された記事のデザインに問題があるようです。1つめの記事タイトルの下にツイートボタン、仕切り線、2つ目の記事タイトルというデザインですが、仕切り線と次の記事の間に空白ができてしまいます。
ブログのURLはexampleですが、問題のありそうな箇所のソース(1つ目の記事のフッターから2つ目の記事のタイトルにかけて)を貼り付けました。このソースに問題がある可能性があります。
livedoorでブログを作りました。
トップページで、1つ目の記事と2つ目の記事の間に謎の空白ができてしまいます。
1ページに3記事表示する設定にしているのですが、
1| 2|3|
という表示になってしまっています。
1つめの記事タイトルの下にツイートボタン、仕切り線、2つ目の記事タイトル…というデザインなのですが、仕切り線と次の記事の間に空白ができます。
ドラッグ選択してみると大きな1つの何かがあるみたいです。
2ページ目にいくと 4| 5|6| という、同じ状態になってしまいます。
個別記事ページでは問題がありません。
つまりブログパーツの問題ではなく、トップページのテンプレに問題があるのでは?
テンプレートにミスがあるのかと思い、別のテンプレートも試しましたがダメでした。
一瞬ちゃんと表示されるのですが、すぐに空白が現れてしまいます。
ブログのURLを晒すのは恥ずかしいので、問題のありそうな箇所のソース(1つ目の記事のフッターから2つ目の記事のタイトルにかけて)を貼り付けてみます。
ブログのURLはexample、記事のタイトルは「記事1」のように変更しました。
<!-- 記事フッター、カテゴリ、コメント、ソーシャルボタン -->
<footer class="article-footer">
<ul class="article-meta">
<li class="article-comment-count">
<dl><dt>コメント数:</dt><dd><a href="http://example.doorblog.jp/archives/20344743.html#comments">0 コメント</a></dd></dl>
</li>
<li class="article-category">
<dl><dt>カテゴリ:</dt><dd class="article-category1"><a href="http://example.doorblog.jp/archives/cat_643832.html">History</a></dd></dl>
</li>
<li class="article-author">by <span itemprop="author">example<span></li>
</ul>
<ul class="article-social-btn">
<a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-url="http://example.doorblog.jp/archives/20344743.html" data-text="記事1 - [ブログのタイトル]" data-lang="ja">Tweet</a><script charset="utf-8" type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fexample.doorblog.jp%2Farchives%2F20344743.html&send=false&layout=button_count&width=110&show_faces=false&action=like&colorscheme=light&font=arial&height=20" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:20px;" allowTransparency="true"></iframe>
</ul>
</footer>
<!-- /記事フッター、カテゴリ、コメント、ソーシャルボタン -->
</article>
<!-- /記事全体 -->
<div id="ad2"></div>
<script type="text/javascript"><!--
if (ld_blog_vars) {
ld_blog_vars.articles.push({
id : '20344742',
permalink : 'http://example.doorblog.jp/archives/20344742.html',
title : '記事2',
categories : [ { id:'643834', name:'Tragedy', permalink:'http://example.doorblog.jp/archives/cat_643834.html' }, { id:'', name:'', permalink:'' } ],
date : '2012-09-07 08:12:15'
});
}
//-->
</script>
<!--
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/"
xmlns:dc="http://purl.org/dc/elements/1.1/">
<rdf:Description
rdf:about="http://example.doorblog.jp/archives/20344742.html"
trackback:ping="http://trackback.blogsys.jp/livedoor/example/20344742"
dc:title="記事2"
dc:identifier="http://example.doorblog.jp/archives/20344742.html"
dc:subject="category2"
dc:description="記事2の本文"
dc:creator="example"
dc:date="2012-09-07T08:12:15+09:00" />
</rdf:RDF>
-->
<!-- 記事全体 -->
<article class="article" itemscope itemtype="http://schema.org/BlogPosting">
<!-- 記事ヘッダー、記事タイトル -->
<header class="article-header">
<p class="article-date"><time datetime="2012-09-07T08:12:15+0900" pubdate="pubdate">September 07, 2012</time></p>
<h1 class="article-title" itemprop="name"><a href="http://example.doorblog.jp/archives/20344742.html" itemprop="url">記事2のタイトル</a></h1>
</header>
<!-- /記事ヘッダー、記事タイトル -->
<!-- 記事本文 -->
<div class="article-body">
<div class="article-body-inner">
お礼
回答ありがとうございます。 ご指摘の通り、広告欄でした。 Google Chromeで広告ブロックするアドオン(Adblock)を使用しているため、広告がブロックされて真っ白になっていたようです。