ブログの月別表示、カテゴリー別表示の不具合

質問

ライブドアのブログ初心者です。

月別表示、カテゴリー別表示をしようとすると、
記事ごとに表示されるはずの背景のみどり色が
記事ごとに表示されなくなってしまいます。

一番上にくる記事はちゃんと表示されるのですが、
二番目以降は背景の中間が欠けるようです。
「ようです」というのは、背景の欠け方が一定しないからです。

また、カテゴリ別表示をしたとき、記事の頭にカテゴリ名が
表示されますが、背景の緑色がカテゴリ名に若干かぶさってしまうこともあります。
とにかく記事の背景色の表示が安定しません。

カテゴリ別表示させた後、他のウインドウをクリックし、
他のウインドウを前面に出した後
ブログに戻ると、ちゃんと表示されることもあります。
が、マウスで画面をスクロールさせると
またきちんと表示されなくなります。

どうもマウスをスクロールすることで、背景の欠け方が変わるようです。

環境は、WinXPでIE6です。

もしかして、自分のＰＣだけで起きている現象なのでしょうか。
よろしくお願いします。

以下のアドレスに不具合が起きている画像を載せています。
月別(7月)で表示させたときの表示で、緑色が途中で欠けているのがわかると思います。
http://knowledge.livedoor.com/11581

回答No.11

nahomaria · ベストアンサー

>記事のタイトルの間に四角の白いスペースができてしまいました
私自信、マイナスの値は使ったことがないのでどのような動きをするのかよく分からないんですよね(^▽^;)

また、「.date」の「z-index」や「position」も使ったことがないんですよ・・。
これはボックスの重なりを指定するものなんですけど、
あまりいじらない方がいいのかもしれませんね。

で、「.datebody」と「.titlebody」に、
「width:500px;」もしくは「width:100%;」を追加するとどうでしょうか？

それでもダメな場合は「.blogbody」の「background:#edeedc;」を
「background:#fff;」にして、
「.mainmore,.article_tags」に「background:#edeedc;」を追加してみて下さい。

補足

まず、「.datebody」にのみ「width:500px;」を追加してみたのですが、
私の環境からは正常に表示されます。

nahomariaさんの環境からはいかがでしょうか！？

回答No.12

nahomaria

返信遅くなりました。

IE・Firefox共に、問題なく表示されてますよ！
ブラウザの「戻る」を使っても、画像はきちんと表示されてますね☆
これで解決ですねヽ(´ー｀)ノ

時間がかかってしまいましたが、
なんとか解決できてホッとしてます^^
ホント長い間ご苦労様でした。

お礼

ちゃんと表示されていましたか！うれしいです。

ブログ作成がこんなに大変だとは思っていませんでした。
ぜんぜんテンプレートを触っていないのに、こんなトラブルが起きるとは。

livedoor knowlegeに質問しても、
livedoorのヘルプに質問しても、まったく返事が返ってきませんでした。
あのテンプレが気に入ってブログをはじめたのに、
テンプレを変更することまで考えました。

だけど、nahomariaさんのおかげでここまでこれました。
少しですが、CSS、HTMLも見ることができるようになりました。
本当にありがとうございます。
長い間、お世話になりましたm(_ _)m

回答No.10

nahomaria

返信遅くなってしまってごめんなさいです(^▽^;)

う～ん・・もう少しなんですけどね。
「.titlebody」の「margin-top:-18px;」を
「margin-top:9px;」にするとどうでしょうか？

負の値（マイナス）も指定できるんですが、
ブラウザによって処理が異なる可能性もあるようなので、
なるべく使わない方がよさそうです。

ちなみに、今の状態でも、Firefoxでは問題なく表示されてます。

補足

＞「.titlebody」の「margin-top:-18px;」を
「margin-top:9px;」にするとどうでしょうか？

試してみましたが、
http://parts.blog.livedoor.jp/img/usr/t_frog/d_header_01.gif
と
記事のタイトルの間に四角の白いスペースができてしまいました
（＝日付が表示されている部分の背景が白くなってしまいました）
ので元に戻しました。

コメントから帰ってくるときだけおかしくなるなら
再描画するときのソースに問題があるのかとも思いますが、
スクロールしただけでおかしくなるっていうのはどうしたものでしょうかね・・・

回答No.9

nahomaria

>一度トップページを表示させて、上に戻るとヘッダーのgifが消えてしまいます
この現象ですが、
「Comments(0) │TrackBack(0)」から個別記事へ移動して、
ブラウザの「戻る」でトップページ・月別・カテゴリへ戻ると
画像が表示されない箇所がありました。

「.datebody」の「#edeedc;」を削除するとどうでしょうか？
「#edeedc;」の後のスペースも消して下さいね。

他は問題なく表示されてます^^
時間がかかって申し訳ないです(^▽^;)
自分でも1つ1つ原因を探り探りでしか解決できないもので・・。
今回は私にとっても大変勉強になりました。
これで全て解決すればいいんですけどね～。

補足

datebody{
background:#edeedc url(http://parts.blog.livedoor.jp/img/usr/t_frog/d_header_01.gif) no-repeat;
padding-top:9px;
}
↑
上のソースを
.datebody{
background:url(http://parts.blog.livedoor.jp/img/usr/t_frog/d_header_01.gif) no-repeat;
padding-top:9px;
}

に変更してみましたが、どうも変わらないようです・・・

＞時間がかかって申し訳ないです(^▽^;)
とんでもないです。
こんなに長期間やり取りをしていただいて、とっても感謝しております。

回答No.8

nahomaria

だいぶ良くなってきましたね。

>一度トップページを表示させて、上に戻るとヘッダーのgifが消えてしまいます
私の環境では、IE・Firefox共に現象を再現できません。
きちんと表示されてます。

>まだほそーくですが、各記事の終わりに四角が表示されてしまいます
「.fullbody」の「background:#edeedc;」を削除するとどうなりますか？

>ただ、まだ、記事とフッターの間に少し空白が表示されてしまいます。
>トップページと構成はほとんど同じにしているのに、なぜ表示のされ方が異なるのでしょうか？
月別では

</div>　←「fullbody」の閉じタグ
<div class="dateend"></div>

トップページでは

<div class="dateend"></div>
</div>　←「fullbody」の閉じタグ

になってます。
もう分かりますね^^
月別では「fullbody」の閉じタグの【後】に<div class="dateend"></div>があります。
これによって、「.fullbody」で設定した「margin:30px 0 10px 0」の影響で、
下に10px余白ができてしまっているんですね。

なので、

<div class="dateend"></div>
</div>　←「fullbody」の閉じタグ

に変更して下さい。

カテゴリの方はまだいじってないですよね？
こちらも不要なタグの削除と、
<div class="dateend"></div>を「fullbody」の閉じタグ（</div>）の【前】へ移動させて下さい。

補足

月別、カテゴリ別のタグを以下の順番を変えました。
<div class="dateend"></div>
</div>
すると、10px余白はきえたようです。

カテゴリ別の余計なタグも消しました。

また、記事間隔が気になり、fullbodyのmarginをmargin:15px 0 30px 0;
に変えました。

私の環境ではきちんと表示されているのですが、
nahomariaさんの環境ではいかがでしょうか？

回答No.7

nahomaria

だんだん良くなってきてますね。

><div class="dateend"></div>が二回書いてあるのがまずいのでしょうか？
その通りです。
基本的にトップページと同じ構成にして下さい。（カテゴリーも）
不要なタグは削除して、<div class="fullbody">の中に記事部分を収めるようにします。

だいたいは表示されるみたいですが、
スクロールするとおかしくなったりしますね。
「#content」に「margin-right:20px;」を追加して、
「.fullbody」に「width:100%;」を追加してみて下さい。

補足

ご回答ありがとうございます。以下の修正をしてみました。

1.トップページにつき
「#content」に「margin-right:20px;」を追加、
「.fullbody」に「width:100%;」を追加。
スクロールするとおかしくなる現象は減ったように思います。
ただ、一度トップページを表示させて、上に戻るとヘッダーのgifが消えてしまいます。
（http://parts.blog.livedoor.jp/img/usr/t_frog/d_header_01.gif）

また、まだほそーくですが、各記事の終わりに四角が表示されてしまいます。

2.月別の
<div class="dateend"></div>を削除したら、
二重に表示されていたフッター(gif）が消えました。
月別、カテゴリ別の不要なタグは一通り削除したつもりです。

ただ、まだ、記事とフッターの間に少し空白が表示されてしまいます。
トップページと構成はほとんど同じにしているのに、なぜ表示のされ方が異なるのでしょうか？

回答No.6

nahomaria

>1)記事と記事の間に、不要なみどり色の横長の背景（四角）が入る
ですが、これは画像ではなく、
「.fullbody」の「background:#edeedc;」の影響だと思います。
「.dateend」の「height:35px;」を「height:15px;」にしてみて下さい。

さらに、「.blogbody」の「padding-bottom:45px;」を削除するとどうなりますか？

補足

以下の修正をしてみました。トップ画面の表示は変な四角が出なくなりました。ただまだ小さく出たりはします・・・
1.CSSで「.blogbody」の「padding-bottom:45px;」を削除
2.fullbody{　・・margin:10px 0 10px 0　→margin:30px 0 10px 0　に変更しました。

月別表示ですが、まだ(1)記事と記事の間に、不要なみどり色の横長の背景（四角）が入る。(2)記事とフッター（背景）との間が白くなる、という現象のほかに
(3)フッターのgifが二重に表示されたりします。<div class="dateend"></div>が二回書いてあるのがまずいのでしょうか？
ソースで何かおかしいところがあれば、ご指摘いただけるとありがたいです。。

＜月別＞
<div id="blogcontainer">
<div id="content">
<div id="blog">
<div id="categorytitlebody"><h2 id="categorytitle"><$MonthLabel$></h2></div>
<MonthlyArticlesLoop>
<$TrackBackAutoDiscovery$>
<div class="datetop"></div>
<div class="fullbody">
<div class="datebody"><h2 class="date"><$ArticleDate$></h2></div><a name="<$ArticleDateTag$>"></a>
<div class="blogbodytop"></div>
<div class="blogbody">
<a name="<$ArticleId$>"></a>
<div class="titlebody"><h3 class="title"><$ArticleTitle ESCAPE$><IfArticleRating><$ArticleRatingIcon$></IfArticleRating></h3></div>
<div class="main"><$ArticleBody$><IfArticleBodyMore><a href="<$ArticlePermalink$>" class="continues">続きを読む</a></IfArticleBodyMore><br><br clear="all"></div>
<IfHasArticleTags><div class="article_tags">タグ:
<ArticleTagsLoop><a href="<$ArticleTagAggregateUrl$>" rel="tag"><$ArticleTag ESCAPE$></a>
</ArticleTagsLoop></div></IfHasArticleTags>
<div class="posted"><$ArticleAuthor$> at <$ArticleTime$>｜<a href="<$ArticlePermalink$>">Permalink</a><IfArticleAllowComment>│<a href="<$ArticlePermalink$>#comments">Comments(<$ArticleCommentCount$>)</a></IfArticleAllowComment><IfArticleAllowPing>│<a href="<$ArticlePermalink$>#trackback">TrackBack(<$ArticlePingCount$>)</a></IfArticleAllowPing>│<a href="http://clip.livedoor.com/redirect?link=<$ArticlePermalink$>&title=<$BlogTitle URIESCAPE$>%20-%20<$ArticleTitle URIESCAPE$>&ie=euc" class="ldclip-redirect" title="この記事をクリップ！">clip!</a><BR><IfArticleCategory1>│<a href="<$ArticleCategory1Url$>"><$ArticleCategory1$></a>&nbsp;</IfArticleCategory1><IfArticleCategory2>|&nbsp;<a href="<$ArticleCategory2Url$>"><$ArticleCategory2$></a></IfArticleCategory2></div>
<IfFirstArticle><div id="ad"><$Advertise$></div></IfFirstArticle>
</div>
<div class="blogbodybottom"></div>
</div>
<div class="dateend"></div>
</MonthlyArticlesLoop>
<div class="nextpage"><IfPrevPage><a href="<$CurrentUrl$>?p=<$PrevPage$>">前のページへ</a></IfPrevPage>
<IfNextPage>&nbsp;&nbsp;&nbsp;<a href="<$CurrentUrl$>?p=<$NextPage$>">次のページへ</a></IfNextPage></div>
</div>
<div class="dateend"></div>
</div>

回答No.5

nahomaria

>日付がつながっていた件に関しては、トップページだけ直し
ちゃんと表示されてますね。
月別・カテゴリーでも同じように修正すれば大丈夫でしょう。

ソースの方ですが、

<div class="blogbodybottom"></div>
</div>
<div class="dateend"></div>
</IndexArticlesLoop>
<!-- Loop End -->

の部分を

<div class="dateend"></div>
</div>
</IndexArticlesLoop>
<!-- Loop End -->

にするとどうでしょう？
さらに、CSSで「.fullbody」に「background:#edeedc;」を追加してみて下さい。

補足

ご回答ありがとうございます。修正してみました。

1.トップページのソースに下記に修正。
<div class="dateend"></div>
</div>
</IndexArticlesLoop>
<!-- Loop End -->

2.fullbodyは以下のよう修正しました。
.fullbody{
margin:10px 0 10px 0;
background:#edeedc;
}

しかし・・・以下のいずれかの現象が起こります。
(1)記事と記事の間に、不要なみどり色の横長の背景（四角）が入る。（このgifがどこからもってきているのか、わかりません。）
(2)記事とフッター（背景）との間が白くなる。

うーん・・・

回答No.4

nahomaria

Firefoxでのサイドバーとくっつくのは解消されてます。
「width:500px;」を削除して正解のようです。

つながっている記事は同じ日付ですか？
><IfDateChanged> 、</IfDateChanged>
><IfDateFooter> 、</IfDateFooter>を削除
>（これは解決しました）
まだつながってますけど、再構築はしましたか？

独自タグがどうなっているのか、吐き出されるソースからは確認できないので、
記事部分のソースを貼り付けてもらえますか？

>HTMLもCSSも初めてで冷や汗かきながらソースを触ってます。
私も最初はそうでしたよ。
どんなにいじっても、いつでも元に戻せますから大丈夫ですよ。
カスタマイズには必要な知識なので、理解するいい機会だと思ってがんばりましょう^^

補足

ご回答ありがとうございます。日付がつながっていた件に関しては、トップページだけ直し、月別の修正を忘れていました。どうでしょう。
補足の字数制限があるので、トップページのソースを貼り付けます。たぶん貼り付けた部分しか変えていないと思うのですが・・・

＜トップページ＞
<div id="blogcontainer">
<div id="content">
<div id="blog">
<!-- Loop Start -->
<IndexArticlesLoop>
<$TrackBackAutoDiscovery$>
<div class="fullbody">
<div class="datebody"><h2 class="date"><$ArticleDate$></h2></div>
<div class="blogbody">
<div class="titlebody"><h3 class="title"><$ArticleTitle ESCAPE$><IfArticleRating><$ArticleRatingIcon$></IfArticleRating></h3></div>
<div class="main"><$ArticleBody$><IfArticleBodyMore><a href="<$ArticlePermalink$>" class="continues">続きを読む</a></IfArticleBodyMore><br><br clear="all"></div>
<IfHasArticleTags><div class="article_tags">タグ:
<ArticleTagsLoop><a href="<$ArticleTagAggregateUrl$>" rel="tag"><$ArticleTag ESCAPE$></a>
</ArticleTagsLoop></div></IfHasArticleTags>
<div class="posted"><$ArticleAuthor$> at <$ArticleTime$>｜<a href="<$ArticlePermalink$>">Permalink</a><IfArticleAllowComment>│<a href="<$ArticlePermalink$>#comments">Comments(<$ArticleCommentCount$>)</a></IfArticleAllowComment><IfArticleAllowPing>│<a href="<$ArticlePermalink$>#trackback">TrackBack(<$ArticlePingCount$>)</a></IfArticleAllowPing>│<a href="http://clip.livedoor.com/redirect?link=<$ArticlePermalink$>&title=<$BlogTitle URIESCAPE$>%20-%20<$ArticleTitle URIESCAPE$>&ie=euc" class="ldclip-redirect" title="この記事をクリップ！">clip!</a><IfArticleCategory1>│<BR><a href="<$ArticleCategory1Url$>"><$ArticleCategory1$></a>&nbsp;</IfArticleCategory1><IfArticleCategory2>|&nbsp;<a href="<$ArticleCategory2Url$>"><$ArticleCategory2$></a></IfArticleCategory2></div>
<IfFirstArticle><div id="ad"><$Advertise$></div></IfFirstArticle>
</div>
<div class="blogbodybottom"></div>
</div>
<div class="dateend"></div>
</IndexArticlesLoop>
<!-- Loop End -->
</div>
</div>

回答No.3

nahomaria

う～ん・・・
なかなか上手くいかないですね。

Firefoxでもちょっと表示が乱れるようになってしまいました(^▽^;)
記事部分とサイドバーがくっついてしまってます。
恐らく、「width:500px;」を設定したためだと思います。
1度「width:500px;」を削除してもらっていいですか？
確認してみます。

で、
>1.月別表示、カテゴリ別表示をしたとき、
>一番上の記事以外は、記事の下のほうが一部欠ける
ですが、

.blogbody{
background:#edeedc;
padding-bottom:45px;
}

の「padding-bottom:45px;」を削除したらどうなりますか？

>２.８月別表示をしたときとトップページ表示をしたとき、
>一番上の記事と二番目の記事の背景がつながる。
ですが、その前に、

<div class="datetop"></div>
<div class="blogbodytop"></div>
<div class="blogbodybottom"></div>

は必要なものですか？
吐き出されるソースでは中身が空ですし、
指定されているclassも、CSSでは何も設定されてません。
HTMLを確認して中身が何もなければ削除して問題ないでしょう。

その上で、1つの記事全体を囲んでいる「.fullbody」というclassを設定した方がいいと思います。

記事がつながっているのは、何故だか1番目の記事だけ

<div class="dateend"></div>

が抜けているからです。
このタグは↓の画像を表示させるためのものです。
http://parts.blog.livedoor.jp/img/usr/t_frog/d_footer.gif

構成としては、中身は省略しますが

<div class="fullbody">
<div class="datebody"><h2 class="date">○○</h2></div>
<a name="○○"></a>
<div class="blogbody">
<a name="○○"></a>
<div class="titlebody"><h3 class="title">○○<img src="○○" width="○○" height="○○" alt="○○" /></h3></div>
<div class="main">○○</div>
<div class="posted">○○</div>
<div id="ad">○○</div>
</div>　←blogbodyの閉じタグ
<div class="dateend"></div>
</div>　←fullbodyの閉じタグ

という感じにして、
「.fullbody」というclassで上下の余白（記事同士の隙間）
を設定してみてはどうでしょう。

例）
.fullbody{
margin:10px 0 10px 0;
}

補足

再度ご回答ありがとうございます。以下のことを行いました。

1.main内、ad内のwidth:500px削除
2.padding-bottom:45px;削除（変わりませんでした。）
3.<div class="datetop"></div>
<div class="blogbodytop"></div>
<div class="blogbodybottom"></div> の削除
4.月別のソースに、以下を追加
<div class="dateend"></div>　←追加
5.以下を追加
.fullbody{margin:20px 0 10px 0

6.以上を試しても、「８月別表示をしたときとトップページ表示をしたとき、一番上の記事と二番目の記事の背景がつながる」が直らなかったので、下記サイトをみて、
http://blog.pekebatu.com/archives/50422376.html
<IfDateChanged> 、</IfDateChanged>
<IfDateFooter> 、</IfDateFooter>を削除
（これは解決しました）

ただ、トップページも含め、月別、カテゴリ別すべてのフッターの表示の背景の表示がおかしくなってしまいました。途切れ途切れに表示されたりします。もしかして、ソースの直し方がまずかったのでしょうか。HTMLもCSSも初めてで冷や汗かきながらソースを触ってます。

長いやりとりになって申し訳ないのですが、再度お試しいただきたくよろしくお願いします。

回答No.2

nahomaria

ライブドアブログのユーザーではないので、
管理画面がどうなっているのか分かりません。

『livedoor BlogのデザインをカスタマイズするWiki』
http://wiki.livedoor.jp/everydaydesign/d/FrontPage

を参考にしました。

「ブログの設定／管理」→「デザインの設定」→「カスタマイズ」
で「CSS」を選択します。

＊CSSの変更をする前に、
＊一応、今のCSSをバックアップしておいた方がいいと思います。

.main,.mainmore,.article_tags{
line-height:170%;
font-size:12px;
padding:10px 10px 0;
}

の部分を

.main{
background:#edeedc;
width:500px;
line-height:170%;
font-size:12px;
padding:10px 10px 0;
}
.mainmore,.article_tags{
line-height:170%;
font-size:12px;
padding:10px 10px 0;
}

に変更して下さい。

さらに、

#ad{
text-align:center;
}

を

#ad{
background:#edeedc;
width:500px;
text-align:center;
}

に変更します。

変更後はCSSを保存して再構築して下さい。

補足

ありがとうございます。ソース変更してみました。
背景の大部分が表示されるようになりました。

ただ、どうも完全ではないようです。

1.月別表示、カテゴリ別表示をしたとき、一番上の記事以外は、記事の下のほうが一部欠ける
（それでも、だいぶ欠け方は減りましたが）

２.８月別表示をしたときとトップページ表示をしたとき、
一番上の記事と二番目の記事の背景がつながる。

という現象が起こります。

８割がた真っ白よりはぜんぜんましなのですが、
できれば全部背景が表示されるようにしたいです。
もしおわかりになりましたら、よろしくお願いします。