Movable Type 3.34 のテンプレートで Twitter Bootstrap を使ってレスポンシブWEBデザインに。
Movable Type 3.34 のデフォルトの2カラムテンプレートのアウトライン。 ▼
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