TopMovable Type > バージョン別 > 4.2 > Movable Type 4.2 テンプレートセット(フッタ付きリキッドレイアウト対応)
News
各種ブログテンプレート
2008年9月 2日

エントリー本文

Movable Type 4.2 テンプレートセット(フッタ付きリキッドレイアウト対応)

Posted at September 2,2008 1:55 AM
Category:[4.2, テンプレートセット]
Tag:[, , ]

Movable Type 4.2 用のテンプレートセット(スタイル対応版)にフッタ付きリキッドレイアウトを追加したバージョンの配布を開始します。

これまで配布していたテンプレートセットのリキッドレイアウトは、CSSレイアウトの構造上、背景つきのフッタを表示させると、フッタの表示がサイドバーに重なってしまうという欠点があったため、簡易なテキストのみをフッタとして中央カラムに表示していました。

今回、リキッドレイアウトについては、ネガティブマージンを利用したCSSレイアウトに変更したので、背景つきのフッタもサイドバーに重ならずに表示させることができると思います。

今回追加したリキッドレイアウトは以下の 3 種類です。

3カラムリキッド(左右サイドバー)
3カラムリキッド(左右サイドバー)

3カラムリキッド(右サイドバー)
3カラムリキッド(右サイドバー)

2カラムリキッド(右サイドバー)
2カラムリキッド(右サイドバー)

表示は、Windows XP + IE6/Firefox 2/Oprea 9/Safari 3 で確認しています。

なお、ネガティブマージンによるリキッドレイアウトについてはファイルサイズが大きくなると動作が重たくなる可能性があります。以前、当ブログでもこの手法を用いたレイアウトで一度デザインを変更したのですが、IE6 でファイルサイズの大きなページでは実用に耐える表示ができなかったため、一週間ほどで取りやめた経緯があります。

そういう経緯に加え、CSSを作りこむ余裕もなく、リキッドレイアウト+ネガティブマージンによるフッタ付きのCSSレイアウトについては積極的ではなかったのですが、IE7 や FireFox、Safari などのモダンブラウザが主流になり、それらでは問題なく表示できるはずですので、公開することにします。
ただし、動作の保障は致しかねますので、ご利用に関してはご自身の責任でお願い致します。

1.テンプレートセットのダウンロード

「4.2 スタイル対応版(フッタ付きリキッドレイアウト対応)」のテンプレートセットアーカイブを、下記のページからダウンロードしてください。

Movable Type テンプレート

以下、テンプレートセットの利用方法です。

2.テンプレートセットのインストール

ダウンロードしたテンプレートセットアーカイブを解凍し、中にある plugins 配下にある KoikikukanTemplateSet フォルダを Movable Type の plugins フォルダに丸ごとアップロードしてください。

また、mt-static/plugins 配下にある KoikikukanTemplateSet フォルダを Movable Type の mt-static/plugins フォルダに丸ごとアップロードしてください。

「システムメニュー」→「プラグイン」でプラグインの一覧が表示されるので、「KoikikukanTemplateSet」が表示されていればインストールOKです。

プラグインの一覧

3.テンプレートセットの入れ替え

ここではインストールされた状態で入れ替える方法を説明します。

ブログ管理画面より「デザイン」→「テンプレート」をクリック。

ブログ管理画面

右下にある「ブログのテンプレートを初期化」をクリック。

ブログのテンプレートを初期化

「新しいテンプレートセットを適用」を選択し、セレクトボックスから「小粋空間テンプレートセット」を選択。「既存のテンプレートのバックアップを作成する」をチェックすると、入れ替え前のテンプレートのバックアップがとれます。
選択後、右下の「次へ」をクリック。

新しいテンプレートセットを適用

「確認」をクリック。これでテンプレートセットの入れ替えが開始します。

テンプレートセットの入れ替え開始

「テンプレートの初期化を完了しました。」が表示されれば完了です。

テンプレートの初期化完了

サイトの再構築アイコンをクリック。

サイトの再構築

「すべてのファイル」を選択して「再構築」をクリック。

再構築

「すべてのファイルを再構築しました。 」が表示されたら再構築完了です。

再構築完了

前の画面の「サイトを見る」をクリックするか、ブログ管理画面の「サイト表示」のアイコンをクリック。

サイト表示

当サイトのテンプレートセットのデザインで表示されれば完了です。デフォルトデザインのままであればブラウザをリロードしてください。

完了

4.スタイルの切り替え

ここではカラムレイアウトを切り替える方法を説明します。

ブログ管理画面より「デザイン」→「スタイル」をクリック。

ブログ管理画面

「既定のスタイル」の左側にある + マークのアイコンをクリック(「既定のスタイル」の部分は選択状態によって異なります)。

アイコンをクリック

開いたウィンドウに小粋空間テンプレートセットをインストールしたスタティックディレクトリのテーマURLを入力。

テーマURLを入力

具体的には、次のような URL になります。

http://[user-domain]/mt-static/plugins/KoikikukanTemplateSet/themes/

赤色の部分は、MT のスタティックディレクトリ(mt-static ディレクトリがある位置)までの URL を設定してください。

正しい URL であれば、次のような画面になるので、表示されたサムネイル画像をクリック。

サムネイル画像

右側に大きな画像が表示され、その下にレイアウト選択用のセレクトボックスが表示されます。

セレクトボックス

リキッドレイアウトは次のものから選択してください。

  • 3カラムリキッド(左右サイドバー):layout-three-column-liquid
  • 3カラムリキッド(右サイドバー):layout-three-column-liquid-right
  • 2カラムリキッド(右サイドバー):layout-two-column-liquid-right

テンプレート

選択後、「デザインを適用」をクリック。

デザインを適用1

「テーマを適用しました。レイアウトも変更されたので、再構築する必要があります。 設定を有効にするために再構築してください。」と表示されるので、ブログ全体を再構築してください。

デザインを適用2

スタイルが切り替わりました。サイドバーの内容もテンプレート編集画面で入れ替える必要はありません。

切り替え後のテンプレート

5.スタイルの編集

スタイルを変更する場合は、インデックステンプレートにある、「スタイルシート(styles-site.css)」を編集してください。

Posted by yujiro
関連記事
人気エントリー
Hatena Hot Entries
Hatena Entries
トラックバックURL


トラックバック

MovableType 4.2 テンプレートセット配布開始 from BCLRADIO.COM
小粋空間さんでリキッドレイアウトが追加されたバージョンが配布されていたので早速ダ... [続きを読む]

Tracked on September 3, 2008 11:16 PM
コメント

yujiro様、こんにちは。
テンプレート、早速使わせて頂いています。
ところで、昨夜悶々とコメントしていたのは、php化したらカレンダーやBlogMascotが消えてしまったからなのです。
マニュアルをみながら、でもやっぱりオッチョコチョイだから、Blogのindex.htmlをFTPで削除するのを間違えて、MT4のindex.htmlを削除していたんです。
それで、表示出来ない・・・と。
地球を5周回ったような感じで、穴があったら入りたい気分です。
それでもまだ解決していないんです。
こちらのテンプレートなのですが、Firefoxだとウィンドウの下までブルーの・・・何て言うのかな?帯みたいなのが表示されるのですが、IEだとサイドバーの、もう表示するものないよっていうところになると切れてしまうのですが何故でしょうか?
教えてください。
スミマセン、質問ばかりで。

[1] Posted by tsuduku : September 2, 2008 5:28 PM

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

[2] Posted by Anonymous : September 2, 2008 11:09 PM

>tsudukuさん
こんばんは。
ご指摘ありがとうございます。
事象を(多分)修正致しましたので、お手数ですが再度ダウンロードしてお試し頂けますでしょうか。ファイル名は「template_4_2_utf8_1_4_style_liquid」です。
それではよろしくお願い致します。

[3] Posted by yujiro Author Profile Page : September 3, 2008 12:05 AM

yujiro様、こんにちは。

こちらのマニュアルに従ってテンプレートを変えることはできたのですが、
スタイル変更がうまくいかず、お問い合わせいたしました。

「規定のスタイル」から小粋空間の小粋空間テンプレートセットをインストールしたスタティックディレクトリのテーマURLを入力するところで、

「Index of /mt/mt-static/plugins/KoikikukanTemplateSet」

というエラーが出て、テンプレートセットが表示されないのですが、
URLエラーでしょうか・・・。
お答えいただければ幸いです。

[4] Posted by たまめ : November 7, 2008 10:11 AM

>たまめさん
こんばんは。
ご質問の件ですが、入力したURL「~/KoikikukanTemplateSet」の後方に「/themes/」を設定して再度お試し頂けますでしょうか。
つまり設定内容は、

http://[ドメインを設定]/mt/mt-static/plugins/KoikikukanTemplateSet/themes/

という風になります。

それでも表示されない場合は別の設定方法を説明致しますので、お手数ですが再度ご連絡ください、
それではよろしくお願い致します。

[5] Posted by yujiro Author Profile Page : November 10, 2008 1:21 AM

yujiro様、こんにちは。

あれからお教えいただいたとおりに操作しましたら、
テンプレートセットがきちんと表示されました!

ありがとうございました。

[6] Posted by たまめ : November 17, 2008 5:18 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
Now loading...
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
クリエイティブ・コモンズ・ライセンス
 
List Me!