テンプレートカスタマイズ支援ツール Column Resizer

テンプレートカスタマイズ支援ツール Column Resizer

Posted at February 13,2007 12:55 AM
Tag:[CSS, JavaScript, Template, Tool]

先日紹介した Slider を利用して、配布テンプレートの各カラムをダイナミックにリサイズできるツールを作ってみました。

Column Resizer ロゴ

このツールを利用すれば表示を確認しながらリサイズすることができます。

また配布テンプレートのカラムサイズを変更する場合、スタイルシートの中から該当のセレクタを探して修正する必要がありましたが、その変更も簡単に行えるようになりました。

利用方法は上記リンクのサンプルブログの本文をご覧ください(お読みにならなくてもなんとなく分かると思います)。
配布テンプレートをご利用でない方も、テンプレートを自作される場合の参考になれば幸いです。

動作確認ブラウザ

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;
}
関連記事
トラックバックURL


コメント

>Opera 9 は CSS の取得ができません。
取得できないのではなく、テキストエリアに表示されないだけですよね。
テキストエリアの value プロパティに、内部作成したCSS文字列を直接代入すれば、Operaでも表示されるようになりますよ。
もちろんIEやFirefoxでも正常に動作します。

この方法はDOMに比べるとレガシーなものですが、document.getElementById()や$()関数で取得したElementオブジェクトがtextareaならばvalueプロパティの存在は保証されている(はずな)ので、JavaScript的(ECMAScript的)には問題ない方法です。

[1] Posted by あんちもん2 : February 13, 2007 4:04 PM

>あんちもん2さん
こんばんは。
アドバイスありがとうございました!

[2] Posted by yujiro : February 13, 2007 9:53 PM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)