CSS+JavaScript によるカラムレイアウト切り替え
公開テンプレート(Movable Type/Serene Bach/sb/ FC2ブログ/Seesaaブログ)でカラムレイアウトをリアルタイムに切り替えるカスタマイズです。ここでは公開テンプレートをサンプルに説明していますが、同様の構造であればどのようなテンプレートでも実現可能です。
とりあえず、どのような動作になるかをサンプルでお試しください(中央上部のプルダウンメニューで操作できます)。
以前、類似の記事でスタイルシート切替や3カラム可変と3カラム固定を切り替えるをエントリーしていますが、これらはいずれもスタイルシートを新たに追加する必要がありました。つまり「スタイルシートを切り替える」というカスタマイズでした。
今回のカスタマイズでは、スタイルシートの追加や切り替えなしにレイアウトを切り替えることができます。
その理由は、現在公開しているテンプレートでは1つのスタイルシートに
- 3カラムリキッドレイアウト
- 3カラム固定レイアウト
- 2カラムリキッドレイアウト(右サイドバー)
- 2カラム固定レイアウト(右サイドバー)
- 2カラムリキッドレイアウト(左サイドバー)
- 2カラム固定レイアウト(左サイドバー)
- 1カラムリキッドレイアウト
- 1カラム固定レイアウト
の8種類のレイアウトをまとめて記述しています。各レイアウトは body 要素の class 属性に割り当てているので、この class 属性値(青色 *1)を書き換えることでレイアウトが切り替わります。
<body class="layout-three-column">
CSSには class 属性に対応するクラスセレクタが記述されています。例えば .layout-three-column では下記のような設定になっています(抜粋)。
body.layout-three-column {
margin-bottom: 20px;
}
.layout-three-column #box {
width: 850px;
}
.layout-three-column #content {
float: left;
width: 478px;
}
.layout-three-column #links-left-box,
.layout-three-column #links-right-box {
float: left;
width: 185px;
}
.layout-three-column #links-left,
.layout-three-column #links-right {
padding: 15px 15px 0 15px;
}
公開テンプレートでは、同様の設定を8種類全てのレイアウトについて記述しています。目新しいテクニックではありませんが、ページデザインを切り替えるには非常に有効な手法です。
つまり JavaScript で class 属性値を書き換えれば簡単にレイアウトを切り替えることが可能、という訳です。具体的には、HTML(テンプレート)に切替用のスクリプトとプルダウンメニューまたはリンクを書き加えるだけで済みます。
以下、このエントリーでは全レイアウトを表示するカスタマイズ方法を説明します。組み合わせによってはサイドバーを非表示にするような効果を出すこともできますので、それらについては追ってご紹介したいと思います。
1.スクリプトの追加
切り替えを実施したいテンプレートの <head>~</head> へ下記を追加します。外部ファイルにしても構いません。
<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>
2.切り替え用プルダウンメニューの追加
1項と同様、切り替えを実施したいテンプレートに下記のプルダウンメニュー(青色)を追加します。ここではカラム切り替えで非表示にならないよう、中央カラム上部に設定しています。
:
<!-- 中央カラム開始 -->
<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">
:
リンクにする場合は下記のようになります(どこに配置するかは自己解決してください)
<ul>
<li><a href="javascript:void(0);" onclick="changeColumn('3')">3カラム</a></li>
<li><a href="javascript:void(0);" onclick="changeColumn('3l')">3カラムリキッド</a></li>
<li><a href="javascript:void(0);" onclick="changeColumn('2l')">2カラム(左)</a></li>
<li><a href="javascript:void(0);" onclick="changeColumn('2ll')">2カラム(左)リキッド</a></li>
<li><a href="javascript:void(0);" onclick="changeColumn('2r')">2カラム(右)</a></li>
<li><a href="javascript:void(0);" onclick="changeColumn('2rl')">2カラム(右)リキッド</a></li>
<li><a href="javascript:void(0);" onclick="changeColumn('1')">1カラム</a></li>
<li><a href="javascript:void(0);" onclick="changeColumn('1l')">1カラムリキッド</a></li>
</ul>
3.スタイルの追加
2項で一応完成ですが、プルダウンメニューの位置を整えるために下記のCSSを追加します。
#cc {
text-align:center;
padding-top: 15px;
}
*1:色覚障害等で色が識別できない場合は、サイト右上の「Styles」メニューにある Gray Scale をクリックしてください。IEではグレースケール表示され、青色部分が下線表示、赤色部分が二重下線で表示されます。Firefox/Opera ではカラー表示のままですが下線表示に切り替わります。なお設定の都合上、リンクとテキスト表示が判断できなくなりますので予めご容赦ください。
- Movable Typeのコンテンツデータで公開日を比較する方法
- MT7テンプレート作成画面に表示される「コンテンツタイプ」「コンテンツフィールド」の意味
- Movable Typeでテンプレートの動作を簡単に確認する方法
- Movable Typeでスマホサイト用トップページをPCサイト用トップページと異なるURLにする方法
- Movable TypeでCSSファイルやJavaScriptファイルなどを管理するためのTips
- Movable Type 4.2 テンプレートセット(コミュニティ用)修正
- Movable Type 4.2 テンプレートセット(コミュニティブログ対応版)修正
- Movable Type 4.2 テンプレートセット(コミュニティブログ対応版)
- Movable Type 4.2 配布テンプレートセット修正(カテゴリーアーカイブ・コメント完了)
- Movable Type 4.2 テンプレートセット修正(アーカイブインデックス追加等)
- Movable Type 4.2 テンプレートセット修正
- Movable Type 4.1 テンプレートセット修正
- 「iPhoneテンプレートfor MT」 by cremadesign
- Movable Type 4.1 テンプレートセット(スタイル対応版)
- 小粋空間テンプレートセットのカラムレイアウト変更方法
≫ MovableType・CSS+JavaScript によるカラムレイアウト切り替え from モノリスログ
このブログのテンプレートでお世話になっている『小粋空間』さんのブログにて 目からウロコなエントリーが投稿されていた。 C... [続きを読む]
≫ CSS+JavaScript でカラムレイアウト切り替え from てぃあら
CSS と JavaScript を用いて カラムレイアウトをリアルタイムに切り替えるカスタマイズ。 ⇒ 小粋空間 : CSS+JavaScript によ... [続きを読む]
≫ CSS+JavaScript でカラムレイアウト切り替え from てぃあら
CSS と JavaScript を用いて カラムレイアウトをリアルタイムに切り替えるカスタマイズ。 ⇒ 小粋空間 : CSS+JavaScript によ... [続きを読む]
本日も記事拝見させて頂きました。とりあえずの設置は簡単でいいですね(Blogによると微調整がいりますよね) 早速試させて頂きました。
いつもながら感動します。
そこで、とりあえずは3カラムと3カラムリキッドとの切替えで利用させて頂きたいと考えております。
ただ、先ほど少し試させて頂いた中私のBlogで、フッターに著作権表示をしてバナーを貼ってるんですけどその部分がくずれるのと左右サイドバー部分が崩れます。
これから少しづつまた、トライしたいと思いますので上記に関してだけアドバイス頂けないでしょうか?
毎度ながらお手数おかけ致しますが宜しくお願い致します。
yujiroさん
はじめましてmitsuと申します。
テンプレートのほうを
利用させていただきましたので、
ご報告させていただきます。
ありがとうござました。
自分でもいろいろと
カスタマイズできるように、
今後もHPの方、
拝見、勉強させていただきます。
>panserさん
こんばんは。
ご質問の件ですが、確認しますので少々お時間ください。
それではよろしくお願い致します。
>mitsuさん
はじめまして。
テンプレートご利用&ご連絡ありがとうございました。
あと勝手ながらBlogPeopleに登録させて頂きました。
それでは今後ともどうぞよろしくお願い致します。
こんにちはぁ。このところご無沙汰続きで失礼しています。
Serene Bach で これ使わせていただきました。ホントはMTでも使いたかったんだけど
やむやむは あれこれ盛り込み過ぎてコテコテなので もうこれ以上いじる元気がなくなっちゃいました(。_゜)〃
>さえらさん
こんにちは。
ご無沙汰してます。
ご利用&トラックバックありがとうございました。
このサイトもある意味結構コテコテです(笑)。
何事もほどほどがいいかもしれませんね…。