MTOS(MT5) ウェッブサイトでページ毎に違うデザインを適用する

ちょっと小手先ですが、ページ毎に違うデザインを適用する方法を考えてみました。

大幅なデザイン変更ではなく、CSSで対応できる範囲の変更です。

たとえば、カラムの並び順を変える事や、背景画像や色などを変更できますが、HTMLをいじらないとできないような変更は、この方法では無理です。

方法論を先に言ってしまいますと、body タグに id を設定してしまいます。

複数のデザインを設定する場合、デザイン毎に個別のフォルダを用意して、そのフォルダの中にウェブページを生成します。

保存先フォルダの設定は、ウェブページの新規作成時に選ぶことができますね。

ウェブサイトのウェブページには、カテゴリを設定する事ができませんので、ページを格納するフォルダをカテゴリに見立てれば良いわけです。

まず、インデックステンプレートの「メインページ」テンプレート。

<body id="top">

という具合に、id を振っておきましょう。

続いて、アーカイブテンプレートの「ウェブページ」テンプレート。

<body id="<$mt:FolderLabel$>">

これでOKですね。

例えば、"./profile" というフォルダに保存された全てのウェブページの body タグには、"profile" という id が自動的に振られるようになります。

<body id="profile">

こんな感じです。

まずは、全てのページに共通の、もしくは基本となるスタイルをCSSで記述してしまいます。

その後に、トップページだけに必要なスタイルや、profile フォルダなど各フォルダに納められたページ用のデザインを上書きする形で記述します。

例えばこんな形です。

#content-inner { color: #000; }

#top #content-inner { color: #F00; }

#profile #content-inner { color: #00F; }

こうしておくと、テキスト色は通常黒で表示されてますが、トップページとprofileフォルダに納められたページのテキスト色だけ、それぞれ、赤と青で表示されるようになります。

とても簡単ですね。

float や、widthなどのレイアウト系をいじると、カラムを入れ替えたり、見た目のサイズを変更したりする事もできますし、背景画像をいじれば、ページのイメージをガラリと変更する事も可能です。

ただし、順番は必ず、各ページの個別デザイン設定が一番最後になるように書きましょう。

順番を間違えると、ちょっと淋しい結果になってしまいます。