Movable TypeにBootstrapを導入２
1.
HTML ヘッダーを変更
bootstrap のcssの読み込みを記述
<!-- Bootstrap core CSS -->
<link href="<$mt:BlogURL$>css/bootstrap.min.css" rel="stylesheet">
IE9の時の記述は少し変更しておく
<!--[if lt IE 9]>
<script src="<$mt:BlogURL$>js/html5shiv.js"></script>
<script src="<$mt:BlogURL$>js/respond.min.js"></script>
<![endif]-->
2. bootstrapのナビゲーションスタイルに全て変更へ
navbarfixedをテンプレートモジュールに作る。
<mt:If name="page_template"><$mt:PageID setvar="page_id"$></mt:If>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="<$mt:BlogURL encode_html="1"$>">
<$mt:BlogName$></a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarToCollapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div><!--/.navbar-header -->
<div class="collapse navbar-collapse" id="navbarToCollapse">
<ul class="nav navbar-nav">
<li ><a href="<$mt:BlogURL encode_html="1"$>">Home</a></li>
<mt:Pages tag="@ABOUT_PAGE" limit="1">
<li><a href="<$mt:PagePermalink encode_html="1"$>">About</a></li>
</mt:Pages>
<li><a href="<$mt:Link template="main_index" encode_html="1"$>">Blog</a></li>
<mt:Pages tag="@ADD_TO_SITE_NAV">
<li><a href="<$mt:PagePermalink encode_html="1"$>"><$mt:PageTitle$></a></li>
</mt:Pages>
<li class="dropdown ">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="<$mt:BlogURL$>blog/">Blog</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container -->
</nav><!--/.navbar -->
3. テンプレートのナビゲーションを入れ替える。
<header role="banner">
<$mt:Include module="バナーヘッダー"$>
<$mt:Include module="ナビゲーション"$>
</header>
を
<header role="banner">
<nav role="navigation">
<$mt:Include module="navbarfixed"$>
</nav>
</header>
に変更する。
このままだとEigerで試してみるとブログページでドロップダウンが開いたままになる。
テンプレートの記事を
基本的な所は<header role="banner"> を <header >にすると
ナビゲーションのドロップダウンは正常に動く。
eigerのmt-theme-eiger.js（Javascript テーマ用）には、メニューでドロップダウンの機能を持たせるもので、右上にメニューのボタンが出現する。これはbootstrapの機能を使うため必要ない。</body>の前にある<script src="<$mt:Link template="javascript_theme" encode_html="1">"></script>を削除する。
４.
ナビゲーションとブログ内容が重なってしまう。パンくずが隠れている。
<div class="content">を <div class="content" style="margin-top:46px;">にすればよい。
newblogのメインスクリーンの最大の大きさが、960pxになっている。
newblogのメインスクリーンの最大の大きさが、960pxになっているのでもう少し大きくする。テンプレートのスタイルシートで修正。
テンプレートstyles.cssの最後に
#mainimage {
max-width: 1200px;
}
を付け足す。
navbar が画面いっぱいに表示されない。上記だけではこれが解決されているない。
