MovableType・CSS+JavaScript によるカラムレイアウト切り替え

このブログのテンプレートでお世話になっている『小粋空間』さんのブログにて
目からウロコなエントリーが投稿されていた。
CSSとJavaScriptによってカラムの切り替えを行うというもの。
このブログに関しては正直必要は無いが、
製作するWEBのレイアウトの提案を行うときなどに、こうした仕組みは助かる。
というわけでテストページを早速設置してみた。
コンテンツトップにプルダウンメニュー用のHTMLソースを貼り付ける。

<!-- 中央カラム開始 --> <div id="content"> <form id="cc"> <select name="select" onchange="changeColumn(this.form.select.value);"> <option value="3">3カラム</option> <option value="3l">3カラムリキッド</option> <option value="2l">2カラム(左)</option> <option value="2ll">2カラム(左)リキッド</option> <option value="2r">2カラム(右)</option> <option value="2rl">2カラム(右)リキッド</option> <option value="1">1カラム</option> <option value="1l">1カラムリキッド</option> </select> </form> <div class="blog">

<script type="text/javascript"> <!-- function changeColumn(id) {   var elements = document.getElementsByTagName('body');   document.getElementById('links-right-box').style.display = 'block';   document.getElementById('links-left-box').style.display = 'block';   if(id == '3'){     elements[0].setAttribute('class','layout-three-column');     elements[0].setAttribute('className','layout-three-column');   } else if(id == '3l') {     elements[0].setAttribute('class','layout-three-column-liquid');     elements[0].setAttribute('className','layout-three-column-liquid');   } else if(id == '2l') {     elements[0].setAttribute('class','layout-two-column-left');     elements[0].setAttribute('className','layout-two-column-left');     document.getElementById('links-right-box').style.display = 'none';   } else if(id == '2ll') {     elements[0].setAttribute('class','layout-two-column-liquid-left');     elements[0].setAttribute('className','layout-two-column-liquid-left');     document.getElementById('links-right-box').style.display = 'none';   } else if(id == '2r') {     elements[0].setAttribute('class','layout-two-column-right');     elements[0].setAttribute('className','layout-two-column-right');     document.getElementById('links-left-box').style.display = 'none';   } else if(id == '2rl') {     elements[0].setAttribute('class','layout-two-column-liquid-right');     elements[0].setAttribute('className','layout-two-column-liquid-right');     document.getElementById('links-left-box').style.display = 'none';   } else if(id == '1') {     elements[0].setAttribute('class','layout-one-column');     elements[0].setAttribute('className','layout-one-column');     document.getElementById('links-left-box').style.display = 'none';     document.getElementById('links-right-box').style.display = 'none';   } else if(id == '1l') {     elements[0].setAttribute('class','layout-one-column-liquid');     elements[0].setAttribute('className','layout-one-column-liquid');     document.getElementById('links-left-box').style.display = 'none';     document.getElementById('links-right-box').style.display = 'none';   } } //--> </script>

#cc { text-align:center; padding-top: 15px; }

<ソース引用--小粋空間>

テストページにて動作を見ることが出来ます。

ソース一式は小粋空間さんのページで確認できます。
この他にもSeesaaやFC2等のホスティングブログ用テンプレートやMTのカスタマイズ方法など
公開されているので興味のある方はご覧になってみてはいかがでしょう？