3カラム可変と3カラム固定を切り替える
当サイトで公開している3カラムテンプレートは可変と固定の2種類がありますが、これをスタイルシート切替を用いて瞬時に切り替えるカスタマイズです。どちらのタイプにするか悩まれている方はこれで解消されるのではないかと思います。
とりあえず私のサイトの右にある「Stylesheets」で可変（Default）⇔固定（Fixed3Column）を切り替えられるようにしていますので、お試しください。全てのブラウザでの正常な動作は保証しておりませんので予めご了承ください。
以下、3カラム可変を使っている状態から3カラム固定のスタイルシートを追加する手順を説明します。3カラム固定から3カラム可変のスタイルを追加する場合は「固定」と「可変」を読み替えて、６項をスキップしてください。
１．3カラム固定スタイルシート用インデックス・テンプレートの作成
管理メニューの「テンプレート」→「インデックス・テンプレート」の「新しいインデックス・テンプレートを作る」をクリック。次のページで下記を設定します。
- テンプレートの名前：スタイルシート（3カラム固定） *任意の名称でOKです
- 出力ファイル名：styles-site2.css
- テンプレートの中身：テンプレートのページより3カラム固定のエントリーにジャンプしてスタイルシートをコピー＆ペースト
設定が完了したら保存・再構築します。
２．テンプレート修正
メインページ／カテゴリー・アーカイブ／日付アーカイブ／個別エントリーアーカイブ／コメント・プレビュー／コメント・エラーの各テンプレートのヘッダに設定されているCSSファイルの設定（赤色）を、下記のように変更します（青色）。
<link rel="stylesheet" href="<$MTBlogURL$>styles-site.css" type="text/css" />
<link rel="stylesheet" href="<$MTBlogURL$>styles-site.css" type="text/css" title="Default" />
<link rel="alternate stylesheet" href="<$MTBlogURL$>styles-site2.css" type="text/css" title="Fixed" />一番上に書かれたスタイルシートが起動時に使われ、新しいスタイルシートをその下に設定しています。href 属性に作成したスタイルシートのファイル名（styles-site2.css）、title 属性に任意の名称（Fixed）を設定します。この名称は次項のスクリプトで起動される際のキー情報になります。
設定が完了したら保存します。
使用するテンプレートでこの設定がもれているとスタイルを切り替えた状態でページを切り替えた際にスタイルがなくなることがありますのでご注意ください。なおその際はトップページ等に戻ってスタイル切替のメニューをクリックすれば元に戻りますので、スタイルが崩れても慌てないようにしましょう。
３．styleswitcher.js のダウンロード・アップロード
下記の公式サイトに styleswitcher.js があります。
記事の下の方に「download」または「Download styleswitcher.js」というリンクがありますので、クリックして styleswitcher.js をダウンロードしてください。そしてダウンロードした styleswitcher.js をそのままローカル・サイト・パス（index.html と同じディレクトリ）にアップロードします。
４．テンプレートに styleswitcher.js の設定
２項で設定した各テンプレートについて <head>～</head> の間に下記を追加します。
<script type="text/javascript" src="<$MTBlogURL$>styleswitcher.js"></script>設定が完了したら保存します。
５．切り替えメニューの設定
２項で設定した各テンプレートのサイドメニューに以下のタグを追加します。例は公開テンプレートの形式にあわせています。
<div class="sidetitle">
Stylesheet
</div>
<div class="side">
<a href="#" onclick="setActiveStyleSheet('Default'); return false;" onkeypress="setActiveStyleSheet('Default'); return false;">Default</a><br />
<a href="#" onclick="setActiveStyleSheet('Fixed'); return false;" onkeypress="setActiveStyleSheet('Fixed'); return false;">Fixed</a>
</div>setActiveStyleSheet の後方にあるパラメータは、２項で設定した title 属性の名称（Default/Fixed）と一致するように設定します。
設定が完了したら保存・再構築します。
６．テンプレート修正
3カラム固定のスタイルシートはボックスモデルのCSSバグに対処するため、サイドバーの div タグを余分に付与しています。ここでは3カラム可変のテンプレートを元としているので２項で編集した各テンプレートに対し、下記のように青色部分を追加してください。
<!-- 左サイドバー開始 -->
<div id="links-left-box">
<div id="links-left">
：
</div>
</div>
<!-- 左サイドバー終了 -->
<!-- 中央コンテンツ開始 -->
：
<!-- 中央コンテンツ終了 -->
<!-- 右サイドバー開始 -->
<div id="links-right-box">
<div id="links-right">
：
</div>
</div>
<!-- 右サイドバー終了 -->設定が完了したら保存・再構築します。
以上です。3カラム可変から固定に切り替えた場合、カラムずれが発生する場合がありますので、テンプレートのページのFAQにて類似した問題をご確認ください。またスタイルシートがキャッシュに残って変更が反映されない場合があるようですので、IEであれば更新ボタンをクリックしてみてください。
- 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 テンプレートセット（スタイル対応版）
- 小粋空間テンプレートセットのカラムレイアウト変更方法
≫ 3カラム可変と3カラム固定を切り替える from eizo slash blog
●3カラム可変と3カラム固定を切り替える：小粋空間 3カラム可変のテンプレートを... [続きを読む]
≫ スタイル追加（固定3カラム） from SWEET WATER Web Server
久しぶりにスタイルシートを追加しました。 題名の通り、固定3カラムに挑戦してたん... [続きを読む]
≫ [喜] Bフレッツ導入記録・１?プチ・ウェブと私 from 喜怒哀楽
いよいよ私の住む町にもBフレッツが来るんですよ、奥さん！ 8月1日より以前より申し込んでいた人達から随時工事、Bフレッツ導入らしいのですが、実は、私の住む環境が... [続きを読む]
≫ CSS切り替え from Legal Pad
モニタを高解像度にして見ている人（自分）や、OSXでアンチエイリアスのかかった文字だと読んでいてちょっと疲れるので、CSSを切り替えてエントリーのテキストサイズ... [続きを読む]
≫ テンプレートを3カラム可変から固定へ変更 from Mistgrass Weblog
小粋空間さんの3カラム可変と3カラム固定を切り替えるを参考にさせていただき、タ... [続きを読む]
yujiroさん、こんばんは。
右上のボタンで試してみましたー。
（というか楽しく遊んでしまいました）
すごいですね、これ！
3カラム⇔2カラムも出来ちゃったりしたら、もっとすごいなーと思ったのは私だけでしょうか？（笑）
yujiroさん、こんにちはー。
実は、固定3カラムにも興味があったので、この切り替え方法をやってみようと挑戦中です。
可変用のスタイルシートに後から付け足した部分も固定用スタイルシートに持ってこないといけないのですよね？
あれ。スミマセン。
↑は、私のコメントです。
(^_^;)
＞ミッチさん
こんばんは。
ご利用ありがとうございます。
ご質問の件ですが、一部分だけ変更するのであれば、後から付け加えるテンプレートを
@charset "utf-8"; @import "styles-site.css"; ← 元のスタイルを引き込む ： 新しいスタイルの変更部分（*1）だけを記述 ：
としても大丈夫と思います。
*1：body/#box/#content/#links-right/#links-right-box/#links-left/#links-left-box 等です（もれていたらすいません）。
以上です。
それではよろしくお願い致します。
ありがとうございました。
*1だけで新しいスタイルシートを記述し
@inportも付けてみましたが、うまくいきませんでした。orz
（両サイドバーがわくの外へ出ちゃう感じでした）
結局付け加えた部分をよーく探し出し新しいスタイルシートへ付け加えました。
カテゴリーアーカイブのみ変更できるようにしております。
一つだけ。
コピーライト表示が中央下ではなく、右上に来てしまうのはなぜなのでしょう？
なにか書き忘れているのかしら？
あとは、問題なく可変から固定に切り替わっているようです。
＞ミッチさん
こんばんは。
うまくいかなかったようで、すいません。
copyright表示は contentの中に入れるか、右カラムの後（br clear="all" のあと）に入れればうまくいくと思います。
それではよろしくお願い致します。
yujiroさん、こんにちは！
できましたよぉぉぉ。「右カラムの後」でうまくいきましたっ。
これで、全部のテンプレートに導入できますぅ。
あ。でも、うち
画像が大きいのとかが
はみ出てしまうところが
多々あるんですょ(^_^;)
修正するの、大変そう?＜画像サイズ
でも、これで固定も楽しめるので嬉しいです。
ありがとうございました！
あー。すいません。
サイン・インして↑のコメントしたんですが、投稿後こちらのアナウンスが文字化けています。
「サイン・インを確認しました、?????????. さん。コメントしてください。」
ご報告まで。
失礼しました。
（?????????. で表示されちゃうのでしょうか！？）
＞ミッチさん
こんばんは。
うまくできたようで良かったです。
ご連絡ありがとうございました。
Typekeyは文字化け対処のカスタマイズを忘れてました。（笑）
登録後の表示は問題ありません。
ご指摘ありがとうございました。
久しぶりに「てすと太郎」でサイン・インしてみます（笑）。
いつもお世話になっております。この度、CSS切替を参考にしてまったく違うスタイルとの切替をしたくスタイルシートを設定しましたが全体的なスタイルが崩れてしまいます。それと、折りたため等も反映されていないようです。元をリキッドタイプにして切替で違うスタイルにしたいと考えております。どのように修正すればいいのでしょうか？ 現在、テンプレートは3.2を使用しております。お手数ですがサポート宜しくお願い致します。
いつもお世話になっております。スタイルシート切替で違うスタイルに切替をしてみたいと思います。また、解説エントリー宜しくお願い致します。
＞panserさん
こんばんは。
お世話になります。
カラム切り替えの件につきましては別途エントリーしたいと思いますのでお待ちください。
なお、固定レイアウトにする場合、カラム幅を超える画像等が配置されていると崩れますので、そのようなものがないか予めご確認ください。
それではよろしくお願い致します。
いつもおせわになっております。スタイルシート切替をテストサイト（http://vita.qee.jp/c/）の上でしてみましたがうまく反映されませんでした。3カラムリキッドを元に3カラムに切替したいと思いトライしてみましたがやはり表示が崩れてしまいます。現在、ＭＴ3.2を使用していますのでこの辺が少しわかりにくいところです。他、折りたたみなどもメイン等でカスタマイズしますが切替しても両方ともに反映されるのでしょうか？あくまでもスタイルシートのみの切替だけになるのでしょうか？お手数ですがサポート宜しくお願いします。
＞panserさん
こんばんは。
ご質問の件ですが、折りたたみについては折りたたみ用のスタイルを利用したままレイアウト切替だけを行うと思いますので、そのままご利用いただけます。
エントリーについてはもう少しお待ちください。
それではどうぞよろしくお願い致します。
いつもお世話になっております。小粋空間さんのようにカラム等に影をつけたいのですがどのようにカスタマイズすればいいのでしょうか？お手数ですがまた、エントリーお願いします。
＞panserさん
こんにちは。
ご質問の件ですが、当サイトで行っているカスタマイズについては計画的にエントリーしていく予定ですので、しばらくお待ちください（まとめて出すとネタがなくなってしまいますので）。
いつもお世話になっています。そうですか? でも、毎日記事ネタがあってすごいですよね 私は、ネタがない時があったり忙しくてなかなか更新できない状態です。 お忙しいのに大変申し訳ないですが、お願いしておりますカスタマイズまた、エントリー宜しくお願い致します。楽しみにしております ではでは宜しくです！
＞panserさん
こんにちは。
日々ネタがある訳ではなく、頂いたご質問のエントリー化がかなり多いです。
執筆意欲の湧くようなご質問は歓迎しますので今後ともよろしくお願い致します。
初めまして
現在私はココログプロを使用しているのですが、iPhone対応を考えMovable Typeを始めました。
また、今後の事を考慮した結果、「小粋空間テンプレート」を使わせていただいています。ありがとうございます。
ところで、「3カラム固定」のテンプレートは左から「小」「大」「小」という表示形式になっているのですが、これを、「大」「小」「小」の配置に変えたいのですが可能でしょうか。
本ブログを探してみたのですが、探しきれずメールをさせていただきました。お忙しいとは思いますが、よろしくお願いいたします。
＞satsukiさん
はじめまして。
テンプレートご利用ありがとうございます。
スタイル対応版（ダウンロードファイル名に「style」が含まれているもの）をご利用であれば、スタイル機能を使ってカラムレイアウトを切り替えることができます。
切り替える方法は、下記の記事の４項の作業を行ない、レイアウトから「layout-three-column-right」を選択してください。
http://www.koikikukan.com/archives/2008/08/19-011313.php
それではよろしくお願い致します。
: March 16, 2009 12:53 AMyujiroさんへ
回答頂きありがとうございます。早速試みもした。バッチリです。
これを基本にして、シコシコと手を入れていきたいと思います。
今後ともよろしくお願いいたします。
