#box:
 px
#content:
 px (px
#links-left-box:
 px (px
#links-right-box:
 px (px
#footer:
 px


2010年12月28日

テンプレート支援ツール Column Resizer 使用方法

本ツールは配布中の各テンプレート(Movable Type / WordPress(3カラム版) / Serene Bach / sb / FC2 ブログ / Seesaa ブログ / livedoor ブログ / さくらのブログ )に対応しています。

1.カラムレイアウト選択

左上のラジオボタンでカラムレイアウトを選択してください。現在、

  • 3カラム固定レイアウト
  • 2カラム(左サイドバー)固定レイアウト
  • 2カラム(右サイドバー)固定レイアウト

の3種類をサポートしています。

2.カラムサイズ変更

カラムレイアウト選択後、その下にあるラジオボタンでリサイズしたいカラムを選択してください。表示されたスライダーを操作すると本ブログがリサイズされますので、お好みの幅にリサイズしてください。

  • スライダーの範囲を超えてサイズを変更したい場合は、ラジオボタンをもう一度クリックすればスライダーがデフォルト位置に戻り、さらにリサイズが可能になります。
  • IE6 の場合、右カラム幅をバナー画像より狭くするとレイアウトが崩れます。

スライダー下にある数値はスタイルシートに適用する際の ID セレクタと現在の値、カッコ内は実際に表示可能な幅を示しています。

3.CSS 取得

サイズが決まったら右下の「Get CSS」をクリックしてください。右上に表示されている body タグをテンプレートに設定し、CSS はスタイルシートの末尾に追加してください。