MT5 カラム変更

[記事公開日]2013/09/02
[最終更新日]2013/09/20

MT5 カラム変更

MovableTypeテンプレートは、デフォルトが3カラムになっていますが、これを2カラムなど、任意に変更することが可能です。実際のページのソースを見ると<body>タグでClass指定していることがわかりますので、ここを変更すればいいだけです^^v

<body id="professional-blog" class="mt-main-index layout-wm">

実際に、<body>タグのclass属性の指定をしているところ

ちなみに、テンプレートの「ヘッダー」を見てみると

<body id="<$mt:BlogTemplateSetID$>" class="<$mt:Var
name="body_class"$> …

となっています。<body>タグのclass属性は、

<$mt:Var name="body_class"$>

となっており、body_classで指定していることがわかります。ここの指定をしているのが、「メインページ」テンプレートの

<$mt:Var name="page_layout" value="layout-xx"$>

の部分となります。

MT5 カラム変更

テンプレートの[メインページ]にて変更します。

やり方

  1. 管理画面>テンプレート>インデックステンプレート の欄にある[メインページ]をクリック
  2. 1行目のvalue部分を変更

    <$mt:Var name="page_layout" value="layout-xxx"$>

※このレイアウトは、blog.cssで全種類定義されていて、valueの値で指定されたものを表示しているそうです。blog.cssでは、/* Layout のエリアに定義されています。

レイアウトの種類  valueの値
3カラム Wide-Thin-Thin layout-wtt
     
3カラム Thin-Wide-Thin layout-twt
     
2カラム layout-wt layout-wt
   
2カラム Thin-Wide layout-tw
   
2カラム Medium-Wide layout-mw
   
2カラム Wide-Medium layout-wm
   

  Wide:大    Medium:中   Thin:小

このブログのように、「2カラム Wide-Medium」だと、2カラムで、大きいエリアと中くらいのエリアのレイアウトになります。Wideの部分が大きな記事コンテンツエリアですね^^v

<$mt:Var name="page_layout" value="layout-wm"$>

ブログスタイルの選択 との関係

MovableType 4.1以降では、以下の設定画面で、カラムの設定が可能です。

管理画面>スタイル>ブログスタイルの選択>[レイアウト]の選択

新規にブログを適用するときはここで設定でも問題ないんですが、何かのはずみでレイアウトがおかしくなっちゃったときなど(新しいブログスタイルに変更したら、今までCSSでオリジナルで設定していたものがすべてデフォルトに戻っちゃって、元の状態に戻したいときとか^^;)に、スタイルシートの再適用とかしたいときなどでは、ここの[レイアウト]を直しただけでは元には戻りませんので、テンプレートのほうをご確認ください。



Copyright © 2000-2018 Makiko HOSOKAWA. All rights reserved.