MTタグ逆引き辞典

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

Public Organizationではウェブページでページを構成することができますが、例えばとあるフォルダ配下のウェブページは2カラムではなく1カラムにしたい、といった場合があります。

今回は指定したフォルダ配下の場合は1カラムになる、という方法をご紹介します。

※ 今回の方法は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$>

ポイントは、フォルダ名を指定して、mt:Ifで現在のウェブページが属する一番上の階層のフォルダと比較し同じであればlarge-12を表示、一致しない場合はlarge-8を表示する、というところです。

今回は画面幅が広い場合を想定するため、largeの部分が対象となります(medium以下は元々すべて1カラム)。Foundationでは、そのブロック内での最大幅を12としているため、指定したフォルダの場合は結果的に1カラムになります。

続いて右サイドバーも変更します。コンテンツが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 -->
  

上記により右サイドバーも、1カラムになります。

後は、ウェブページに読み込んでいるwebpage-sidebarモジュールを編集します。

変更前:

<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>

上記のようにFoundationのルールで自動レイアウトできるように記述を追加します。

これによりコンテンツ部分が1カラムの場合にはサイドバーのコンテンツは下側に2列に、といったように収まりが良くなります。

使用したMTタグはこちら

Movable Type.net は無料トライアルが可能です。
Web制作者の方で、デモや評価利用をご希望の場合は、制作者向け評価ライセンスをご利用ください。

無料トライアル 資料ダウンロード 制作者向け評価ライセンス