Movable Type テンプレート(for StyleCatcher)

Movable Type テンプレート(for StyleCatcher)

Posted at October 11,2005 11:55 PM
Tag:[3.2-ja, MovableType, Repository, StyleCatcher]

テンプレートライブラリMovable Type のプラグイン StyleCatcher 用のテンプレート(スタイルシートのみ)を公開します。StyleCatcher 自体の設定・利用方法についてはStyleCatcher によるスタイル変更方法を参考にしてください。

これは、現在公開中の Movable Type テンプレートのスタイルシートの各IDセレクタ・classセレクタをデフォルトテンプレートに合うように変更し、StyleCatcher プラグインが提供する base-weblog.css と併用可能な実装にしたものです。例えばデフォルトの2カラムレイアウトを変更しないのであれば、StyleCatcher の操作のみですべてのテンプレートのスタイルを切り替えることが可能です。

なおカラムレイアウトは固定レイアウトのみ動作を確認しています。テンプレートをリキッドレイアウトにしたり、詳細なカスタマイズを行いたい場合はMovable Type テンプレートをご利用ください。

使い方

* カッコ内は 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 テンプレートの1項を参照してください)。
なお公開テンプレートと異なる点として、デフォルトレイアウトのカラム名(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:中央カラム(本文)

となるように修正します。

関連記事
zenback
人気エントリー
トラックバックURL


トラックバック

MovableType 3.2 デフォルトテンプレートのカスタマイズ from Movable Type 4989
MovableType 3.2 デフォルトテンプレートそのものをカスタマイズし2カラム3カラムを適用させる。 [続きを読む]

Tracked on October 12, 2005 7:13 PM

StyleCatcher入れてみた from やむやむ
MT-Notifier が うまくいかなかった のと同じ理由で どうしても 導入... [続きを読む]

Tracked on October 19, 2005 1:53 PM

MovableType 3.2 Base Strict テンプレート from Web標準 Webサイト制作 [アットスタイル]
MovableType 3.2のBase WeblogテンプレートをXHTML 1.0 Strictに修正。小粋空間さんの Movable Type 3.2 テ... [続きを読む]

Tracked on October 24, 2005 10:37 AM

小粋空間 from ダイエットアラモード *TIME*
MovableType(MT)でブログを作ってみたいと思ってから、かれこれ1年以... [続きを読む]

Tracked on December 15, 2005 7:50 AM

明けましておめでとうございます。 from 取締られ役ブログ
31日に良い風が吹いたので、大晦日ライドなんて言いながら海に出たのがそもそもの間... [続きを読む]

Tracked on January 3, 2006 10:40 PM

MT3.2導入中 その2 from SeasonalWind blog
Movable Typeのことを解説している様々なサイトを巡って勉強中です。 コ... [続きを読む]

Tracked on January 24, 2006 10:06 AM

デザイン変更中 from 別館「S3日記」
ここじゃないけど... 本館とトップページのデザインを変更中です。 テンプレート... [続きを読む]

Tracked on February 12, 2006 2:10 PM

とりあえず3段組みを導入! from Kishi-chan.net Blog
小粋空間さんのサイトにStyleCatcher用のテンプレート発見!ということで... [続きを読む]

Tracked on November 24, 2006 2:26 AM

StyleCatcherプラグインのリポジトリ(MTのテンプレートに困っていませんか?) from 稲葉のコンサルティング裏日誌
MT(MovableType)も随分と便利になったものだ。 インストールが以前と... [続きを読む]

Tracked on January 31, 2007 7:24 AM

Movabletypeのカスタマイズ from 治療不可
StyleCatcherで使えるデザイン(テンプレート)が欲しくて探してみた。 ... [続きを読む]

Tracked on July 14, 2007 6:11 PM

小粋空間のスタイルを改造 from こーいち ぶろぐ
以前にやったMTのphp化の続きです。 今回は、小粋空間さんのテンプレートをStyleCatcherに対応してみました。 [続きを読む]

Tracked on September 22, 2008 1:11 PM
コメント

やってみましたー。これはおもしろいですね。
ただ、どういうわけか サムネイルが並んだ画面の下 Choose this Design のところ、
ぴぃかぶぅ は選べるけど、やむやむは 選択できるようになってないんです。どうしてでしょうね?

[1] Posted by さえら : October 19, 2005 1:28 PM

>さえらさん
こんばんは。
お試しありがとうございます。

うーん、これも原因不明です。
システム管理者権限は問題ないでしょうか?

[2] Posted by yujiro : October 20, 2005 1:57 AM

壱さんのCGIのおかげで、いつも投稿に使ってるブログの管理者アカウントが
システム管理者になったんですけどねー。
うち、根本的に、ひとつネジが抜けてんのかな。飼い主に似るっていいますし。(ぇ

[3] Posted by さえら : October 20, 2005 4:26 AM

>さえらさん
いえいえ、どこかに不具合があるのではないかと思います。

ウチの自宅サーバはWindowsをスタンドアローンで使っているため、システム管理者権限には無縁です。
すいません。

[4] Posted by yujiro : October 21, 2005 1:18 AM

Choose this Design のところに やむやむが入ってない訳がわかりました。
やむやむで スタイルシートのファイル名を styles-site.css じゃない名前にしてるのが原因でした。

[5] Posted by さえら : October 21, 2005 10:44 AM

>さえらさん
こんばんは。
ご連絡ありがとうございました。
なるほど!そういう制約があるのですね。

[6] Posted by yujiro : October 22, 2005 1:02 AM

http://www.koikikukan.com/styles/library
が404になっているようですが?

[7] Posted by koume : January 1, 2006 4:29 PM

>koumeさん
こんばんは。
ご指摘ありがとうございました。
旧サーバからのデータ引継ぎもれでした。申し訳ございません。
復旧は3日以降になりますのであらかじめご了承ください。

[8] Posted by yujiro : January 2, 2006 2:31 AM

こんばんわ。
はじめまして。

ブログを開設しようと思い立ち借りてるサーバーにMovableTypeをインストールしました。
その際に、小粋空間さんのテンプレートを使わせていただきました。分からないことだらけなので小粋空間さんの記事をイロイロ参考にさせていただいてます。
ありがとうございます。

トラックバック、2重で送信しちゃってます(><
再構築時に500エラーが出てしまったのでエントリーの修正の際に再度トラックバックを送信してしまったのが原因かと推測してます。
ご迷惑をおかけして申し訳ありませんm(_ _;)m

[9] Posted by youta : January 24, 2006 10:31 PM

>youtaさん
はじめまして。
テンプレートご利用&ご連絡ありがとうございます!
ご不明な点がございましたらお気軽にご質問ください。
重複トラックバックは削除しておきました。
どうぞお気遣いなく。

あと勝手ながらBlogPeopleに登録させて頂きました。
それでは今後ともどうぞよろしくお願い致します。

[10] Posted by yujiro : January 25, 2006 12:22 AM

こんばんわ。
BlogPeopleに登録していただいたとのこと。
了解いたしました。
こちらこそ、今後ともよろしくお願いいたしますm(_ _)m

このエントリーへのコメントとしては不適切とは思いましたが
質問させていただいても宜しいでしょうか?
公式サイトのタグリファレンスから標準的なカレンダー表示の
タグを設定してみました。
しかしながら、カレンダーの右端が切れてしまい上手く表示
できません。これを解消するためには何処を修正すれば
良いのでしょうか?
もし、アドバイスいただけるようでしたら、よろしくお願い
いたしますm(_ _)m

[11] Posted by ようた : January 25, 2006 10:43 PM

>ようたさん
こんにちは。
ご質問の件につきましては確認でき次第、エントリーとして別途投稿したいと思いますので少々お待ちください。

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

[12] Posted by yujiro : January 27, 2006 11:20 AM

初めまして。
今さらですが、3.2(Version 3.2-ja-2)をいれて、StyleCatcher バージョン 1.01を導入した後に、ここをGoogleで発見して下記のライブラリーURLを入れて適用してみました。http://www.koikikukan.com/styles/library

その直後から、トップページのエントリーが表示できなくなり、なぜだか管理ページで新規エントリー をしようとしても保存ボタンが働かない状態に陥りました。
再構築もしてみたのですがさっぱりです。
HTMLでみると、まぁ表示通り
id="alpha-inner" class="pkg"
の中身が空っぽです。

スタイルキャッチャーでsixapart提供のものに戻してみたのですが、治りませんでした。
原因は今のところ不明です。

今となっては古いバージョンなので、対処の必要までないかもしれませんが、状況報告だけしておきます。

[13] Posted by RED.PINE : July 17, 2006 2:42 PM

>RED.PINEさん
はじめまして。
ご利用ありがとうございます。
ご質問の件ですが、管理画面の「設定」をクリックして、次のページにある「表示に関する初期設定」で表示数が「7日分」になっていないでしょうか。これを「7エントリー」に変降すれば表示されるのではないかと思います。

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

[14] Posted by yujiro : July 18, 2006 1:38 PM

テンプレートをスタイルxxxxでimportしたのですが、、、左サイドには何も表示されなく、カレンダーもないのですが、、、どうすれば巧くテンプレートを取り込むことが出来るのでしょうか?テンプレートのリンクがグルグル同じところを回ってしまうのですがどの場所を選べば最も良いのでしょうか?初心者の失礼な問い合わせ失礼申し上げます。

[15] Posted by 一郎 : July 26, 2006 11:47 PM

>一郎さん
こんばんは。
ご利用ありがとうございます。
ご質問の件ですが、右サイドバーのみの2カラムレイアウトで表示されていれば正常です(スクリーンショットと異なるレイアウトで申し訳ありません)。
これは Movable Type のテンプレート(メインページ等)が2カラムレイアウトで提供されているためです。
3カラムレイアウトにするためには、本エントリーの「レイアウト切り替え」を参考にしてください。

カレンダー等を利用する場合は、3.31-ja をお使いでしたら「Widget Manager プラグインの使い方(その1:デフォルトテンプレートを3カラムにして利用する)」が参考になると思います。

「テンプレートのリンクがグルグル同じところを回ってしまう」につきましては、もう少し具体的な状況をお知らせ頂くか、サイトを拝見させて頂かないと適正な回答ができません。

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

[16] Posted by yujiro : July 27, 2006 2:14 AM

はじめまして。
このたびブログを立ち上げるにあたり小粋空間さんのテンプレートを使わせていただきました。また、いろいろなカスタマイズも利用させていただきました。
StyleCatcherでダウンロードしたものに手を加えていったためか、思ったようにいかなかった箇所もありましたが、皆さんの質問(コメント)に対してどのカテゴリーでも常にとても丁寧でわかりやすく回答されているので、行き詰ったときも糸口が見つけられ、どうにかカタチにすることができました。
ブログに関してまったく知識がありませんので、今後も定期的に立ち寄らせていただこうと思っております。どうもありがとうございました。

[17] Posted by 象支店長 : August 10, 2006 7:48 PM

すみません、URLを入れ忘れました。

[18] Posted by 象支店長 : August 10, 2006 7:50 PM

>象支店長さん
はじめまして。
テンプレートご利用&ご連絡ありがとうございます!
ご不明な点がございましたらお気軽にご質問ください。

あと勝手ながらBlogPeopleに登録させて頂きました。
こちらこそ今後ともどうぞよろしくお願い致します。

[19] Posted by yujiro : August 11, 2006 1:56 AM

スタイル検索がうまくいかないので質問させてください。
「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の認識がうまくいかないようで、解消できません。
情報お持ちでしたらどうぞご指南ください!

[20] Posted by ケイ : September 2, 2006 3:03 AM

>ケイさん
こんばんは。
ご迷惑おかけして申し訳ございません。当方のサーバ環境設定ミスでした(カスタマイズのための設定が影響していたようです)。
現在は復旧しておりますので再度検索してみてください。
それではよろしくお願い致します。

[21] Posted by yujiro : September 4, 2006 12:40 AM

早急なご対応ありがとうございます!早速試したところ無事適用できました。
非公開サーバーでカスタマイズのテストして、うまくいったら使わせていただきますね。
ありがとうございます。ご提供に感謝。

[22] Posted by ケイ : September 4, 2006 11:20 PM

>ケイさん
ご連絡ありがとうございました。
ではでは!

[23] Posted by yujiro : September 5, 2006 6:01 PM

はじめまして。
いつもこっそり覗かせて頂いては毎回お世話になっております。

当方MT3.33-jaでブログを作成しております。
色々といじくってしまい訳がわからなくなってしまったので、デフォルトテンプレートに戻し小粋空間さまのスタイルキャッチャーを使用させて頂きました。
が、他のページでは全て2カラムで表示されるのですが、なぜか「最近のエントリー」をクリックすると1カラムになり、表示も崩れてしまいます。
色々と調べてみたのですが原因がわからず右往左往している次第です・・・。

もしアドバイスを頂けるようであれば是非ともご教授願います。宜しくお願い致します。

[24] Posted by KCO : November 12, 2006 3:37 PM

上記で質問させていただいた者です。
原因はわかりませんが何故か自己解決致しました。
これからも利用させて頂きます。
それでは失礼いたします。

[25] Posted by KCO : November 14, 2006 8:29 PM

>KCOさん
はじめまして。
ご返事遅くなって申し訳ありません。
ご質問の件、解消したようでよかったです。
それでは今後ともよろしくお願い致します。

[26] Posted by yujiro : November 14, 2006 10:26 PM

はじめまして。
いつも拝見&テンプレートを利用させていただき、かなりお世話になっております。
私もコチラのStyleCatcher 用のテンプレートでブログを構築していたのですが、IE6で閲覧した際右サイドバーのレイアウトが崩れて左サイドバーの下に行ってしまいます。
全て3カラムで使用しており、各エントリーごとのページを見るとエントリーによっては、通常通りのレイアウトになってるものもあれば崩れてるものもあります。
記事内にテーブルを利用したものなどはほとんど崩れている感じですが、全く理由がわかりません。
コチラの『固定3カラムのIE6・後方互換モード対処方法 』等も参照したのですが、何せ初心者なもので・・・・
原因と対策があればお教え頂きたいのでよろしくお願いします。

[27] Posted by coo : November 9, 2007 11:53 AM

>cooさん
はじめまして。
テンプレートご利用ありがとうございます。
ご質問の件ですが、原因は「駒沢公園・・・・・その2“クウのリベンジの巻”」の大きい画像の横幅が、中央カラムの表示領域の横幅を超えているためと思われます。

対処は、画像を小さくすることをお勧めしていますが、styles-site.css の行末に下記の設定を追加すれば、横幅を超えてもレイアウトが崩れなくなります。

.layout-three-column #beta {
    overflow-x: hidden;
}

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

[28] Posted by yujiro logo : November 9, 2007 12:58 PM

早速試しました。
問題なくレイアウトされました。

本当に初心者の質問で申し訳ありませんでした。。。ありがとうございます。

[29] Posted by coo : November 12, 2007 8:10 PM

>cooさん
こんにちは。
ご連絡ありがとうございました。
無事に直ったようで良かったです。
ではでは!

[30] Posted by yujiro logo : November 13, 2007 10:06 AM
コメントする
greeting

*必須

*必須(非表示)


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

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

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

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