応用
特定のフォルダ内のウェブページのレイアウトを変更する
ウェブページのテンプレートは全ページ共通ですが、特定のフォルダ配下のウェブページはスタイルを変更したい、という場合があります。
ここでは指定したフォルダでは2カラムではなく1カラムにしたい、といった場合の例を紹介します。
使用するMTタグ
まず、ウェブページのテンプレートを編集していきます。以下該当部分となります。
ポイントは、フォルダ名を指定して、mt:Ifで現在のウェブページが属する一番上の階層のフォルダと比較し同じであればlarge-12を表示、一致しない場合はlarge-8を表示する、というところです。
※ 今回の方法はFoundationをベースとしたPublic Organizationテーマでの説明です。
実際はclass名の変更なのでBootstrapなど他の場合でも応用は可能です。
ウェブページ記述サンプル
変更前
<div class="row">
<div class="columns medium-12 large-8">
<div id="content">
<article id="webpage-body">
<div class="container">
<$mt:PageBody$>
変更後
<div class="row">
<mt:SetVarBlock name="parent_folder"><mt:TopLevelFolder><$mt:FolderLabel encode_html="1"$></mt:TopLevelFolder></mt:SetVarBlock>
<div class="columns medium-12 <mt:If name="parent_folder" eq="フォルダ名">large-12<mt:Else>large-8</mt:If>">
<div id="content">
<article id="webpage-body">
<div class="container">
<$mt:PageBody$>
続いて右サイドバーも変更します。コンテンツが1カラムになったため、横幅が広くなり寄ってしまうため2列に変更します。
まず、同じウェブページ内の以下の部分を同様に変更します。
ウェブページ記述サンプル
変更前
<div class="columns medium-12 large-4">
<$mt:Include module="webpage-sidebar"$>
</div><!-- columns -->
変更後
<div class="columns medium-12 <mt:If name="parent_folder" eq="フォルダ名">large-12<mt:Else>large-4</mt:If>">
<$mt:Include module="webpage-sidebar"$>
</div><!-- columns -->
最後に、ウェブページに読み込んでいるwebpage-sidebarモジュールを編集します。
上記のようにFoundationのルールで自動レイアウトできるように記述を追加します。
ウェブページ記述サンプル
変更前
<div class="sidebar">
<div class="group">
......
</div>
<$mt:Include module="information"$>
</div>
変更後
<div class="sidebar">
<div class="row">
<div class="columns medium-12 <mt:If name="parent_folder" eq="フォルダ名">large-6<mt:Else>large-12</mt:If>">
<div class="group">
......
</div>
</div><!-- columns -->
<div class="columns medium-12 <mt:If name="parent_folder" eq="フォルダ名">large-6<mt:Else>large-12</mt:If>">
<$mt:Include module="information"$>
</div><!-- columns -->
</div><!-- row -->
</div>
これによりコンテンツ部分が1カラムの場合にはサイドバーのコンテンツは下側に2列に、といったように収まりが良くなります。