2008/05/18

3カラムの Blogger テンプレート

Blogger標準のテンプレートは2カラム、またはシンプルな1カラム構成です。ただ、情報量が増えると若干縦に伸びすぎるキライがあります。

このような場合、Blogger ではテンプレートを自由に書くことが出来ますので、必要
に応じて変更してしまえば全く問題ありません。特に、Bloggerの場合、多くの人がテンプレートを公開してくださっていますので、積極的に活用させていただきましょう。

というわけで、私が使っている「Denim Washed」テンプレートの3カラム版をBlogcrowdsから頂いてきて、適用してみました。

本質的な変更点はただ1点で、「sidebar-wrapper」のCSS定義が、id属性からclass属性へと変更になったこと。両脇に同一の sidebar 定義を使う為、idではマズイからです。結果、これに伴い、各サイドバーの定義が、
      <div class='sidebar-wrapper'>
へと変更になっています。

基本的な変更はこれだけです。後は幅の調整などを適当に行えば、3カラムの出来上がりです。

ただ、上記サイトで公開してくださっているテンプレートの内容が若干古かったこと、また私は、左右のサイドバーで CSS の float 値を変更したかったことなどから、上記テンプレートは使わずに、元もとのテンプレートに対し、左右のサイドバー用定義を新規に設定し、それを用いることにしました。というわけで、以下にその変更点を抜粋します。

最初に注意。テンプレートの書き換え前には、絶対に現在のテンプレートのバックアップを保存しておきましょう。

まずは、テンプレート上部にあるCSSの変更です。「Content」コメント周辺にあるsidebar-wrapperの定義を、次のような感じに書き換えます。なお、私は広めの幅が好きなので、content-wrapperなども調整し、多少オリジナルよりも幅広にしてあります。
/* Content
----------------------------------------------- */

.clear {
clear: both;
}


#content-wrapper {
width: 1048px;
margin: 0 auto;
padding: 0 0 15px;
text-align: $startSide;
background-color: $mainBgColor;
border: 1px solid $borderColor;
border-top: 0;
}
#main-wrapper {
margin-$startSide: 14px;
width: 468px;
float: $startSide;
background-color: $mainBgColor;
display: inline; /* fix for doubling margin in IE */
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper-left {
margin-$startSide: 14px;
width: 240px;
float: $startSide;
background-color: $mainBgColor;
display: inline; /* fix for doubling margin in IE */
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper-right {
margin-$endSide: 14px;
width: 240px;
float: $endSide;
background-color: $mainBgColor;
display: inline; /* fix for doubling margin in IE */
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}


その後、テンプレート中ほどにある、
    <div id='content-wrapper'>
の下に、
      <div id='sidebar-wrapper-left'>
<div>
を書き入れ、左側のカラムを作ります。

最後に、元もと sidebar-wrapper を用いていた div を、
      <div id='sidebar-wrapper-right'>
に書き換えます。

これで基本の書き換えは終了。後は上記 CSSに対して幅の調整などを行えば良いでしょう。

簡単変更が行えるのが、便利なところですね。また、変更点のアイディアを下さったBlogcrowdsさんにも感謝です。

0 件のコメント:

コメントを投稿