ブログのレイアウトの崩れの原因が分かりません

質問

livedoorのブログのレイアウトをカスタムしているんですが、どうしてもレイアウトの崩れを回避出来ずに困っています。

具体的な症状ですが、記事本文にjavascriptタグを記入するとサイドバーの位置がおかしな場所にズレてしまいます。
本文のタグを消すと元通り、正常な表示になります。

レイアウトは２カラムで、本文の位置、内容共に問題無く表示されますが、本来本文の真横にサイドバーが来るハズなのに、本文が終わった最下部の位置からようやく表示されます。
参考イラストがこちらにあります。
【https://www.dropbox.com/s/3j1lwr40klm949i/%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88%E3%82%BA%E3%83%AC%E3%80%80%E8%B3%AA%E5%95%8F.jpg?dl=0】
※参考イラストでは『次の記事　前の記事のボタン』が崩れている場面においても記事本文下に正常表示されていますが、これは色々試している中で正常な表示になる事もあった位の話で、これらのボタンも位置がおかしく、サイドバーの部分に表示だったりとおかしくなっています。　

試した事は以下です。
(1)cssに記述されている『#main-inner』や『#sidebar』の箇所のwidthやpaddingの数値を変更。
（以前スクリプトを本文に記述していない頃、レイアウト決めで今回と同じようにサイドバーが正常位置に表示されない事があり、その際は単に横幅が足りなかっただけのようで、数値を調整する事で正しい元の位置に表示できましたが、今回は以前のそれとは関係ない模様）

(2)htmlの</div>の位置や書き忘れ
原因を調べている段階でこちらのサイトを見つけ、
【https://sagadylan.com/blog-layout-fix/】
今回の原因はコレと同じ原理なのではと色々試してみましたが、何分cssやhtmlに詳しい訳ではないので解決までのイメージがイマイチ理解出来ていません。
とりあえず物は試しとhtmlの怪しそうな箇所に</div>を記入しては戻し記入しては戻しと試してみたりもしました。

今回のレイアウトはlivedoorが用意しているテンプレートを使用していますが、
ちょこちょこ色を変えたりボーダーラインを四隅にひいたりと変更しているので、
知らないうちにDivタグを付け忘れてしまった、或は本来あるべき位置ではなく別の場所に終了タグを置いてしまっているのか…

もし解決に必要な情報が他にあれば、回答の際に教えて頂けるとお礼欄にて追記させて頂きたいと思います。

回答No.2

amaryllis_watch · ベストアンサー

ブログを拝見させていただきました。

なるほどね

で、色々見てみると、問題点は
その(1)
閉じタグのエラーが見られます。
<font size="3" face="ＭＳ ゴシック">
<div style="～中略～">
新着記事
</font></div>
↑
閉じタグが逆になっています
↓
<ifarticlecoverimage>
<a href="http://～" itemprop="url"><img src="http://livedoor.blogimg.jp/～.jpg" align="left" hspace="7" vspace="0" width=300 height=200 >
</ifarticlecoverimage></a>

それから、
<!-- // plugin-categorize -->

<Div Align="left"><img src="http://livedoor.blogimg.jp/～.png" widht="180px" height="40px"></Div></a>
↑
閉じタグの</a>が余っているので、削除。
↓
<!-- // plugin-memo -->

<Div Align="left"><img src="http://livedoor.blogimg.jp/～.png" widht="180px" height="40px"></Div></a>

それと、<Div>と</Div>の「D」が大文字になっている。
質問者のブログは、html5なので、小文字にして下さい。
↑
このようなケースが他のところもありますので、小文字にしましょう。

その(2)
コメントアウトの「<!--」と「-->」がコードに別々に残っている。
<!-- /記事ヘッダー、記事タイトル -->

<!-- 記事本文 -->
<!--
<div class="article-body">
<div class="article-body-inner">
↑
「<!-- 記事本文 -->」の次行に「<!--」がある。
それと、
</div>
</div>
-->
<!-- /記事本文 -->

<!-- 記事フッター、カテゴリ、コメント、ソーシャルボタン -->
↑
「<!-- /記事本文 -->」の前行に「-->」がある
その2点を削除してください。

もう1つ、
<span class="calendarweek"><%= wdays[i] %><span>
↑
<span>が、閉じタグになってない。「/」を入力し忘れている。

その(3)
<% ○○○ %>のようなコードがありますが、どこから拾ったのですか？
基本的にライブドアブログは、<% ○○○ %>を使いません。
<% ○○○ %>は、どのサーバー(アメブロやFC2ブログやYahoo!ブログなど以外)かは忘れたけど、サーバー側が<% ○○○ %>をhtmlコードに変換する仕組みで表示されます。ライブドアでは変換されず、そのままhtmlコードに表示されてしまいます(カレンダーなどは表示されてますが)。

ここでcssの話に移します。
「1　2　3　4　5...157　>>」のページ送りが右上にありますね。
それを正しい位置に戻しましょう。
.pager {
clear: both;
}

最後にサイドバーについてですが、htmlに入れる場所が違っているので、下に来ています。それが原因です。
まず、
<!-- サイドバー -->～<!-- /サイドバー -->までのコードを
<!-- /記事全体 -->

<div id="ad2"></div>

</div>
↑
</div>の次行に移動して下さい。
これで直るはずです。

念のため、コードをメモ帳にコピーして保存するなど、バックアップして修正作業進めてください。

お礼

レイアウトが修復できましたのでお礼とご報告致します。

>その(1)
閉じタグのエラーが見られます～閉じタグが逆になっています

htmlで修正。

>閉じタグの</a>が余っている・Divの小文字化

ブログパーツ部分のhtml入力でなぜか</a>だけが残っていました。

>コメントアウトの「<!--」と「-->」がコードに別々に残っている

http://livedoor.blogimg.jp/youbass222/imgs/f/2/f2207dc1.png
このようにしていました。
（この部分を削除した時点でレイアウトの不具合が解決しました！ ）
実はレイアウトをカスタムする際、土台となるテンプレートの
「多分この部分は不要なんだけど、一応消さずに残しておこう。」と思っていた部分でして、
「<!--」と「-->」の間には何を書いても良いんだ！じゃあ挟んじゃえ。
という考えからこのような記述にしていましたが、不具合の原因だったんですね…。
（実は同じ考えでcssでも記述してしまっています。たまたま不具合が出ていないだけかもしれませんが）
～以下css～

/* 多分いらない部分
#wrapper {
padding-top: 24px;
}

#container {
border-radius:4px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
margin: 0 auto;
width: 940px;
}
#content {
border-radius: 0 0 4px 4px;
position: relative;
}
#main {
padding: 20px 00px;
}
----------------------------------------------- */

> <span>が、閉じタグになってない。

これに関してはユーザーが編集出来るhtml内では見当たりませんでした。
ただ、カレンダーのブログパーツ（html記述ではなくライブドアサイトのワンボタンで表示、設置が出来るもの）を非表示にしたところ、問題があったページのソースを表示しても<span>の部分が無事無くなっていました。
なので今はカレンダーを非表示にしています。

> <% ○○○ %>のようなコード

これに関してもユーザーが編集できる部分のcssやhtmlで<%や%>で検索しましたが見当たりませんでした。
既にレイアウトは直っていましたので、ひとまずは見送りという形にしました。

>　送りが右上・htmlに入れる場所が違っているので、下に来ています

これもレイアウトが直った時点でメインカラムの下側、サイドバー位置それぞれ正しい位置に移動していましたのでcss、htmlは編集しませんでした。

ひとまずはこれで様子をみながら細かい部分の編集をしてみようと思います！

それにしても奥が深いというか、パーツボタン１つ置くにしても難しいですね…

回答No.1

amaryllis_watch

問題のURL(質問者のブログURL)を掲示して下さい。

＞＞javascriptタグを記入するとサイドバーの位置がおかしな場所にズレてしまいます

それを入れた場所も教えて下さい。
コメントアウトを入れてくれれはありがたい。
<!-- ここからjavascript -->
<!-- javascriptはここまで -->
↑
みたいにコメントアウトしてね。

お礼

現在は不具合が無い以前のレイアウトを使用していますので、帰宅したら不具合の出た新レイアウトに変更し、こちらの補足欄より報告させていただきます。
(1時間程で帰宅すると思います。)

補足

http://music2.blog.jp/こちらが問題のURLになります。
本文に埋め込んであるスクリプトの前後にコメントアウトを入れてあります。（川崎工場夜景の記事
http://music2.blog.jp/archives/72085411.html
の冒頭にあるスクリプトです。）

本来はトップページ（http://music2.blog.jp/）に記事のタイトルと記事最初の画像だけが表示されるはずが、スクリプトを入れた今の状態だと本文も丸々表示されてしまっている状態です。

個別記事で表示させた時はレイアウトの崩れは起きていないようです。