エントリー本文
テンプレートカスタマイズ支援ツール 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;
}
- ドロップシャドウつきの画像をセンタリングする
- CSS で table に斜線を引く方法
- IE7 で pre 要素が適正に表示されない不具合を修正
- CSS ネガティブマージンで重なった要素のリンクをクリックできるようにする
- CSS でヘッダーに画像を表示する for Movable Type 4
- CSSでブログに影をつける(ドロップシャドウ:Movable Type 4.x 配布テンプレート版)
- Highslide JS でサムネイル画像を拡大表示する(設定方法の変更)
- CSS でブログ本文の画像だけをセンタリングする
- CSS の画像置換で画像にリンクを設定する
- XREA のバナー広告を固定レイアウトのヘッダに表示する
- グローバルナビゲーション(その1:基本スタイル)
- 「追記文章の折りたたみ 2.0」でIE7の不具合を解消する
- サブカテゴリーリストのツリー画像で親カテゴリーのみ異なる画像を表示する
- 公開テンプレートにフッタを追加する(2カラム版)
- CSS の after 擬似要素で回り込みを解除する
- サイドバーのタイトル背景をカラム幅にあわせて表示する
- 公開テンプレートのサイドバーのカラム幅を変更する
- CSSでブログに影をつける - ドロップシャドウ画像ファイルの作り方
- CSSでブログに影をつける(ドロップシャドウ)
- IE7 の CSS ハック
>Opera 9 は CSS の取得ができません。
取得できないのではなく、テキストエリアに表示されないだけですよね。
テキストエリアの value プロパティに、内部作成したCSS文字列を直接代入すれば、Operaでも表示されるようになりますよ。
もちろんIEやFirefoxでも正常に動作します。
この方法はDOMに比べるとレガシーなものですが、document.getElementById()や$()関数で取得したElementオブジェクトがtextareaならばvalueプロパティの存在は保証されている(はずな)ので、JavaScript的(ECMAScript的)には問題ない方法です。
>あんちもん2さん
こんばんは。
アドバイスありがとうございました!
