レイアウトを戻すにあたって新規にやったこと

---

---

ブログのレイアウトを以前の形に戻しました。
ふと気づくと、IEでのレイアウト崩れやら何やらが発見され、いままでのレイアウトでは
閲覧自体も重く、「こうなったら以前のレイアウトでいったん見直そう！」と思い、やりました。


やったこと

・ブログ全体の幅を見直し（暫定）

全体　1000px
中央　740px
左　　0px
右　　240px
全体　740

全体の幅を1000より小さくすることで、サイドバーと記事本文スペースの間に
スペースを入れてあります。このテンプレートの特徴なのかどうかわかりませんが、
「中央」と「全体」のピクセル数を同じにすると、ウインドウいっぱいまで広がりました。

・IEでのサイドバー落ち、レイアウト崩れを修正
原因：なんのことはない、HTMLにて「</div>」が余計についていました。
これを取り除いたことで、サイドバー落ちが防げました。

おおっと！記事作成に当たり、「</div>」をそのまま書いたら
プレビュー画面でサイドバーが落ちてました(笑)
文章内でタグを書くにはHTML実体参照変換を使いましょう。
ここにHTMLタグを入れれば、タグを文章に変換してくれます。


・メニューバー作り直し
メニューバーの表示もなんだか気に入らなかったので、いっそのこと・・と思って新規作成。
幸い、以前のバックアップを取ってあったので、下記リンクを参考にして作り直しました。
参考：横メニューバーをブログタイトル下に表示する - FC2ブログのテンプレート工房


・「このカテゴリの関連記事」文字サイズなど修正
CSS設定画面にて、関連記事リストをいじるHTMLタグです。
ここに赤字の部分を追加しましょう。関連記事の文字サイズが修正可能です。
注意することとして、ブログ管理画面　→　「環境設定」　→　「関連記事リスト表示場所」
→「テンプレート変数のみ」にしておきましょう。

下記の引用部分をCSS欄に追加すれば、関連記事リストが当ブログと同じデザインになります。

.relate_dl {
font-size:110%;
}

.relate_dl {
margin: 2.0em 0.5em !important;
padding: 0 !important;
border: 0 none !important;
background: none !important;
}
.relate_dl .relate_dt {
margin: 0 !important;
padding: 0.5em 0.5em !important;
border: 1px #000000 solid !important; /* 線の色 */
line-height: 1!important;
background: #dddddd !important; /* 背景色 */
}
.relate_dl .relate_dd {
margin: 0 !important;
padding: 0 !important;
border: 0 none !important;
background: none !important;
}
.relate_dl .relate_ul {
margin: 1em 0 1em 1.5em !important;
padding: 0 !important;
}
.relate_dl .relate_ul li {
margin: 0 0 0em !important;
padding: 0 !important;
border: 0 none !important;
}

備忘録代わりに書いてみましたが、お役に立つこともあるかと思います。
特にレイアウト崩れがほとんどの場合、余計なコードが書いてあったために起こったケースだったので、
ホント、単純なミスから・・ってのが多いんですよね。気をつけましょう。