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

スポンサーリンク


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


      [ 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
リンク
フリーソフトラボ.com
俺とゲームの素晴らしき時間
まじめ系クズの日常
青空プロレスNEWS – 新日本プロレス・WWEの海外最新速報ニュースピックアップ
陰陽座コピーバンド「魂響(Tamayura)」Webサイト 魂響
ニコニコ動画研究部
ひといきゲーム - 無料フラッシュゲームがたくさん!
実は都市伝説
検索窓.com
お手軽ゲーム館
ゲーム生活はじめました。
オールフリーソフト Windows 7・8対応のフリーソフト
オールフリーソフト更新情報
New ひろのブログ
Wii&WiiUおすすめゲームソフト集
☆ニョッキ動画
新作オンラインゲームベスト
フラシュ - 無料フラッシュゲーム
無料ゲーム探索隊
アクションゲームの庵
無料ブラウザゲーム集
無料ゲームのSimple Flash Games
棒人間ゲーム
無料ブラウザゲームnet
フラッシュゲームな日々・・・
フラゲーム
面白オンゲ通信!
ベリーズゲーム
無料防衛ゲームプレイ
はっぴぺ通信2
イジワル海賊団【無料ゲーム本部】
おもしろ フラッシュゲーム ミュージアム
脱出ゲームセンター
無料パチスロゲーム
MMORANK.JP
FPSRANK.JP
無料フラッシュゲーム
ファミコンのネタ!!
おもしろいゲーム 無料ゲームで遊ぼうよ!
オモロ無料ゲーム
だしゅつ! 無料脱出ゲーム
おもしろゲームフラッシュ集-脱出ゲーム集
フリーソフトの樹
ゲーム動画ブログ
その他リンク集

脱出ゲーム大百科