Movable Type 備忘録

ウェブページのテンプレートを切り替える２

Dec082007
Author: bzbell
Categories: Customize
Tags: 4.0, Web Page

Next Page: CSS で外部リンクのみアイコン表示
Prev Page: prototype で Five Star Rating( Starbox )

こんばんわ^^

最近、食品・飲食関係の不祥事!? が多いですね。
昨日お友達と飲みに行って話題になったこと。それは･･･吉牛やケンタ、ミスドのお話。

わたしは学生の頃ファミレスでバイトしてました。
厨房の人がから揚げを床に落としたのを目撃して、何気なくその後どうするのか見てたら、普通に火( 油 )を通して( 殺菌 !? )お皿に盛ったときは、世間を知らなかったわたしにとってはかなりショックでした Σ(￣ロ￣lll) ガビーーン!!

しかも、それってわたしの賄いだったのでムカついて店長にチクったら、その人バイトをクビになっちゃいました (●´∀｀●) まぁ、昔の話ですけど。

前フリが長くなりましたが、この場でホントにわたしが言いたかったことは、周りから世間知らずと言われるわたしですが、この度 '炎上コンサルタント' なんていう職業!? 肩書き!? があるのを初めて知ったことです。Do You Know!?

どうでもいいことですね･･･すいません (;￣∇￣A

さて、訪問者さんからのご質問で、ウェブページのデザインを切り替える方法について教えて欲しいとのことでしたのでご紹介します。

以前、こちらのウェブページのテンプレートを切り替えるでご紹介した方法です。

わたしのサイトでは以下の 2 つのページをウェブページとして作成してます。

上記ページを見比べれば分かりますが、ページによってデザインを変更してみました。
具体的にはウェブページのキーワードを使ってデザインを変更してます。

ウェブページのデザインを変更する

まず、各ウェブページ編集画面の「キーワード」入力欄にユニークなキーワードを設定しておきます。
たとえばわたしのサイトだと、プラグインページには「webpage_plugin」と入力し、リンク集ページには「webpage_blogroll」というキーワードを入力してます。

入力したら保存します。
次にウェブページ・テンプレートを変更します。
以下のように、ウェブページで設定した「キーワード」を分岐条件として CSS の切り替えを行っています。
```
<MTSetVarBlock name="keyword"><$MTPageKeyWords$></MTSetVarBlock>
<MTIf name='keyword' eq='webpage_plugin'>
<MTSetVar name="webpage" value="plugin">
<MTElse>
<MTSetVar name="webpage" value="blogroll">
</MTIf>
```
青い字の部分でウェブページで設定した「キーワード」を取得しています。
赤い字の部分で「キーワード」に合致したら、webpage という変数を定義してます。

また、上記は必ずヘッダ・テンプレートモジュールのインクルードの前で定義します。そうしないと期待通りの再構築がされませんのでご注意ください。

追加したら保存します。
最後にヘッダ・テンプレートモジュールを変更します。
以下のように、定義した webpage という変数を分岐条件として CSS の切り替えを行っています。
```
<MTIf name="webpage">
<link rel="stylesheet" href="<MTGetVar name="webpage">/<MTGetVar name="webpage">.css" type="text/css" />
</MTIf>
```
上記例だと、webpage という変数が定義されていたら、プラグインページの場合は plugin/plugin.css というスタイルシートを、リンク集ページの場合は blogroll/blogroll.css というスタイルシートを読込むようになっています。
追加したら保存します。

以上です。
後はウェブページアーカイブを再構築すれば完了です (●＞∀＜●)／

上記ではスタイルシートの切り替えの参考例ですが、テンプレートを切り替えることだってできちゃいます。
また上記青い字の部分を応用すれば、カテゴリアーカイブをカテゴリ名称でテンプレート切り替えだってできちゃいます (￣∇￣)b

お試しアレ～ (●´∀｀●)

Trackback Pings(0)

TrackBack URL for this entry:

No trackbacks found.

Comments(22)

#1: Posted by YukiUsagi [RES]

はじめまして、
MovableTypeの初心者のYukiUsagiと申します。
いつも参考にさせて頂いております。

最近MT4を導入し、
ブログページと、ウェブサイトを作成しています。

こちらの記事を参考にさせていただきまして、
ウェブページごとにデザイン(テンプレート)を違う表示させるというのを
試しているのですが・・・・

どうしてもうまくいきません。

CSSではなく、テンプレートモジュールにそれぞれの形を作成して、
（temp_a,temp_b,temp_cなど、複数変更させたい）
キーワードによって違う表示をさせるようにしたいのですが・・・

その場合はどういう風にしたらいいのでしょうか？

いろいろな参考書、ページなどを調べているのですが・・・
MTを使うのがはじめてなこともあり、
なかなか理解できません。。。

図々しい申し出で大変恐縮ですが・・・
もしよろしければ・・・
お教えいただけないでしょうか？

何卒ご指導ご鞭撻宜しくお願いします。

Posted on December 16, 2007

#2: Posted by bzbell [RES]

>>1 YukiUsagi さん

こんばんわ^^

> CSSではなく、テンプレートモジュールにそれぞれの形を作成して、
> （temp_a,temp_b,temp_cなど、複数変更させたい）
> キーワードによって違う表示をさせるようにしたいのですが・・・
>
> その場合はどういう風にしたらいいのでしょうか？

はい。
テンプレートモジュールをキーワードによって変更したい･･･ですね (￣∇￣)b
それでしたら以下のようにやってみてください。

たとえば、キーワードによって「ウェブページの詳細」テンプレートモジュールを変更したいとします。「ウェブページの詳細」テンプレートモジュールはそれぞれ、temp_a、temp_b、temp_c という名前で作成済みとします。

「アーカイブテンプレート」一覧にある「ウェブページ」テンプレート内の以下の一行を

<$MTInclude module="ウェブページの詳細"$>

を、以下のように変更します。

<MTSetVarBlock name="webpage"><$MTPageKeyWords$></MTSetVarBlock>
<MTIf name='webpage' eq='webpage_a'><$MTInclude module="temp_a"$></MTIf>
<MTIf name='webpage' eq='webpage_b'><$MTInclude module="temp_b"$></MTIf>
<MTIf name='webpage' eq='webpage_c'><$MTInclude module="temp_c"$></MTIf>

上記は、ウェブページ編集画面のキーワード入力欄で入力されたキーワード 'webpage_a'、'webpage_b'、'webpage_c' と比較して、キーワードにあったテンプレートモジュール、temp_a、temp_b、temp_c を読込むように指定しています。

このようにすれば、YukiUsagi さんがやりたいことができるのではないでしょうか (￣∇￣)b

Posted on December 16, 2007

#3: Posted by YukiUsagi [RES]

早急なご返答ありがとうございますっ♪

実際にやってみましたところ、
うまくいきました。^^

まだまだ初心者で、わからないことだらけの私なので・・・
また何か質問させていただくこともあると思いますが、
なにとぞよろしくお願いいたします。

本当にありがとうございましたっ！

Posted on December 17, 2007

#4: Posted by bzbell [RES]

>>3 YukiUsagi さん

こんにちわ^^

> うまくいきました。^^

よかったぁ (●´∀｀●)

> また何か質問させていただくこともあると思いますが、
> なにとぞよろしくお願いいたします。

はい。ぜんぜん OK です (●＞∀＜●)/

Posted on December 17, 2007

#5: Posted by YukiUsagi [RES]

こんばんわ。YukiUsagiです。

度々で申し訳ないのですが・・・
また質問させていただいてもよろしいでしょうか？

MT内のブログ記事またはウェブページの内容の一部を取得して、
リスト形式で表示させたいのですが・・・
その場合はどうすればいいのでしょうか？

また他サイトの記事をリスト形式で流し込むというようなことも
できますか？
その場合、何かプラグインが必要なのでしょうか？

基本的な質問かもしれませんが・・・
お教えいただけないでしょうか？

お手数をおかけいたしますが、
なにとぞよろしくお願いいたします。

Posted on December 21, 2007

#6: Posted by bzbell [RES]

>>5 YukiUsagi さん

こんばんわ^^

> MT内のブログ記事またはウェブページの内容の一部を取得して、リスト形式で表示させたいのですが・・・

内容の一部を取得して･･･とは、再構築後生成されたページ内の一部を取得したいということですか !?
もう少し具体的に教えていただけますか (￣∇￣)

> また他サイトの記事をリスト形式で流し込むというようなこともできますか？
> その場合、何かプラグインが必要なのでしょうか？

他サイトさんの記事リストを流し込むとは、自分のサイト内に他サイトさんの記事リストを表示したいという認識でよいですか !?
それでしたら、以下のページでご紹介してる JavaScript が便利です。
http://bizcaz.com/archives/2007/10/10-000829.php

以前、MT3.2 で以下のようなことをやったことがあります。
http://bizcaz.com/archives/2006/02/17-185635.php

でもご紹介してるプラグインが MT4 でどうするかは試してないので分かりませんけど (;￣∇￣A

的を得た回答になってますか ?!

Posted on December 22, 2007

#7: Posted by YukiUsagi [RES]

こんばんわ。YukiUsagiです。
早々のご返答ありがとうございます。

ウェブページないし、ブログの記事の一部を取得して・・・
という点なのですが・・・
再構築したページのデータの一部を取得するという意味ですね。

例でいいますと、
具体的な情報をのせた詳細ページと、その一部を紹介した
簡易説明ページの2つを作成して、
詳細ページの内容の一部（画像と文章）を簡易説明ページに、
載せたいというものなのです。

そして、抜きだした一部の説明（簡易説明ページ）から、
詳細ページにリンクを張るというものなのですが・・・。

こんな説明でわかりますでしょうか？？？
わかりずらい表現で申し訳ないです。

他サイトの情報を流しこむは、おっしゃっている通りですっ＾＾
今から挑戦してみますねっ♪

いつも、丁寧なご説明ありがとうございます！

それでは、お手数をおかけいたしますが、
よろしくお願いいたします。

Posted on December 22, 2007

#8: Posted by bzbell [RES]

>>7 YukiUsagi さん

こんにちわ^^

> 具体的な情報をのせた詳細ページと、その一部を紹介した簡易説明ページの2つを作成して、詳細ページの内容の一部（画像と文章）を簡易説明ページに、載せたいというものなのです。

エントリ編集画面の「概要」という入力欄を利用するってのはどうでしょ (￣∇￣)b
たとえば、詳細ページは通常通り記事を表示して、簡易ページには「概要」入力欄に書いたものを表示するってのはダメですか !?

<$MTEntryExcerpt$> タグを使用すれば「概要」を表示することができます。

> 他サイトの情報を流しこむは、おっしゃっている通りですっ＾＾

以下の方法でも他サイトさんのフィード情報を読込むことができます (￣∇￣)/

<MTFeed uri="http://feeds.feedburner.jp/movabletype">
<ul>
<MTFeedEntries>
<li><a href="<$MTFeedEntryLink$>"><$MTFeedEntryTitle$></a></li>
</MTFeedEntries>
</ul>
</MTFeed>

上記はわたしのサイトのフィードを読込んで表示するものです。
難点は、MT タグを使用するため再構築時しかフィード情報を読込むことができません。
フィードに関連するタグの詳細は以下を参考にしてください。
http://www.movabletype.jp/cgi-bin/mt4/mt-search.cgi?tag=feeds%20app%20lite&blog_id=3

Posted on December 22, 2007

#9: Posted by YukiUsagi [RES]

こんにちわ。YukiUsagiです。＾＾

ご返答ありがとうございます。
＆
度々すみません。

概要を表示させる、
とのことなのですが・・・

それは複数のウェーブページの概要、
また、この記事とこの記事の概要をピックアップさせて、
みたいな表示をさせることは可能ですか？？
それぞれのページの画像の表示とかもさせたいのですが・・・

色々と質問ばかりしてしまいまして、
申し訳ないですが・・・・

どうかよろしくお願いいたいします。
〟′・ω・)

Posted on December 22, 2007

#10: Posted by bzbell [RES]

>>9 YukiUsagi さん

> それは複数のウェーブページの概要、また、この記事とこの記事の概要をピックアップさせて、みたいな表示をさせることは可能ですか？？

はい。たとえばタグを利用します。

「タグ」入力欄にプライベートタグを指定することで、指定タグに該当する、ピックアップした記事の概要を表示することができます (￣∇￣)b

また、プライベートタグを利用することで MT の管理画面のタグ一覧で管理することもできますし、プライベートタグは、ページ上には出力されませんのでとっても便利かと♪

具体的には以下のようなかんじになりますか。

<ul>
<MTEntries lastn="999999" tag="@Favorite JS" sort_by="created_on">
<li><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a>
<p><$MTEntryExcerpt$></p></li>
</MTEntries>
</ul>

上記は、MTEntries タグの lastn モディファイアですべてのエントリを対象として、tag モディファイアでプライベートタグを指定します。
そして、sort_by で投稿順にソートしています。
フィルタリングされた記事の概要を表示すればよいわけですね (￣∇￣)b

どぅでしょ（。－ω－）

Posted on December 22, 2007

#11: Posted by YukiUsagi [RES]

こんにちわ。YukiUsagiです。

ありがとうございます♪
これから試してみますねっ！

一つ出来たかと思ったら、またわからないことが・・・
というような感じで、悪戦苦闘しながら作成しております・・・。

ご迷惑かと思いますが、
また色々と質問させてくださいませ。
〟′・ω・)

Posted on December 22, 2007

#12: Posted by YukiUsagi [RES]

こんばんわ。YukiUsagiです。
連絡遅くなってしまい申し訳ございません。

複数のウェーブページの概要、また、この記事とこの記事の概要をピックアップさせて表示をさせるという点ですが、

実際にやってみましたところ、
うまくいきました。＾＾
ありがとうございますっ♪

表示させるまではうまくいったのですが・・・

TOPページに2件ずつ概要を表示させるという形にしているのですが・・
次の2件と前の2件へというリンクがどうしてもうまくいきません＞＜；

PreviousNextInCategoryプラグインなども使ってみたのですが、
それではできないのでしょうか？

Posted on December 26, 2007

#13: Posted by bzbell [RES]

>>12 YukiUsagi さん

こんばんわ^^

> ありがとうございますっ♪

いぃえぇ、どぅいたしまして

> 次の2件と前の2件へというリンクがどうしてもうまくいきません＞＜；

たとえば、わたしのサイトのトップページは 1 ページ 5 件を 4 ページ分表示させています。
この要領でページ分割すれば YukiUsagi さんがやりたいことができると思います
具体的にはこちらのPageBute プラグインを使用します。

分からないことあればいつでもどうぞ

Posted on December 27, 2007

#14: Posted by YukiUsagi [RES]

こんにちわ。YukiUsagiです。
いつも本当にありがとうございますっ♪

次の2件と前の2件へというリンクについてなのですが・・・

実際に次の2件、前の2件というリンクは表示されるのですが・・・
次のページに行っても1ページ目の内容と変わらないページに
なってしまいます

何が原因なのでしょうかっ

もう一点、表記の形を123次へではなく、
前のページ │次のページ
みたいな表記にすることは可能でしょうか？

どうか、よろしくお願いいたします。

この猫のアイコンかわいらしいですね♪

Posted on December 27, 2007

#15: Posted by bzbell [RES]

>>14 YukiUsagi さん

こんばんわ^^

> 実際に次の2件、前の2件というリンクは表示されるのですが・・・
> 次のページに行っても1ページ目の内容と変わらないページになってしまいます

すいません、普通に前次リンクのことでしたか
どんなかんじで前次リンクのタグを記述してますか !?
可能であれば YukiUsagi さんが作った、前次リンクを表示させたいテンプレートを拝見すればもう少し的確に言えると思いますので

> この猫のアイコンかわいらしいですね♪

うん、かわいぃですよね
こちら( http://purple.cafe.michikusa.jp/index.html )で頂きましたの

Posted on December 28, 2007

#16: Posted by YukiUsagi [RES]

こんばんわっ。
YukiUsagiです。

いつも丁寧な解説、感謝しておりますっ♪
最近は毎日、Webサイトと参考書とをにらめっこしている状態です。

テンプレートの記述なのですが・・・
テンプレートモジュール内のtemp_photoを
ウェブページのキーワードに指定して、
そのウェブページに、最新のブログ記事を2件ずつ表示させて、
次の2件、前の2件のような表示にさせるつもりでおります。

■テンプレートモジュール：temp_photo

もしかして、ここに表記するものでは・・・
ないのでしょうか？

という以前に、
<MTPageContents count="2">
<MTEntries><$MTInclude module="ブログ記事の詳細"$><$MTPageSeparator$></MTEntries>
↑
上の部分の＜$MTInclude module="ブログ記事の詳細"$>
この部分に何を表記すればいいのか、お恥ずかしいながら・・・
あまり理解できていない状態であったりします

なので、次のブログ記事が表示されないと思うのです・・・

なにとぞ、ご指導くださいませ。

Posted on December 28, 2007

#17: Posted by bzbell [RES]

>>16 YukiUsagi さん

こんばんわ^^

▼①▼
<div style="margin:10px 0px 35px 0px;">
<table width="535" border="0" cellspacing="0" cellpadding="0"><tr>
<td>
<MTEntries category="photo" sort_order="ascend" sort_by="title" lastn="2">
<$MTEntryBody$><br>
</MTEntries>
</td>
</tr></table>
</div>
▼②▼
<MTPageContents count="2">
<MTEntries><$MTInclude module="ブログ記事の詳細"$><$MTPageSeparator$></MTEntries>
</MTPageContents>
▼③▼
<div style="margin:35px 0px 25px 0px;" align="right" class="m">
<MTIfPageBefore><span><$MTPageBefore delim="前のページ"$></span></MTIfPageBefore> │
<MTIfPageNext><span><$MTPageNext delim="次のページ"$></span></MTIfPageNext>
</div>

まず①では、ブログ記事タイトルでソートされた、2 件分のエントリ本文を表示されますね。
で、ここで表示されるエントリは前次リンクで移動しても常に同じものが表示されるはずです

次に②では、最新のエントリ 2 件分が表示されますね。
ここで表示されるエントリが次リンク、前リンクで変更されるはずです

そして③で前次リンクですが、先ほども言ったようにここでの前次リンクは②のみ影響されます。

YukiUsagi さんがやりたいことは >>12 ですよね。
そうすると、トップページに 2 件ずつ概要を表示して、前次リンクでページ移動させたい･･･という認識でよいですか

その場合には以下のようにすればいいと思います。

<div style="margin:10px 0px 35px 0px;">
<table width="535" border="0" cellspacing="0" cellpadding="0">
<tr><td>
▼①▼
<MTPageContents count="2">
▼②▼
<MTEntries category="photo" sort_order="ascend" sort_by="title" lastn="10">
▼③▼
<$MTEntryExcerpt$>
</MTEntries>
</MTPageContents>
<div style="margin:35px 0px 25px 0px;" align="right" class="m">
<MTIfPageBefore><span><$MTPageBefore delim="前のページ"$></span></MTIfPageBefore> │
<MTIfPageNext><span><$MTPageNext delim="次のページ"$></span></MTIfPageNext>
</div>
</td></tr>
</table>
</div>

まず①で、ページを 2 ページずつ区切ることを指定します。
次に②で、ブログ記事タイトルでソートされた、10 件分のエントリを抽出します。
この際、抽出された 10 件の中から昇順ソートされます。

最後に③で、エントリの概要( <$MTEntryExcerpt$> )が表示されます。
エントリの詳細ページを表示したい場合には、ここの部分を＜$MTInclude module="ブログ記事の詳細"$> で置き換えれば OK です