Top ＞ Movable Type ＞ テンプレート ＞ CSS+JavaScript によるカラムレイアウト切り替え
News
各種ブログテンプレート
2006年5月17日

エントリー本文

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

Posted at May 17,2006 12:17 AM
Category：[CSS, JavaScript, テンプレート]
Tag：[, , , ]

公開テンプレート（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（テンプレート）に切替用のスクリプトとプルダウンメニューまたはリンクを書き加えるだけで済みます。

以下、このエントリーでは全レイアウトを表示するカスタマイズ方法を説明します。組み合わせによってはサイドバーを非表示にするような効果を出すこともできますので、それらについては追ってご紹介したいと思います。

１．スクリプトの追加

切り替えを実施したいテンプレートの <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>

２．切り替え用プルダウンメニューの追加

１項と同様、切り替えを実施したいテンプレートに下記のプルダウンメニュー（青色）を追加します。ここではカラム切り替えで非表示にならないよう、中央カラム上部に設定しています。

　　　　　　　　：
<!-- 中央カラム開始 -->
<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>

３．スタイルの追加

２項で一応完成ですが、プルダウンメニューの位置を整えるために下記のCSSを追加します。

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

*1：色覚障害等で色が識別できない場合は、サイト右上の「Styles」メニューにある Gray Scale をクリックしてください。IEではグレースケール表示され、青色部分が下線表示、赤色部分が二重下線で表示されます。Firefox／Opera ではカラー表示のままですが下線表示に切り替わります。なお設定の都合上、リンクとテキスト表示が判断できなくなりますので予めご容赦ください。

Posted by yujiro ReTweet This!
関連記事
この記事を読んだ人はこんな記事も読んでいます
人気エントリー
Hatena Hot Entries
Hatena Entries
トラックバックURL


トラックバック

≫ MovableType・CSS+JavaScript によるカラムレイアウト切り替え from モノリスログ
このブログのテンプレートでお世話になっている『小粋空間』さんのブログにて 目からウロコなエントリーが投稿されていた。 C... [続きを読む]

Tracked on May 18, 2006 7:19 PM

≫ CSS+JavaScript でカラムレイアウト切り替え from てぃあら
CSS と JavaScript を用いて カラムレイアウトをリアルタイムに切り替えるカスタマイズ。　⇒ 小粋空間 ： CSS+JavaScript によ... [続きを読む]

Tracked on June 1, 2006 9:51 AM

≫ CSS+JavaScript でカラムレイアウト切り替え from てぃあら
CSS と JavaScript を用いて カラムレイアウトをリアルタイムに切り替えるカスタマイズ。　⇒ 小粋空間 ： CSS+JavaScript によ... [続きを読む]

Tracked on June 1, 2006 9:53 AM
コメント

本日も記事拝見させて頂きました。とりあえずの設置は簡単でいいですね（Blogによると微調整がいりますよね）　早速試させて頂きました。
いつもながら感動します。
そこで、とりあえずは3カラムと3カラムリキッドとの切替えで利用させて頂きたいと考えております。
ただ、先ほど少し試させて頂いた中私のBlogで、フッターに著作権表示をしてバナーを貼ってるんですけどその部分がくずれるのと左右サイドバー部分が崩れます。
これから少しづつまた、トライしたいと思いますので上記に関してだけアドバイス頂けないでしょうか？
毎度ながらお手数おかけ致しますが宜しくお願い致します。

[1] Posted by panser : May 17, 2006 2:12 AM

yujiroさん
はじめましてmitsuと申します。

テンプレートのほうを
利用させていただきましたので、
ご報告させていただきます。
ありがとうござました。

自分でもいろいろと
カスタマイズできるように、
今後もHPの方、
拝見、勉強させていただきます。

[2] Posted by mitsu : May 17, 2006 11:49 PM

＞panserさん
こんばんは。
ご質問の件ですが、確認しますので少々お時間ください。
それではよろしくお願い致します。

＞mitsuさん
はじめまして。
テンプレートご利用＆ご連絡ありがとうございました。
あと勝手ながらBlogPeopleに登録させて頂きました。
それでは今後ともどうぞよろしくお願い致します。

[3] Posted by yujiro : May 18, 2006 11:17 PM

こんにちはぁ。このところご無沙汰続きで失礼しています。
Serene Bach で これ使わせていただきました。ホントはMTでも使いたかったんだけど
やむやむは あれこれ盛り込み過ぎてコテコテなので もうこれ以上いじる元気がなくなっちゃいました(。_゜)〃

[4] Posted by さえら : June 1, 2006 9:50 AM

＞さえらさん
こんにちは。
ご無沙汰してます。
ご利用＆トラックバックありがとうございました。
このサイトもある意味結構コテコテです（笑）。
何事もほどほどがいいかもしれませんね…。

[5] Posted by yujiro : June 2, 2006 12:32 PM
コメントする
greeting

*必須



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

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

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

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

Now loading...
Introduction
Entry Trackbacks
Entries of this Category
Recent Entries
Recent Comments
Recent Trackbacks
QRcode

現在停止中です
携帯電話からこのQRcodeを撮影することで携帯用URLを取得することができます

URI for cellular phones
ギターに入った猫
Styles
Font Size
＜ Default ＞
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by：FeedBurner

loading ...
Categories
Monthly Archives
BlogPeople
Syndicate this site
FeedBurner（RSS1.0/RSS2.0/Atom）
Counter
これまでのアクセス
クリエイティブ・コモンズ・ライセンス
Powered by
Movable Type 5.02