テンプレートカスタマイズ支援ツール 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;
}
- YouTube動画にキャプションをつけてテキストを回り込ませる方法
- 画像を下揃えにしてテキストを回り込ませる方法
- style要素にCSSの擬似要素は記述可能か?
- position:relativeを設定すると他の要素がずれる場合の対処
- CSSでタブ切り替えする方法
- :target擬似クラスのまとめ
- CSSでヘッダを固定したスクロールテーブルを作る方法
- レスポンシブウェブデザインで画像を縮小する方法
- disabledなボタンのhoverのスタイルを無効にする方法
- HTML要素を別の要素を基点にしてCSSで絶対配置する方法
- :not擬似クラスでCSS3のサポートをチェックする方法
- :checked擬似クラスでチェックボックスに連動して要素を表示させる方法
- ol要素の入れ子で親の番号を子に割り当てる方法
- チェックボックスやラジオボタンを大きくする方法
- CSSで中央に配置する方法
>Opera 9 は CSS の取得ができません。
取得できないのではなく、テキストエリアに表示されないだけですよね。
テキストエリアの value プロパティに、内部作成したCSS文字列を直接代入すれば、Operaでも表示されるようになりますよ。
もちろんIEやFirefoxでも正常に動作します。
この方法はDOMに比べるとレガシーなものですが、document.getElementById()や$()関数で取得したElementオブジェクトがtextareaならばvalueプロパティの存在は保証されている(はずな)ので、JavaScript的(ECMAScript的)には問題ない方法です。
>あんちもん2さん
こんばんは。
アドバイスありがとうございました!