小粋空間: 3カラム可変と3カラム固定を切り替える

Top ＞ Movable Type ＞テンプレート＞ 3カラム可変と3カラム固定を切り替える

News

各種ブログテンプレート

2005年7月13日

エントリー本文

3カラム可変と3カラム固定を切り替える

Posted at July 13,2005 11:51 PM
Category：[CSS, テンプレート]
Tag：[CSS, Customize, StyleSwitcher, Template]

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 があります。

A List Apart：Alternative Style: Working With Alternate Style Sheets

記事の下の方に「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であれば更新ボタンをクリックしてみてください。

Posted by yujiro

« もぬけのから | Main | 言及リンクについて »

この記事を読んだ人はこんな記事も読んでいます

人気エントリー

Hatena Hot Entries

Hatena Entries

トラックバックURL

このエントリーのトラックバックURL:

このブログは重複トラックバック防止プラグインにより、同一エントリーに対する同一のトラックバックは登録されないようにしています（記事のタイトルまたは記事の概要が異なる場合は登録されます）。

トラックバック

≫ 3カラム可変と3カラム固定を切り替える from eizo slash blog
●3カラム可変と3カラム固定を切り替える：小粋空間 3カラム可変のテンプレートを... [続きを読む]

Tracked on July 14, 2005 2:46 PM

≫ スタイル追加（固定3カラム） from SWEET WATER Web Server
久しぶりにスタイルシートを追加しました。題名の通り、固定3カラムに挑戦してたん... [続きを読む]

Tracked on July 15, 2005 10:57 AM

≫ [喜] Bフレッツ導入記録・１?プチ・ウェブと私 from 喜怒哀楽
いよいよ私の住む町にもBフレッツが来るんですよ、奥さん！ 8月1日より以前より申し込んでいた人達から随時工事、Bフレッツ導入らしいのですが、実は、私の住む環境が... [続きを読む]

Tracked on July 26, 2005 12:32 AM

≫ CSS切り替え from Legal Pad
モニタを高解像度にして見ている人（自分）や、OSXでアンチエイリアスのかかった文字だと読んでいてちょっと疲れるので、CSSを切り替えてエントリーのテキストサイズ... [続きを読む]

Tracked on September 6, 2005 4:23 PM

≫ テンプレートを3カラム可変から固定へ変更 from Mistgrass Weblog
　小粋空間さんの3カラム可変と3カラム固定を切り替えるを参考にさせていただき、タ... [続きを読む]

Tracked on November 14, 2005 2:42 PM

yujiroさん、こんばんは。
右上のボタンで試してみましたー。
（というか楽しく遊んでしまいました）

すごいですね、これ！
3カラム⇔2カラムも出来ちゃったりしたら、もっとすごいなーと思ったのは私だけでしょうか？（笑）

[1] Posted by のどあめ : July 15, 2005 1:15 AM

＞のどあめさん
こんばんは。
お試しくださりありがとうございます。

3⇔2も技術的には可能ですよ。（笑）

[2] Posted by yujiro : July 15, 2005 1:44 AM

yujiroさん、こんにちはー。

実は、固定3カラムにも興味があったので、この切り替え方法をやってみようと挑戦中です。

可変用のスタイルシートに後から付け足した部分も固定用スタイルシートに持ってこないといけないのですよね？

[3] Posted by Anonymous : July 16, 2005 12:21 PM

あれ。スミマセン。
↑は、私のコメントです。
(^_^;)

[4] Posted by ミッチ : July 16, 2005 12:22 PM

＞ミッチさん
こんばんは。
ご利用ありがとうございます。

ご質問の件ですが、一部分だけ変更するのであれば、後から付け加えるテンプレートを

@charset "utf-8";
@import "styles-site.css"; ← 元のスタイルを引き込む
　　　　　：
新しいスタイルの変更部分（*1）だけを記述
　　　　　：

としても大丈夫と思います。

*1：body/#box/#content/#links-right/#links-right-box/#links-left/#links-left-box 等です（もれていたらすいません）。

以上です。
それではよろしくお願い致します。

[5] Posted by yujiro : July 17, 2005 10:07 PM

ありがとうございました。
*1だけで新しいスタイルシートを記述し
@inportも付けてみましたが、うまくいきませんでした。orz
（両サイドバーがわくの外へ出ちゃう感じでした）

結局付け加えた部分をよーく探し出し新しいスタイルシートへ付け加えました。

カテゴリーアーカイブのみ変更できるようにしております。

一つだけ。
コピーライト表示が中央下ではなく、右上に来てしまうのはなぜなのでしょう？
なにか書き忘れているのかしら？

あとは、問題なく可変から固定に切り替わっているようです。

[6] Posted by ミッチ : July 18, 2005 9:58 AM

＞ミッチさん
こんばんは。
うまくいかなかったようで、すいません。

copyright表示は contentの中に入れるか、右カラムの後（br clear="all" のあと）に入れればうまくいくと思います。

それではよろしくお願い致します。

[7] Posted by yujiro : July 20, 2005 12:50 AM

yujiroさん、こんにちは！

できましたよぉぉぉ。「右カラムの後」でうまくいきましたっ。

これで、全部のテンプレートに導入できますぅ。

あ。でも、うち
画像が大きいのとかが
はみ出てしまうところが
多々あるんですょ(^_^;)

修正するの、大変そう?＜画像サイズ

でも、これで固定も楽しめるので嬉しいです。
ありがとうございました！

[8] Posted by ミッチ : July 21, 2005 9:30 AM

あー。すいません。

サイン・インして↑のコメントしたんですが、投稿後こちらのアナウンスが文字化けています。

「サイン・インを確認しました、?????????. さん。コメントしてください。」

ご報告まで。
失礼しました。
（?????????. で表示されちゃうのでしょうか！？）

[9] Posted by ミッチ : July 21, 2005 9:39 AM

＞ミッチさん
こんばんは。
うまくできたようで良かったです。
ご連絡ありがとうございました。

Typekeyは文字化け対処のカスタマイズを忘れてました。（笑）
登録後の表示は問題ありません。
ご指摘ありがとうございました。

久しぶりに「てすと太郎」でサイン・インしてみます（笑）。

[10] Posted by yujiro : July 21, 2005 8:22 PM

いつもお世話になっております。この度、CSS切替を参考にしてまったく違うスタイルとの切替をしたくスタイルシートを設定しましたが全体的なスタイルが崩れてしまいます。それと、折りたため等も反映されていないようです。元をリキッドタイプにして切替で違うスタイルにしたいと考えております。どのように修正すればいいのでしょうか？　現在、テンプレートは3.2を使用しております。お手数ですがサポート宜しくお願い致します。

[11] Posted by panser : April 5, 2006 5:49 PM

いつもお世話になっております。スタイルシート切替で違うスタイルに切替をしてみたいと思います。また、解説エントリー宜しくお願い致します。

[12] Posted by panser : April 7, 2006 8:52 AM

＞panserさん
こんばんは。
お世話になります。
カラム切り替えの件につきましては別途エントリーしたいと思いますのでお待ちください。
なお、固定レイアウトにする場合、カラム幅を超える画像等が配置されていると崩れますので、そのようなものがないか予めご確認ください。
それではよろしくお願い致します。

[13] Posted by yujiro : April 7, 2006 9:00 PM

いつもおせわになっております。スタイルシート切替をテストサイト（http://vita.qee.jp/c/）の上でしてみましたがうまく反映されませんでした。3カラムリキッドを元に3カラムに切替したいと思いトライしてみましたがやはり表示が崩れてしまいます。現在、ＭＴ3.2を使用していますのでこの辺が少しわかりにくいところです。他、折りたたみなどもメイン等でカスタマイズしますが切替しても両方ともに反映されるのでしょうか？あくまでもスタイルシートのみの切替だけになるのでしょうか？お手数ですがサポート宜しくお願いします。

[14] Posted by panser : April 8, 2006 5:16 PM

＞panserさん
こんばんは。
ご質問の件ですが、折りたたみについては折りたたみ用のスタイルを利用したままレイアウト切替だけを行うと思いますので、そのままご利用いただけます。
エントリーについてはもう少しお待ちください。
それではどうぞよろしくお願い致します。

[15] Posted by yujiro : April 9, 2006 12:11 AM

いつもお世話になっております。小粋空間さんのようにカラム等に影をつけたいのですがどのようにカスタマイズすればいいのでしょうか？お手数ですがまた、エントリーお願いします。

[16] Posted by panser : April 9, 2006 12:46 AM

＞panserさん
こんにちは。
ご質問の件ですが、当サイトで行っているカスタマイズについては計画的にエントリーしていく予定ですので、しばらくお待ちください（まとめて出すとネタがなくなってしまいますので）。

[17] Posted by yujiro : April 10, 2006 11:28 AM

いつもお世話になっています。そうですか?　でも、毎日記事ネタがあってすごいですよね　私は、ネタがない時があったり忙しくてなかなか更新できない状態です。　お忙しいのに大変申し訳ないですが、お願いしておりますカスタマイズまた、エントリー宜しくお願い致します。楽しみにしております　ではでは宜しくです！

[18] Posted by panser : April 11, 2006 3:11 PM

＞panserさん
こんにちは。
日々ネタがある訳ではなく、頂いたご質問のエントリー化がかなり多いです。
執筆意欲の湧くようなご質問は歓迎しますので今後ともよろしくお願い致します。

[19] Posted by yujiro : April 11, 2006 5:40 PM

初めまして

現在私はココログプロを使用しているのですが、iPhone対応を考えMovable Typeを始めました。

また、今後の事を考慮した結果、「小粋空間テンプレート」を使わせていただいています。ありがとうございます。

ところで、「3カラム固定」のテンプレートは左から「小」「大」「小」という表示形式になっているのですが、これを、「大」「小」「小」の配置に変えたいのですが可能でしょうか。

本ブログを探してみたのですが、探しきれずメールをさせていただきました。お忙しいとは思いますが、よろしくお願いいたします。

[20] Posted by satsuki : March 9, 2009 12:26 PM

＞satsukiさん
はじめまして。
テンプレートご利用ありがとうございます。
スタイル対応版（ダウンロードファイル名に「style」が含まれているもの）をご利用であれば、スタイル機能を使ってカラムレイアウトを切り替えることができます。
切り替える方法は、下記の記事の４項の作業を行ない、レイアウトから「layout-three-column-right」を選択してください。

http://www.koikikukan.com/archives/2008/08/19-011313.php

それではよろしくお願い致します。

[21] Posted by yujiro

: March 16, 2009 12:53 AM

yujiroさんへ

回答頂きありがとうございます。早速試みもした。バッチリです。
これを基本にして、シコシコと手を入れていきたいと思います。

今後ともよろしくお願いいたします。

[22] Posted by satsuki : March 16, 2009 7:26 PM

コメントする

greeting

名前（N）: *必須

メールアドレス（M）:

URL（U）:

情報を保存する？

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

コメント（C）:

[サインインしない場合はここにCAPTCHAを表示します]

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

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

小粋空間 - a cheap joke and a play on words site

3カラム可変と3カラム固定を切り替える