 |
|
|
|
|
|
|
 |
|
 |
 |
 |
 |
 |
 |
 |
 |
|
mt-galleryでタグ「MT」が付けられているもの
MTのテンプレートセット作成プラグインを見つけました。
これはとても便利そうです。
作成したテンプレートの保管、配布、サイトの引っ越し時などに
重宝するかも知れませんね。
これはとても便利そうです。
作成したテンプレートの保管、配布、サイトの引っ越し時などに
重宝するかも知れませんね。
TemplateSetExporterプラグイン
全部同じデザインもいいですが
できればそれぞれのページにあったデザインにしたいものです。
(1)ブログ記事ページ別に変える
(2)カテゴリーリスト別に変える
今回はLINKページを違うデザインに変えてみます。
BEFORE
AFTER
(1)ブログ記事ページ別に変える
まず最初にアーカイブテンプレートのブログ記事を流用した
「link用ブログ記事」というテンプレートモジュールを作り、
一番先頭に
これはリンクページをワンカラムにするために必要なタグです。
また、ワンカラムにする場合は、
<MTSetVar name="sidebar" value="1">
をはずしておきましょう。
「ヘーダー」テンプレート内にある、
変換出力してくれます。
CSSファイルにも
次にアーカイブテンプレートのブログ記事の先頭に
先ほど作った「link用ブログ記事」というテンプレートモジュールをIncludeします。
そうでないものには既存のブログ記事テンプレートが割り振られます。
(2)カテゴリーリスト別に変える
アーカイブテンプレートの
ブログ記事リストを次のように変更します。
「linkのブログ記事リスト」もワンカラムにしたいので
それぞれデザインごとに作り直して完成です。
できればそれぞれのページにあったデザインにしたいものです。
(1)ブログ記事ページ別に変える
(2)カテゴリーリスト別に変える
今回はLINKページを違うデザインに変えてみます。
BEFORE
AFTER
(1)ブログ記事ページ別に変える
まず最初にアーカイブテンプレートのブログ記事を流用した
「link用ブログ記事」というテンプレートモジュールを作り、
一番先頭に
<MTSetvar name="page_layout" value="layout-one-column">
というタグを追加します。これはリンクページをワンカラムにするために必要なタグです。
また、ワンカラムにする場合は、
<MTSetVar name="sidebar" value="1">
をはずしておきましょう。
「ヘーダー」テンプレート内にある、
<body class="<MTIf name="body_class"><$MTGetVar name="body_class"$>
</MTIf><$MTGetVar name="page_layout" default="layout-wtt"$>"
<MTIf name="body_onload"> onload="<$MTGetVar name="body_onload"$>"
</MTIf>
というタグで<body class="layout-one-column">に</MTIf><$MTGetVar name="page_layout" default="layout-wtt"$>"
<MTIf name="body_onload"> onload="<$MTGetVar name="body_onload"$>"
</MTIf>
変換出力してくれます。
CSSファイルにも
.layout-one-column #alpha {
width: 790px;
}
と書き加えます。 width: 790px;
}
次にアーカイブテンプレートのブログ記事の先頭に
先ほど作った「link用ブログ記事」というテンプレートモジュールをIncludeします。
<MTEntryIfCategory name="link">
<$MTInclude module="link用ブログ記事"$>
<MTElse>
既存のブログ記事の内容
これでlinkページの記事には新しいテンプレートモジュールを<$MTInclude module="link用ブログ記事"$>
<MTElse>
既存のブログ記事の内容
そうでないものには既存のブログ記事テンプレートが割り振られます。
(2)カテゴリーリスト別に変える
アーカイブテンプレートの
ブログ記事リストを次のように変更します。
<MTIfArchiveType archive_type="Category">
<MTIfCategory name="link">
<$MTInclude module="linkのブログ記事リスト"$>
</MTIfCategory>
</MTIfArchiveType>
<MTIfArchiveType archive_type="Category">
<MTIfCategory name="about">
<$MTInclude module="その他のブログ記事リスト"$>
</MTIfCategory>
</MTIfArchiveType>
このように<MTIfCategory name="link">
<$MTInclude module="linkのブログ記事リスト"$>
</MTIfCategory>
</MTIfArchiveType>
<MTIfArchiveType archive_type="Category">
<MTIfCategory name="about">
<$MTInclude module="その他のブログ記事リスト"$>
</MTIfCategory>
</MTIfArchiveType>
<MTIfArchiveType archive_type="Category">
<MTIfCategory name="カテゴリー名">
<$MTInclude module="ブログ記事リスト"$>
</MTIfCategory>
</MTIfArchiveType>
それぞれのカテゴリー別につくったブログ記事リストをインクルードします。<MTIfCategory name="カテゴリー名">
<$MTInclude module="ブログ記事リスト"$>
</MTIfCategory>
</MTIfArchiveType>
「linkのブログ記事リスト」もワンカラムにしたいので
<MTSetvar name="page_layout" value="layout-one-column">
を付与します。
CSSファイルとリストに内包する「ブログ記事の概要」もそれぞれデザインごとに作り直して完成です。
以前、このLABで自分がどのページにいるのか認識できる
タブメニュー等のボタンの作成方法を紹介しました。
その中でカテゴリーページをつかった方法も紹介しました。
あれは、あれでいいのですが
現状では最上階層のカテゴリーのページのみ反応して、
下部の個々のブログ記事ではまったく反応しません。
つまりデフォルトの表示になってしまいます。
リンク先から中のブログ記事に直接飛んできた人には
自分がどのカテゴリーの記事を見ているのか まったくわかりません。ｗ
そこで、今回は個々のブログ記事でもちゃんと反応する
ボタンの作成方法を考えました。
今回は、既存ボタンの下にcssでボックスをつくって
ナビゲーションLED仕様風に見せようと思います。
まず、アーカイブテンプレートのブログ記事リストに
画像は使用してません。
ここまでが前回同様です。
しかし、このままでは個別のブログページではLEDは光ってくれません。
まず、アーカイブテンプレートのブログ記事を開きます。
下にあるアーカイブマッピングのパスを変更しましょう。
デフォルトの状態から カテゴリーアーカイブを介したパスへ変更します。
こうする事で個々のブログ記事がカテゴリーフォルダーの
下階層から呼び出されるようになります。
フォルダーにもアーカイブ名と同じ名前がついているので
ブログ記事のテンプレート内に
と追加します。 これで個々のブログ記事でLEDが光るようになったはず。
タブメニュー等のボタンの作成方法を紹介しました。
その中でカテゴリーページをつかった方法も紹介しました。
あれは、あれでいいのですが
現状では最上階層のカテゴリーのページのみ反応して、
下部の個々のブログ記事ではまったく反応しません。
つまりデフォルトの表示になってしまいます。
リンク先から中のブログ記事に直接飛んできた人には
自分がどのカテゴリーの記事を見ているのか まったくわかりません。ｗ
そこで、今回は個々のブログ記事でもちゃんと反応する
ボタンの作成方法を考えました。
今回は、既存ボタンの下にcssでボックスをつくって
ナビゲーションLED仕様風に見せようと思います。
まず、アーカイブテンプレートのブログ記事リストに
<MTIf name="category_archive">
<mt:setvarblock name="cat_dscr"><$MTCategoryLabel$></mt:setvarblock>
<mt:setvar name="$cat_dscr" value="1"></MTIf>
を追加。
MTifとMTelseで振り分けるテンプレートモジュールも新たに作成します。<mt:setvarblock name="cat_dscr"><$MTCategoryLabel$></mt:setvarblock>
<mt:setvar name="$cat_dscr" value="1"></MTIf>
<div id="colorbox">
<div id="colorboxin"> 途中省略
<mt:if name="main_index"><div class="colorbox1"></div>
<mt:else><div class="colorbox2"></div></mt:else></mt:if>
<mt:if name="lab"><div class="colorbox1"></div>
<mt:else><div class="colorbox2"></div></mt:else></mt:if>
途中省略
</div>
</div>
これにcssで装飾します。
<div id="colorboxin"> 途中省略
<mt:if name="main_index"><div class="colorbox1"></div>
<mt:else><div class="colorbox2"></div></mt:else></mt:if>
<mt:if name="lab"><div class="colorbox1"></div>
<mt:else><div class="colorbox2"></div></mt:else></mt:if>
途中省略
</div>
</div>
#colorbox{
margin:0px 0px 18px 0px;
text-align:center;
}
#colorboxin{
display:block;
width:774px;
margin:0px auto;
text-align:center;
}
.colorbox1{
display:block;
width:129px;
border-top:2px solid #00cccc;
float:left;
}
.colorbox2{
display:block;
width:129px;
border-top:2px solid #333;
float:left;
}
今回はborder-top:2pxでブルーのLED風に見せたので
margin:0px 0px 18px 0px;
text-align:center;
}
#colorboxin{
display:block;
width:774px;
margin:0px auto;
text-align:center;
}
.colorbox1{
display:block;
width:129px;
border-top:2px solid #00cccc;
float:left;
}
.colorbox2{
display:block;
width:129px;
border-top:2px solid #333;
float:left;
}
画像は使用してません。
ここまでが前回同様です。
しかし、このままでは個別のブログページではLEDは光ってくれません。
まず、アーカイブテンプレートのブログ記事を開きます。
下にあるアーカイブマッピングのパスを変更しましょう。
デフォルトの状態から カテゴリーアーカイブを介したパスへ変更します。
こうする事で個々のブログ記事がカテゴリーフォルダーの
下階層から呼び出されるようになります。
フォルダーにもアーカイブ名と同じ名前がついているので
ブログ記事のテンプレート内に
<mt:setvarblock name="cat_dscr"><$MTFolderLabel$></mt:setvarblock>
<mt:setvar name="$cat_dscr" value="1">
<mt:setvar name="$cat_dscr" value="1">
と追加します。 これで個々のブログ記事でLEDが光るようになったはず。
ＭＴのＰＨＰ化で検索していたら面白そうな記事があったので、phpspot開発日誌
今度一度ためしてみよう。
