MovableType.net 逆引き辞典

応用

特定のフォルダ内のウェブページのレイアウトを変更する

ウェブページのテンプレートは全ページ共通ですが、特定のフォルダ配下のウェブページはスタイルを変更したい、という場合があります。
ここでは指定したフォルダでは2カラムではなく1カラムにしたい、といった場合の例を紹介します。

使用するMTタグ

  • mt:If
  • mt:SetVarBlock
  • mt:TopLevelFolder
  • mt:FolderLabel

  • まず、ウェブページのテンプレートを編集していきます。以下該当部分となります。
    ポイントは、フォルダ名を指定して、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列に、といったように収まりが良くなります。