コラム・ゲーム・プロレス記事のブログです。

スポンサーリンク


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


      [ 2012/09/27] PC・ネット・ブログ ブログ 編集

ブログのレイアウトを以前の形に戻しました。
ふと気づくと、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;
}


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

スポンサーリンク
このカテゴリのランダム記事

Twitterによる更新情報の配信も行なっております。下記バナーをクリックして、アカウントをフォローしていただければ、AMGブログの最新記事があなたのタイムラインに表示されます。



関連するタグ




タグcloud
リンク