ブログのテンプレートを、3ステップでリキッドレイアウトに改修

リキッドのテンプレートがあまり無いようなので、気に入ったテンプレートのCSSを編集してリキッドに変えてみました。その概要メモ。

↑横幅固定だと、ブラウザを広げた際に記事の両側に余白が生まれて悲しい。

なお自分はCSSに関して素人なので、間違いや非推奨な事柄があるかもです。ゴミだったらすみません。

※参考：CSS編集：使い方 マニュアル：So-netブログ

元にしたテンプレートと変更内容について

使ったテンプレートは、「ホワイト×マゼンタ」（2カラム右）というシンプルなデザインのテンプレート。

デフォルトでは横幅が固定なので、サイドバーだけ固定値のままにして、そのほか全体的に可変にしようと思います。

• ブログ全体：幅固定（900px）→ 幅可変に変更
• 本文パート：幅固定（620px）→ 幅可変に変更
• サイドバー：幅固定（230px）→ 幅固定まま
• フッター　：幅固定（840px）→ 幅可変に変更

作業1.修正箇所の確認

HTMLのソースを確認。So-netブログではざっくり、以下のような階層構造になっている様子。（"#"はidで、"."はclass）。

• div#container
• div#banner
• div#content
• div#main
• div.archive-title
• div.articles-top
• div.articles
• div.articles-bottom
• div#side-b
• div.sidebar
• div#footer

CSSをみると、赤字のセレクタに対して横幅が指定されているので、とりあえずここを可変に解放してあげれば、リキッドになりそう。

※参考：CSSセレクタ(タグ)一覧：使い方 マニュアル：So-netブログ

作業2.CSSプロパティ値の修正

ログイン後の管理画面の[デザイン] - [テンプレート管理]で、テンプレートのタイトルをクリックすればCSSが編集可能な状態になります。ここでピクセル指定の固定値を、パーセント（%）に置き換え。置き換え後の数値はお好みで。

#banner：32行目あたり

width: 900px; → width: 93%;

#content：60行目あたり

width: 900px; → width: 93%;

#main：125行目あたり

width: 620px; → width: 100%;

#footer；621行目あたり

width: 840px; → width: 90%;

可変に関する修正は以上。この時点ではまだ、表示してみると思いっきり崩れてます。

作業3.崩れたレイアウトを調整

上記の修正により、div#mainがサイドバーを押し出してしまっているので、サイドバーが戻るように調整します。具体的には、div#mainにサイドバーが入る分のマイナスのマージンを追加。

#main {
float: left;
width: 100%;
overflow: hidden;
}

↓

#main {
float: left;
width: 100%;
overflow: hidden;
margin-right: -250px; /* マイナスのマージンを追加 */
}

上の変更で、とりあえずサイドバーは復活しますが、今度は文章の上にサイドバーが重なってしまいます。コンテンツの重複を回避するために、以下の指定を追加。

.archive-title, .articles-top, .articles, .articles-bottom {
margin-right:270px;
}

以上で作業終了。

その他、細かい調整は必要かもしれませんが、基本的には上記の変更でとりあえずリキッドの体裁になるのではないかと思います。というかなりました。とりいそぎ。

コメント 1

なう
by 2535aot (2010-02-22 18:46)