エントリー本文
テンプレートカスタマイズ支援ツール Column Resizer
先日紹介した Slider を利用して、配布テンプレートの各カラムをダイナミックにリサイズできるツールを作ってみました。
このツールを利用すれば表示を確認しながらリサイズすることができます。
また配布テンプレートのカラムサイズを変更する場合、スタイルシートの中から該当のセレクタを探して修正する必要がありましたが、その変更も簡単に行えるようになりました。
利用方法は上記リンクのサンプルブログの本文をご覧ください(お読みにならなくてもなんとなく分かると思います)。
配布テンプレートをご利用でない方も、テンプレートを自作される場合の参考になれば幸いです。
動作確認ブラウザ
Windows XP + IE6.0/IE7.0/Firefox 2/Opera9 です。
利用可能テンプレート(2007年2月現在)
Movable Type / WordPress(3カラム版) / Serene Bach / sb / FC2 ブログ / Seesaa ブログ / livedoor ブログ / さくらのブログ
注意事項
ツール上ではカレンダーもリサイズ可能にしていますが、配布テンプレートでは同じ振る舞いになりません(テンプレートによってカレンダーのマークアップが異なるという前提もありますが)。
Movable Type でツールのカレンダーと同じ振る舞い(幅可変)にしたい場合は、赤色部分の値を大きくしてください。
.calendar th {
padding-bottom: 3px;
font-size: 8px;
width: 23px;
}
>Opera 9 は CSS の取得ができません。
取得できないのではなく、テキストエリアに表示されないだけですよね。
テキストエリアの value プロパティに、内部作成したCSS文字列を直接代入すれば、Operaでも表示されるようになりますよ。
もちろんIEやFirefoxでも正常に動作します。
この方法はDOMに比べるとレガシーなものですが、document.getElementById()や$()関数で取得したElementオブジェクトがtextareaならばvalueプロパティの存在は保証されている(はずな)ので、JavaScript的(ECMAScript的)には問題ない方法です。
