Movable Type テンプレート（for StyleCatcher）
これは、現在公開中の Movable Type テンプレートのスタイルシートの各IDセレクタ・classセレクタをデフォルトテンプレートに合うように変更し、StyleCatcher プラグインが提供する base-weblog.css と併用可能な実装にしたものです。例えばデフォルトの2カラムレイアウトを変更しないのであれば、StyleCatcher の操作のみですべてのテンプレートのスタイルを切り替えることが可能です。 なおカラムレイアウトは固定レイアウトのみ動作を確認しています。テンプレートをリキッドレイアウトにしたり、詳細なカスタマイズを行いたい場合はMovable Type テンプレートをご利用ください。 |
Movable Type のプラグイン StyleCatcher 用のテンプレート（スタイルシートのみ）を公開します。StyleCatcher 自体の設定・利用方法については使い方
* カッコ内は 3.2 で英語版の StyleCatcher プラグインを利用する場合の項目を表示しています。
下記のURLをコピーして StyleCatcher プラグインの「テーマ/リポジトリへのURL: （Theme or Repository URL）」に設定し、「スタイル検索（Find Style）」をクリックしてください。
サムネール画像が表示されたらそれをクリックし、（複数ブログがある場合のみ）右下のプルダウンメニューから適用するブログを選択（Select a Weblog...）、最後に「デザインを適用（Choose this Design）」でクリックします。
成功すると、
新しいテーマを適用しました（Successfully applied new theme selection.）というダイアログが表示されます。これで全体を再構築をすれば新しく選択したスタイルがブログに反映されます。
レイアウト切り替え
公開テンプレートと同様、スタイルシートひとつで1カラム?3カラムまでの各レイアウトに対応しています。
レイアウトは、各テンプレートの body 要素の class属性を書き替えることで行います（詳細はMovable Type テンプレートの１項を参照してください）。
なお公開テンプレートと異なる点として、デフォルトレイアウトのカラム名（IDセレクタ）は左から alpha、beta、gamma と指定するようになっています。またそれぞれに xxx-inner という名称のセレクタが存在します。
インストール後のデフォルトレイアウトは、本文に alpha、右カラムに beta という id 属性が割り当てられています。下記はメインページのHTMLマークアップです。
：
（略）
：
<div id="pagebody">
<div id="pagebody-inner" class="pkg">
<div id="alpha">
<div id="alpha-inner" class="pkg">
：
（左カラム：本文）
：
</div>
</div>
<div id="beta">
<div id="beta-inner" class="pkg">
：
（右カラム：サイドバー）
：
</div>
</div>
</div>
</div>
：
（略）
：これを3カラムに変更するにはHTMLマークアップを下記のように変更します。
：
（略）
：
<div id="pagebody">
<div id="pagebody-inner" class="pkg">
<div id="alpha">
<div id="alpha-inner" class="pkg">
：
（左カラム：サイドバー）
：
</div>
</div>
<div id="beta">
<div id="beta-inner" class="pkg">
：
（中央カラム：本文）
：
</div>
</div>
<div id="gamma">
<div id="gamma-inner" class="pkg">
：
（右カラム：サイドバー）
：
</div>
</div>
</div>
</div>
：
（略）
：まず、右カラム部分の id 属性名 beta と beta-inner を gamma および gamma-inner に変更します。同様に中央カラムの id 属性名 alpha および alpha-inner を beta と beta-inner に修正します。最後に左カラムになる alpha と alpha-inner という id 属性名の div 要素を追加します。
3カラムレイアウトの各カラムと id 属性の対応は下記のようになります。
- alpha/alpha-inner：左カラム（左サイドバー）
- beta/beta-inner：中央カラム（本文）
- gamma/gamma-inner：右カラム（右サイドバー）
2カラム（左サイドバー）に変更する場合は、
- alpha/alpha-inner：左カラム（サイドバー）
- beta/beta-inner：中央カラム（本文）
となるように修正します。
- 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 3.2 デフォルトテンプレートのカスタマイズ from Movable Type 4989
MovableType 3.2 デフォルトテンプレートそのものをカスタマイズし2カラム3カラムを適用させる。 [続きを読む]
≫ StyleCatcher入れてみた from やむやむ
MT-Notifier が うまくいかなかった のと同じ理由で どうしても 導入... [続きを読む]
≫ MovableType 3.2 Base Strict テンプレート from Web標準 Webサイト制作 [アットスタイル]
MovableType 3.2のBase WeblogテンプレートをXHTML 1.0 Strictに修正。小粋空間さんの Movable Type 3.2 テ... [続きを読む]
≫ 小粋空間 from ダイエットアラモード *TIME*
MovableType（MT）でブログを作ってみたいと思ってから、かれこれ１年以... [続きを読む]
≫ 明けましておめでとうございます。 from 取締られ役ブログ
３１日に良い風が吹いたので、大晦日ライドなんて言いながら海に出たのがそもそもの間... [続きを読む]
≫ MT3.2導入中 その2 from SeasonalWind blog
Movable Typeのことを解説している様々なサイトを巡って勉強中です。 コ... [続きを読む]
≫ デザイン変更中 from 別館「S3日記」
ここじゃないけど... 本館とトップページのデザインを変更中です。 テンプレート... [続きを読む]
≫ とりあえず3段組みを導入！ from Kishi-chan.net Blog
小粋空間さんのサイトにStyleCatcher用のテンプレート発見！ということで... [続きを読む]
≫ StyleCatcherプラグインのリポジトリ（MTのテンプレートに困っていませんか？） from 稲葉のコンサルティング裏日誌
MT（MovableType）も随分と便利になったものだ。 インストールが以前と... [続きを読む]
≫ Movabletypeのカスタマイズ from 治療不可
StyleCatcherで使えるデザイン（テンプレート）が欲しくて探してみた。 ... [続きを読む]
≫ 小粋空間のスタイルを改造 from こーいち ぶろぐ
以前にやったMTのphp化の続きです。
今回は、小粋空間さんのテンプレートをStyleCatcherに対応してみました。 [続きを読む]
やってみましたー。これはおもしろいですね。
ただ、どういうわけか サムネイルが並んだ画面の下 Choose this Design のところ、
ぴぃかぶぅ は選べるけど、やむやむは 選択できるようになってないんです。どうしてでしょうね？
＞さえらさん
こんばんは。
お試しありがとうございます。
うーん、これも原因不明です。
システム管理者権限は問題ないでしょうか？
壱さんのCGIのおかげで、いつも投稿に使ってるブログの管理者アカウントが
システム管理者になったんですけどねー。
うち、根本的に、ひとつネジが抜けてんのかな。飼い主に似るっていいますし。（ぇ
＞さえらさん
いえいえ、どこかに不具合があるのではないかと思います。
ウチの自宅サーバはWindowsをスタンドアローンで使っているため、システム管理者権限には無縁です。
すいません。
Choose this Design のところに やむやむが入ってない訳がわかりました。
やむやむで スタイルシートのファイル名を styles-site.css じゃない名前にしてるのが原因でした。
＞さえらさん
こんばんは。
ご連絡ありがとうございました。
なるほど！そういう制約があるのですね。
http://www.koikikukan.com/styles/library
が404になっているようですが？
＞koumeさん
こんばんは。
ご指摘ありがとうございました。
旧サーバからのデータ引継ぎもれでした。申し訳ございません。
復旧は3日以降になりますのであらかじめご了承ください。
こんばんわ。
はじめまして。
ブログを開設しようと思い立ち借りてるサーバーにMovableTypeをインストールしました。
その際に、小粋空間さんのテンプレートを使わせていただきました。分からないことだらけなので小粋空間さんの記事をイロイロ参考にさせていただいてます。
ありがとうございます。
トラックバック、2重で送信しちゃってます（＞＜
再構築時に500エラーが出てしまったのでエントリーの修正の際に再度トラックバックを送信してしまったのが原因かと推測してます。
ご迷惑をおかけして申し訳ありませんm(_ _;)m
＞youtaさん
はじめまして。
テンプレートご利用＆ご連絡ありがとうございます！
ご不明な点がございましたらお気軽にご質問ください。
重複トラックバックは削除しておきました。
どうぞお気遣いなく。
あと勝手ながらBlogPeopleに登録させて頂きました。
それでは今後ともどうぞよろしくお願い致します。
こんばんわ。
BlogPeopleに登録していただいたとのこと。
了解いたしました。
こちらこそ、今後ともよろしくお願いいたしますm(_ _)m
このエントリーへのコメントとしては不適切とは思いましたが
質問させていただいても宜しいでしょうか？
公式サイトのタグリファレンスから標準的なカレンダー表示の
タグを設定してみました。
しかしながら、カレンダーの右端が切れてしまい上手く表示
できません。これを解消するためには何処を修正すれば
良いのでしょうか？
もし、アドバイスいただけるようでしたら、よろしくお願い
いたしますm(_ _)m
＞ようたさん
こんにちは。
ご質問の件につきましては確認でき次第、エントリーとして別途投稿したいと思いますので少々お待ちください。
以上です。
それではどうぞよろしくお願い致します。
初めまして。
今さらですが、３．２(Version 3.2-ja-2)をいれて、StyleCatcher バージョン 1.01を導入した後に、ここをGoogleで発見して下記のライブラリーURLを入れて適用してみました。http://www.koikikukan.com/styles/library
その直後から、トップページのエントリーが表示できなくなり、なぜだか管理ページで新規エントリー をしようとしても保存ボタンが働かない状態に陥りました。
再構築もしてみたのですがさっぱりです。
HTMLでみると、まぁ表示通り
id="alpha-inner" class="pkg"
の中身が空っぽです。
スタイルキャッチャーでsixapart提供のものに戻してみたのですが、治りませんでした。
原因は今のところ不明です。
今となっては古いバージョンなので、対処の必要までないかもしれませんが、状況報告だけしておきます。
＞RED.PINEさん
はじめまして。
ご利用ありがとうございます。
ご質問の件ですが、管理画面の「設定」をクリックして、次のページにある「表示に関する初期設定」で表示数が「７日分」になっていないでしょうか。これを「７エントリー」に変降すれば表示されるのではないかと思います。
それではよろしくお願い致します。
テンプレートをスタイルxxxxでimportしたのですが、、、左サイドには何も表示されなく、カレンダーもないのですが、、、どうすれば巧くテンプレートを取り込むことが出来るのでしょうか？テンプレートのリンクがグルグル同じところを回ってしまうのですがどの場所を選べば最も良いのでしょうか？初心者の失礼な問い合わせ失礼申し上げます。
＞一郎さん
こんばんは。
ご利用ありがとうございます。
ご質問の件ですが、右サイドバーのみの2カラムレイアウトで表示されていれば正常です（スクリーンショットと異なるレイアウトで申し訳ありません）。
これは Movable Type のテンプレート（メインページ等）が2カラムレイアウトで提供されているためです。
3カラムレイアウトにするためには、本エントリーの「レイアウト切り替え」を参考にしてください。
カレンダー等を利用する場合は、3.31-ja をお使いでしたら「Widget Manager プラグインの使い方（その1：デフォルトテンプレートを3カラムにして利用する）」が参考になると思います。
「テンプレートのリンクがグルグル同じところを回ってしまう」につきましては、もう少し具体的な状況をお知らせ頂くか、サイトを拝見させて頂かないと適正な回答ができません。
それではよろしくお願い致します。
はじめまして。
このたびブログを立ち上げるにあたり小粋空間さんのテンプレートを使わせていただきました。また、いろいろなカスタマイズも利用させていただきました。
StyleCatcherでダウンロードしたものに手を加えていったためか、思ったようにいかなかった箇所もありましたが、皆さんの質問（コメント）に対してどのカテゴリーでも常にとても丁寧でわかりやすく回答されているので、行き詰ったときも糸口が見つけられ、どうにかカタチにすることができました。
ブログに関してまったく知識がありませんので、今後も定期的に立ち寄らせていただこうと思っております。どうもありがとうございました。
すみません、URLを入れ忘れました。
＞象支店長さん
はじめまして。
テンプレートご利用＆ご連絡ありがとうございます！
ご不明な点がございましたらお気軽にご質問ください。
あと勝手ながらBlogPeopleに登録させて頂きました。
こちらこそ今後ともどうぞよろしくお願い致します。
スタイル検索がうまくいかないので質問させてください。
「Error: Unknown Content Type: application/x-httpd-php」が出てしまうのですが、当方さくらインターネットでしたので、↓こちらのエントリを参考に設定を試してみました。
Movable Type の PHP化（その2：.html のままPHPを有効にする）
http://www.koikikukan.com/archives/2006/08/29-000231.php
それでもMIMEの認識がうまくいかないようで、解消できません。
情報お持ちでしたらどうぞご指南ください！
＞ケイさん
こんばんは。
ご迷惑おかけして申し訳ございません。当方のサーバ環境設定ミスでした（カスタマイズのための設定が影響していたようです）。
現在は復旧しておりますので再度検索してみてください。
それではよろしくお願い致します。
早急なご対応ありがとうございます！早速試したところ無事適用できました。
非公開サーバーでカスタマイズのテストして、うまくいったら使わせていただきますね。
ありがとうございます。ご提供に感謝。
＞ケイさん
ご連絡ありがとうございました。
ではでは！
はじめまして。
いつもこっそり覗かせて頂いては毎回お世話になっております。
当方MT3.33-jaでブログを作成しております。
色々といじくってしまい訳がわからなくなってしまったので、デフォルトテンプレートに戻し小粋空間さまのスタイルキャッチャーを使用させて頂きました。
が、他のページでは全て2カラムで表示されるのですが、なぜか「最近のエントリー」をクリックすると1カラムになり、表示も崩れてしまいます。
色々と調べてみたのですが原因がわからず右往左往している次第です・・・。
もしアドバイスを頂けるようであれば是非ともご教授願います。宜しくお願い致します。
上記で質問させていただいた者です。
原因はわかりませんが何故か自己解決致しました。
これからも利用させて頂きます。
それでは失礼いたします。
＞KCOさん
はじめまして。
ご返事遅くなって申し訳ありません。
ご質問の件、解消したようでよかったです。
それでは今後ともよろしくお願い致します。
はじめまして。
いつも拝見＆テンプレートを利用させていただき、かなりお世話になっております。
私もコチラのStyleCatcher 用のテンプレートでブログを構築していたのですが、ＩＥ６で閲覧した際右サイドバーのレイアウトが崩れて左サイドバーの下に行ってしまいます。
全て３カラムで使用しており、各エントリーごとのページを見るとエントリーによっては、通常通りのレイアウトになってるものもあれば崩れてるものもあります。
記事内にテーブルを利用したものなどはほとんど崩れている感じですが、全く理由がわかりません。
コチラの『固定3カラムのIE6・後方互換モード対処方法 』等も参照したのですが、何せ初心者なもので・・・・
原因と対策があればお教え頂きたいのでよろしくお願いします。
＞cooさん
はじめまして。
テンプレートご利用ありがとうございます。
ご質問の件ですが、原因は「駒沢公園・・・・・その２“クウのリベンジの巻”」の大きい画像の横幅が、中央カラムの表示領域の横幅を超えているためと思われます。
対処は、画像を小さくすることをお勧めしていますが、styles-site.css の行末に下記の設定を追加すれば、横幅を超えてもレイアウトが崩れなくなります。
.layout-three-column #beta {
overflow-x: hidden;
}それではよろしくお願い致します。
: November 9, 2007 12:58 PM早速試しました。
問題なくレイアウトされました。
本当に初心者の質問で申し訳ありませんでした。。。ありがとうございます。
＞cooさん
こんにちは。
ご連絡ありがとうございました。
無事に直ったようで良かったです。
ではでは！
: November 13, 2007 10:06 AM
