お蔵入り
ブログランキングのバナーをHTMLのTopページの中に入れる作業をしている時に、デザインが崩れました。
２カランのデザインの右側が、落ち、左側の投稿記事部分が、縮まり、コメント、トラックバックの欄が見えなくなってしまいました。どうしたらよいのでしょうか？＞。＜デザインは、ベルベットの２カラムです
ブログのURLです
バックアップすればよかったのですが、入れるだけだから、、が、大きな間違いだったようです。。
HTMLの部分です。。
<div class="main"><$ArticleBody$></div><p align="left">
<IfArticleBodyMore>
<span class="main-continues"id="show<$ArticleId$>"><a class="acontinues" href="<$ArticlePermalink$>" onclick="showMore('<$ArticleId$>','<$ArticlePermalink$>');return false;">続きを読む</a></span>
</p>
<div class="main"id="more<$ArticleId$>" style="display:none"><div class="blogbody"><$ArticleBodyMore$><br clear="all"></div>
<span class="main-continues"id="hide<$ArticleId$>"style="display:none"><a class="acontinues" href="#<$ArticleId$>"onclick="hideMore('<$ArticleId$>');return true;">続きを隠す</a></span>
</IfArticleBodyMore>
<br clear="all">
<div class="posted"><a href="<$ArticlePermalink$>">TOP</a><IfArticleAllowComment>│<a href="<$ArticlePermalink$>#comments">Comments(<$ArticleCommentCount$>)</a></IfArticleAllowComment><IfArticleAllowPing>│<a href="<$ArticlePermalink$>#trackback">TrackBack(<$ArticlePingCount$>)</a></IfArticleAllowPing><IfArticleCategory1>│<a href="<$ArticleCategory1Url$>"><$ArticleCategory1$></a> </IfArticleCategory1><IfArticleCategory2>| <a href="<$ArticleCategory2Url$>"><$ArticleCategory2$></a></IfArticleCategory2></div>
<IfFirstArticle><div id="ad"><$Advertise$></div></IfFirstArticle>
</div>
<div class="blogbodybottom"></div>
</div>
<IfDateFooter><div class="dateend"></div></IfDateFooter>
</IndexArticlesLoop>
<!-- Loop End -->
回答(2)
1.
その場合は、次の手順をどうぞ。
現在問題が出ている、トップページのHTMLテンプレートはコピー&ペーストで保存しておいてください。
他にも、何かカスタマイズをしていたのなら、カスタマイズのページに行き、
いじったスタイルシートなり、HTMLテンプレートなりをコピーし、
何かにペーストすることでバックアップしてください。
いじったテンプレート全てのバックアップができたら、次に進みます。
次に、「デザインの設定」のページを開きます。
（http://cms.blog.livedoor.com/cms/design/）
そこで、今まで使っていたベルベットの２カラムのデザインでも、新しいデザインでも構いませんから、デザインを選び、下の［デザインを変更する］か［このデザインに設定する］をクリックして設定します。
最後に、左上のほうにある「ブログに設定を反映（再構築）」をクリックして再構築のページに移動し
［インデックス（トップの記事）］になっているプルダウンフォームを
［全てのページ］に合わせ、（ブログを再構築する）をクリックし、
「サイトの再構築が完了しました。」が出れば、終了です。
後は、過去にカスタマイズしたところを、バックアップを参考に、もう一度、カスタマイズに挑戦してください。
今回のバナーの場合は、やり方が間違っている可能性が高いので、よく見直してください。
2.
http://blog.pekebatu.com/archives/50427061.html
見れない？ もしかしたら、使用している機種は Mac で、ブラウザーは IE ですか？ だとしたら、今は見れませんね。^^;
その他の環境なら問題なく見れるはずです。Mac + IE はもう使われなくなる環境なので捨てています。スクリプトが干渉していてブラウザーが落ちます。もしそうだとしたら、ゴメンナサイ。
さて、ご質問の件ですが、質問に記載されているタグをすべて検証用のブログのトップページに貼り付けました。そうすると確かに言っておられるような状況になりました。その後、続きを読むの折りたたみの正常なタグを、もう一度貼り付け直した所、正常に戻りました。一度やってみて下さい。↓
<div class="main"><$ArticleBody$></div>
<p align="left">
<IfArticleBodyMore>
<span class="main-continues" id="show<$ArticleId$>"><a class="acontinues" href="<$ArticlePermalink$>" onclick="showMore('<$ArticleId$>','<$ArticlePermalink$>');return false;">続きを読む</a></span>
</p>
<div class="main" id="more<$ArticleId$>" style="display:none"><$ArticleBodyMore$><br clear="all"></div>
<span class="main-continues" id="hide<$ArticleId$>" style="display:none"><a class="acontinues" href="#<$ArticleId$>" onclick="hideMore('<$ArticleId$>');return true;">続きを隠す</a></span>
</IfArticleBodyMore>
<br clear="all">
なお、<div class="posted"> 以下は、問題ないと思いますが、思うようにならなかったら、下のコメント欄にお書き下さい。
色々ありがとうございました。AQさんのサイトが、未だに見れないようで、残念です。＞。＜
コメント(14)
カスタマイズの前に、戻したいのですが、全て戻したいのではなくて、この部分のおかしいところを直したいのです。バーナーを入れたところは、すでに削除しているので、上のHTMLには、存在していないのは、見て解ると思うのですが。この部分は、２箇所カスタマイズされているものです。 １つは、続きを読む、隠すの部分です。もう一つは、作者の名前、時間を、消しているんです。
わかる方、いませんかねぇ。。カスタマイズを参考にしていたサイトが、今見れない状況なんですよね。そこが見れれば、糸口が見つかるのですが。。
新しい、デザインを、上記のHTMLの部分と、そっくり変えてみましたが、無理でした。もっとデザインが崩れてしまいました。困った物です
このカスタマイズは、仕様が少しアップしました。続きを隠すをクリックした後、元の位置に戻らず、どんどんと下にスクロールするのを防ぎ、元の記事のタイトルの位置に戻すようにしました。
トップページの HTML を （ カテゴリ・月別も同じく ） 上から覗いていくと、こういう部分があります。
<div id="blogcontainer">
<div id="content">
<div id="blog">
<!-- Loop Start -->
<IndexArticlesLoop>
<$TrackBackAutoDiscovery$>
<div class="datetop"></div>
<div class="fullbody">
これに、<a name="<$ArticleId$>"></a> のアンカータグを打ち込みます。入れる場所は、赤文字 の <$TrackBackAutoDiscovery$> と <div class="datetop"></div> の間が良いでしょう。
こんな感じになります。↓
<div id="blogcontainer">
<div id="content">
<div id="blog">
<!-- Loop Start -->
<IndexArticlesLoop>
<$TrackBackAutoDiscovery$>
<a name="<$ArticleId$>"></a>
<div class="datetop"></div>
<div class="fullbody">
これで保存して、再構築をかけて下さい。
ウィンドウズ使用ですが、AQさんのサイトが、今日は見れなくなっています。なぜでしょう？前は見れたのに。解答＃２のを、そのまま貼り付けて見ましたが、投稿記事が、右側にもずれてしまいました。そこで、コメントの＃４の追加部分を入れてみましたが、治りませんでした。
<div class="blogbodybottom"></div>
</div>
<IfDateFooter><div class="dateend"></div></IfDateFooter>
</IndexArticlesLoop>
<!-- Loop End -->
</div>
<div id="links">
ここの、Loop EndのしたにDivが、２つあったので、１つ削除したところ、右側のデザインは、復活しましたが、左側の投稿記事が、正常な位置ではなくて、１つ１つの記事に、隙間がなく、記事が、折り重なっているところも出ています。コメントや、トラックバックを書くリンクの欄が、見えなくなっています。どうしたらよいのでしょうか？
現在の状況です。
http://blog.livedoor.jp/violetkisaki/
>> ましまろさん
Windows、Mac すべてのブラウザーで検証しながらブログ作りをしています。Windows で見れないはずは無いのですが？ アクセスできないと言う事ですか？ 上の >>1 （ 回答ですよ ） に記述しているアドレスをクリックして見れませんか？ IE ですか？ ブラウザーのバージョンは？
それと回答した事を実行した状態で、その不具合をご報告ください。ご自身でさらなる別の事をなさると、私の次の回答ができなくなってしまいます。
>>#6 に書いておられる、削除した </div> ですが、それは絶対に削除してはいけないタグです。元に戻して下さい。
もう一度、おさらいで書きますね。私の検証用のブログにおいて、まず、ましまろさんと同じデザインテンプレートに合わせました。そして、ましまろさんが質問欄に書いたタグを、そのブログの該当する位置に書き込みました。そうすると、現在の前の状態 （ 質問された時の状態 ） とまったく同じ状態になりました。そこで、回答 >>2 に記述した正しいタグを、該当する位置にもう一度貼り付け直した所、正常な状態に戻りました。それを確認後、>>2 の回答をしたという経緯となっています。ですから、ましまろさんも、それで問題は解決されると思うのですが？
IEのバージョンはよくわかりませんが、昨年の夏に購入したので新しい方だと思うのですが。。Loop Endの後の削除したDIVを戻して、＃２の回答を、ペーストしました。それでもだめだったので、<a name="<$ArticleId$>"></a>をいれました。投稿記事が右にも出て、壁紙の一部が、半分の長さになりました。
意を決して、ブログのデザインを再構築することにしました。その後で、＃２のHTMLを入れましたが、どうも、個別ページに飛んでしまうようです。続きを隠すがでません。なぜなのでしょうか？
Java Scriptを入れるように、AQさんのブログに、以前書いたあったところがあり、そこを見つけました。その後、TOPページ内で正常に動くようになりました。色々お世話をかけました。
Java Scriptは、そのままTOPページのHTMLをコピーしておいた物です。デザインの再構築をした後にも、AQさんの＃２の物をそのまま入れても、デザインがずれて、元のJava Scriptを入れたら、すっかり直りました。色々、’お世話かけました。もしかしたら、ペットが散歩中にキーボードを踏んだのかもしれません＞。＜
