2段目の3カラムレイアウトを追加する（小粋空間テンプレート）
Category : MovableType
このブログのレイアウトに、2段目の3カラムレイアウトを追加した。
↓赤い線で囲んだ部分です。
ちなみにこのカスタマイズは「小粋空間」さんのテンプレートに基づいているので、他のブログで使うときは、ちょっと変更が必要かもしれません。
まずは、フッターに以下を追加する。
↓赤い線で囲んだ部分です。
ちなみにこのカスタマイズは「小粋空間」さんのテンプレートに基づいているので、他のブログで使うときは、ちょっと変更が必要かもしれません。
まずは、フッターに以下を追加する。
- テンプレートモジュール「フッター」に追加
<MTUnless name="page_layout" eq="layout-one-column">
<div id="footer-menu" class="clearfix">
<div id="footer-menu-left-box">
<dl id="footer-menu-left">
<$mt:Include module="2段目左カラム"$>
</dl>
</div>
<div id="footer-menu-center-box">
<dl id="footer-menu-center">
<$mt:Include module="2段目中央カラム"$>
</dl>
</div>
<div id="footer-menu-right-box">
<dl id="footer-menu-right">
<$mt:Include module="2段目右カラム"$>
</dl>
</div>
</div>
</MTUnless>次にスタイルシートにも記述を追加する。
/*フッターメニュー*/
#footer-menu {
margin-right: auto;
margin-left: auto;
border-left: 1px solid #669;
border-right: 1px solid #669;
border-bottom: 1px solid #669;
width: 938px;
color: #333;
background: #fff;
text-align: left;
}
html > body #footer-menu {
width: 936px;
}
#footer-menu-left-box,
#footer-menu-right-box {
float: left;
width: 266px;
}
#footer-menu-center-box {
float: left;
width: 404px;
}
#footer-menu-left {
padding: 25px 13px 5px 25px;
}
#footer-menu-center {
padding: 25px 13px 5px 13px;
}
#footer-menu-right {
padding: 25px 25px 5px 13px;
}なお、<$mt:Include module="2段目左カラム"$>にあるように、各カラムの中身は好きなものを入れてください（＾＾；）。私自身もまだ何を入れるか迷ってるんですけどね（＾＾；）
このカスタマイズは以下の書籍を参考にしました。言わずとしれた、小粋空間のyujiroさんの著書です。
Movable Type WEBデザインの新しいルール
posted with amazlet at 08.04.04
荒木 勇次郎 松永 英明
翔泳社
売り上げランキング: 26193
翔泳社
売り上げランキング: 26193
コメントする