MTのレイアウト変更法 :: MTカスタマイズ法収集ブログ

« ヘッダー(バナー)に画像を設定する | メイン | 「日付アーカイブ」の再構築に失敗しました »

MTのレイアウト変更法

2006年07月22日

Movable Type の初期レイアウトは、2カラム(2行)で右側にサイドバーがあります。

こんなの↓
3.31-ja初期デザイン

これを、Movable Type 3.31-ja　の初期スタイルシートを利用して
2カラム左サイドバー、3カラム(3行)に変更する方法をご紹介します。

MTに限らず、レンタルでもブログは囲いの中に囲いがあって、そのまた中に囲いが・・・
という風に囲われまくってレイアウトされています。

図にするとこんな感じ
囲い説明

一番外枠(赤色)のcontainerという名前の囲いの中、
上段にbanner(緑色)の囲い、
下段にpagebody(黒)の囲いがあり、さらにpagebodyの中の
左側にalpha(青)、右側にbeta(黄)の囲いがある状態です。

これが、MTの初期レイアウトです。

◇2カラム左サイドバーにする方法。

まず、単純にalphaの中身とbetaの中身を入れ替えてしまいます。
*メインページのテンプレートで説明します。

テンプレートの中を見てみると

<div id="alpha">
<div id="alpha-inner" class="pkg">
<MTEntries>
<$MTEntryTrackbackData$>
・
(省略)
・
</div>
</MTEntries>
</div>
</div>
<div id="beta">
<div id="beta-inner" class="pkg">
<div class="module-search module">
<h2 class="module-header">検索</h2>
・
(省略)
・
Powered by<br /><a href="http://www.sixapart.jp/movabletype/">Movable Type</a> <$MTVersion$>
</div>
</div>
</div>
</div>

とあります。前後は省略しています。

赤文字の部分がalphaの中身(左側)、青文字の部分がbetaの中身(右側)です。

これをコピー、ペーストで入れ替えます。

こんな風になります。

クリックで大きい画面

次に、左右の幅をちゃんとしてあげます。
デフォルトスタイルシートで設定が用意されていますので、それを利用します。

メインページの

赤文字の部分を、
layout-two-column-leftに変えて、保存再構築します。

完成しましたー！

クリックで大きい画面

◇3カラムにする方法。

上の方法を応用するだけです。

まず、3列にしてやるためにbetaの囲いの後にgammaという囲いを
メインページに追加してやります。

<div id="gamma">
<div id="gamma-inner" class="pkg">
・
(好きな内容)
・
</div>
</div>

次に、

赤文字の部分を、
layout-three-columnに変えて、保存再構築します。

3.31-ja だとスタイルシートの3カラムの部分にgammaの指定が無いようなので
追加します。

/* three-column tweaks */

から下の部分になります。
とりあえずalphaをコピーして

(省略)
・

.layout-three-column #beta-inner {
padding: 0;
border-width: 0;
}

.layout-three-column #gamma {
margin: 0;
width: 180px;
background: #e6ecf2;
}

.layout-three-column #gamma-inner {
padding: 10px 10px 0 10px;
border-width: 2px 0 2px 2px;
border-style: solid;
border-color: #fff;
}

赤文字の部分を追加します。
alphaをgammaに変えるのを忘れずに。

保存、再構築すると

クリックで大きい画面
(*説明用なのでgammaの内容はalphaと同じになっています。)

できたーヽ(ﾟ∀ﾟ)メ(ﾟ∀ﾟ)メ(ﾟ∀ﾟ)ノ

幅とか色とか他もろもろは試行錯誤しながら変更してみてください。

このカスタマイズはMT 3.31-jaの初期スタイルシートを例に挙げて
レイアウトを変更する考え方をご紹介しています。
バージョンが変わるとタグなど変わるかもしれませんが、
考え方は変わらないと思います。

: 00:05 | CSS(スタイルシート)

トラックバック (1)

◇重複トラックバックはこっそり削除しますのでお気になさらないでください。
◇トラックバックスパムと判断しましたらサックリ削除いたしますのでご了承ください。

この一覧は、次のエントリーを参照しています: MTのレイアウト変更法:

» とりあえず形に ( ニシヒロシマテクノミュージック )
とりあえずメインページだけでも形にしてみました。参考にしたのはこちら。 MTの...

コメント (15)

» 投稿者: eiji-low

はじめまして。
3カラムのテンプレートを探していたのですが中々ピンと来るものが無く、悶々としていたのですがデフォルトのスタイルから3カラムに出来るとは知りませんでした。
こちらのエントリを参考にさせていただきました。ありがとうございます。

コメント時刻: 2006年08月16日 10:15

» 投稿者: りぃ

＞eiji-lowさん
はじめまして[ポッ]
お役に立てたようで嬉しいです。

MTのテンプレートは配布している人が少ないので大変ですよね(´・ω・｀)
その分、自分で素敵なテンプレートを作っている人も多いので
がんばってください[！]

コメント時刻: 2006年08月17日 12:01

» 投稿者: えの

alphaとｂｅｔａを入れ替えると、googleのボットがalpha(サイドバー)側から読みはじめるから、ＳＥＯ的にはマイナスになるんじゃないかな？
だから、デフォルドではサイドバーが右側（文法上、最後のほう）にあるんではなかろうかと・・・。

コメント時刻: 2007年01月21日 23:15

» 投稿者: りぃ

≫えのさん

確かにSEOを考えるとそうだと思います。
デフォルトテンプレートもそれを考えて右サイドバーになってるのかなと
私も思っていました。

でも、SEOを気にしなくて好きなレイアウトにしたいという人もいますし、
ここでは「こんな方法があるよ」という事を紹介してみました。

コメント時刻: 2007年01月22日 11:19

» 投稿者: えの

お世話になっております。
デザインを優先するかアクセス数を優先するか、難しいですよね・・・。

商用のテンプレートではCSSを弄ってサイドバーが左側にくるようしているみたいですけど・・・。メンドクサイです。

それでは失礼致します。

コメント時刻: 2007年01月22日 23:21

» 投稿者: りぃ

≫えのさん

そうそう、その方法あるみたいですね。
スタイルシートで順番を入れ替えるという。
まだそこまで手が回らないので調べてないですが、
めんどくさそうな予感がしてます[タラッ]

検索エンジンからだけのアクセスと考えないならば、
デザインが良いサイトの方がアクセスされやすいかも。
という考え方もあるかも！？

コメント時刻: 2007年01月24日 10:45

» 投稿者: るな☆

すいません、すごく勉強になるサイトですね。
まったくのMT初心者です[タラッ]
ここに質問してよかったのか不明ですができたらおしえてください。

サイト内の左のサイドメニューですが、「カテゴリ」に枠があって「Movable Typeをはじめよう」はリンクがなくその下に項目にカテゴリがどんどん入っていってますよね。
これってどうやればよいのでしょうか？

コメント時刻: 2007年02月13日 23:06

» 投稿者: りぃ

≫るな☆さん

はじめまして[ポッ]

サイドバーのカテゴリーは、
「Movable Typeをはじめよう」は親カテゴリーで、
「MTが使えるサーバー」「MTをダウンロードしよう」などは
その子カテゴリーになっています。

その状態で、「Movable Typeをはじめよう」には記事を投稿しなくて、
子カテゴリーの「MTが使えるサーバー」などに記事を投稿していけば
あのようになります[！]

コメント時刻: 2007年02月14日 20:18

» 投稿者: るな☆

まったくの初心者の質問に
ほんとご丁寧にありがとうございます☆

がんばってカスタマイズがんばりまーす[ハート]

コメント時刻: 2007年02月15日 02:06

» 投稿者: ruru

[えーん]はじめまして。ruruです。とても参考になりました。3カラムのデザインに無事できたのですが、全体の幅をもう少し広くしたいのですが、
.layout-three-column #beta {
margin: 15px 15px 0 15px;
width: 320px;
background: none;
ここを width: 320px;→350にして、さらに以下にある、720のところを750に変更しました。とりあえず、できたのですが、わからずにやっています。それぞれ、何の720というサイズなのでしょうか？どうして、containerが２つ記述されているのでしょうか？
もしよろしければ教えてください。
よろしくお願いいたします。

body { text-align: center; } /* center on ie */

#container {
position: relative;
margin: 0 auto; /* center on everything else */
width: 720px;
text-align: left;

/* page layout */

body {
min-width: 720px;
color: #333;
background: #36414d;
}

#container {
width: 720px;
margin-bottom: 20px;
background: #fff;
}

コメント時刻: 2007年04月07日 18:34

» 投稿者: りぃ

≫ruruさん

はじめまして[ポッ]
幅を広くする方法、それで大丈夫ですよ[！]

これは、デフォルトのスタイルシートですよね。
デフォルトスタイルシートには、container以外にも何度か同じ
ものが記述されているのがあったと思います。

多分、「こっちはデザインを決める記述」「そっちはレイアウトを決める記述」
という考えの下に分けて書かれているのだと思うのですが、
例のように何箇所もwidthなど同じものが指定されていると
あっちもこっちも修正しないといけなくなり、正直面倒な事この上なしです[むきー]
”width: 720px;”はまったく同じことを意味しているのでひとつ無駄という事になります。

なので、同じものはひとまとめにしてしまっていいと思います。
配布させてもらってるテンプレートはまとめています。
かなりスッキリして、縦が短くなって、ファイルも軽くなるし良いですよ[♪]

コメント時刻: 2007年04月09日 14:21

» 投稿者: のり

始めまして、３カラム化　参考にさせて頂き現在作成中です。非常に判りやすい説明で助かります。
別件ですがこのサイトのトップページやHttp://kondo.in/car/の様に投稿を２列に表示するのはどうしたら良いのでしょうか？
宜しくお願いします。

コメント時刻: 2007年04月24日 19:55

» 投稿者: ruru

りぃさん　ありがとうございました。
よくわからないままそのままにしていましたが、納得しました。

あれから、いろいろ変更していますが、現在、また、壁にぶつかっています。
メインテンプレートのentry-headerのfont-sizeを0.9emにしたのですが、
アーカイブのカテゴリー・アーカイブのテンプレートのentry-headerの設定のあるところは、ホームのentry-headerより、小さくなっています。どうしたらよいのでしょうか？

また、カテゴリー・アーカイブのカテゴリ名に詳細を出したいのですが、どうしたらよいのでしょうか？
<h2 id="archive-title"><$MTArchiveTitle$> アーカイブ</h2>

もし、お時間があれば、教えてください。

コメント時刻: 2007年04月25日 10:56

» 投稿者: りぃ

≫のりさん

はじめまして[ポッ]

このサイトのトップページは「カテゴリー別タイトル一覧の表示法」
http://mt.rambler-style.com/archives/2005/0614-2354.php
を使って表示しています。
このタグを、テーブルを使って2列にしています。

URL先のサイト様はなにやら技を使っているようなので
よく分かりません。ごめんなさい[うーん]

コメント時刻: 2007年04月27日 10:27

» 投稿者: りぃ

≫ruruさん

文字が小さくなる原因はテンプレートを見てみないと分かりませんが、
他の文字サイズを指定している部分の中にentry-headerが入っていて、
その他の部分の大きさを基準にして文字が小さくなっちゃってる・・・とか？
あくまで想像ですが[うわーん]