« Movable Type 5.2.3 アップグレード | メイン | Movable Type メインページ »

Tips

Movable Type + Twitter Bootstrap

Movable Type 3.34 のテンプレートで Twitter Bootstrap を使ってレスポンシブWEBデザインに。
Movable Type 3.34 のデフォルトの2カラムテンプレートのアウトライン。 ▼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" id="sixapart-standard">
<head>
		:
	<link rel="stylesheet" href="<$MTBlogURL$>styles-site.css" type="text/css" />
		:
</head>
<body class="layout-two-column-right main-index">
	<div id="container">
		<div id="container-inner" class="pkg">

			<div id="banner">
				タイトルバナー
			</div>

			<div id="pagebody">
				<div id="pagebody-inner" class="pkg">

					<div id="alpha">
						記事
					</div>

					<div id="beta">
						サイドバー
					</div>

				</div>
			</div>
		</div>
	</div>
</body>
</html>
Twitter Bootstrap のレスポンシブレイアウトのアウトライン。
<!DOCTYPE html>
<html lang="ja">
<head>
		:
	<link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="/bootstrap/css/bootstrap-responsive.min.css">
		:
</head>
<body>
	<div class="container-fluid">

				タイトルバナー

		<div class="row-fluid">

			<div class="span9">
						記事
			</div>

			<div class="span3">
						サイドバー
			</div>

		</div>
	</div>
	<script src="/dat/js/bootstrap.min.js"></script>
	<!-- script src="http://code.jquery.com/jquery.js"></script -->
	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
</body>
</html>
カスタマイズ後のアウトライン。Movable Type のデフォルトのクラス名などは残す。
<!DOCTYPE html>
<html lang="ja">
<head>
		:
	<link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="/bootstrap/css/bootstrap-responsive.min.css">

	<link rel="stylesheet" href="<$MTBlogURL$>styles-site.css" type="text/css" />
		:
</head>
<body class="layout-two-column-right main-index">
<div class="container-fluid">
	<div id="container">
		<div id="container-inner" class="pkg">

			<div id="banner">
				タイトルバナー
			</div>

<div class="row-fluid">
			<div id="pagebody">
				<div id="pagebody-inner" class="pkg">

<div class="span9">
					<div id="alpha">
						記事
					</div>
</div>

<div class="span3">
					<div id="beta">
						サイドバー
					</div>
</div>
				</div>
			</div>
</div>
		</div>
	</div>
</div>
	<script src="/dat/js/bootstrap.min.js"></script>
	<!-- script src="http://code.jquery.com/jquery.js"></script -->
	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
</body>
</html>
修正するのはMovable Type管理画面 > 環境設定 > テンプレート の
インデックスタブの『メインページ』
インデックスタブの『スタイルシート』
インデックスタブの『アーカイブページ』
アーカイブタブの『エントリー・アーカイブ』
アーカイブタブの『カテゴリー・アーカイブ』
アーカイブタブの『日付アーカイブ』
システムタブの『検索結果』
ブログを串刺し検索する場合は CGIPath の
mt/search_templates/default.tmpl

トラックバック

このエントリーのトラックバックURL:
https://www.remix.asia/cgi/mt/mt-tb.cgi/6971

コメントを投稿

(いままで、ここでコメントしたことがないときは、コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)