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さんにも感謝です。