[topicpath]
seesaaブログテンプレート改造計画 > カラム配置のカスタマイズ > 3カラムテンプレートのサイドカラムを片側に寄せて、スタイルシートで調整してみた
2014年05月21日

3カラムテンプレートのサイドカラムを片側に寄せて、スタイルシートで調整してみた

 3カラムのサイドカラムを左に寄せてみた。

 やり方は、サイドカラムを片側に寄せるのとおり

 使っているテンプレート名は「超シンプル(両サイドバー)」というテンプレート。

 

サイドカラムを2つとも左に寄せたテンプレート表示

 右に全体により過ぎているのは、スタイルシートを調整していないため。

 スタイルシートを書き換えるともうちょっと見やすくなると思う。

3カラムテンプレートのサイドカラムを片側に寄せた

 

元のテンプレート表示

 もともとのテンプレートはした。

 シーサーブログのオーソドックスな3カラムテンプレートだ。

オーソドックスなシーサーブログ3カラムテンプレートによる表示

 

スタイルシートのカスタマイズのヒント

・ブログ全体の幅=#containerのwidth+margin:。

・#containerの幅=(contentのwidth:+ margin-right+margin-left:)+(#links-leftのwidth+padding+margin-right:×2)+(#linksのwidth:+ padding:)+(#contentの width:+margin-right:+margin-left:)。

 

スタイルシートの書き換え

一番左のカラムを1.

真ん中のカラムを2。

一番右のカラムを3(ここがメインカラム)。

 とする。

 

・ブログ全体を記述するスタイルシート

#container{
 width:960px;
 text-align:left;
 margin:0 auto;
}

これを下のように変える

#container{
 width:929px;
 text-align:left;
 margin:10 auto;
}

 ブログの幅が変わり、ブログの左右に空間ができる。

 

サイドカラム1の部分を表示するスタイルシートの表示は↓

#links-left{
 width:240px;
 float:left;
 padding:0px 0px 0px 0px;
 line-height:1.5;
 margin-right:40px;
}

 これを下のように変える。

#links-left{
 width:202px;
 float:left;
 padding:0px 0px 0px 0px;
 line-height:1.5;
 margin-right:3px;
}

 

サイドカラム2の部分のスタイルシート

#links{
 width:240px;
 float:left;
 padding:0px 0px 0px 0px;
 line-height:1.5;
}

このスタイルシートを下のようにかえる

#links{
 width:202px;
 float:left;
 padding:0px 0px 0px 0px;
 line-height:1.5;
}

 

3のカラムのスタイルシート

#content{
 width:430px;
 float:left;
 margin-right:40px;
}

これを下のように変える。

#content{
 width:480px;
 float:left;
 margin-right:9px;margin-left:30px;
}

 で、下がHTMLを変えた後にスタイルシートで表示を調整したもの。

オーソドックスなシーサーブログ3カラムテンプレートによる表示サイドカラムを片側に寄せた表示 ⇒サイドカラムを片側に寄せたスタイルシートを調整

 かなり、見やすい表示になったんじゃないかと思う。




【カラム配置のカスタマイズの最新記事】
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック
最近のコメント
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。