1. 新テーマ「Rainier」を使ってブログ、
ウェブサイトを作ってみよう！
2013年4月6日
シックス・アパート株式会社
長内 毅志

2. アジェンダ
• 新テーマ「Rainier」について
• テンプレートの構成を把握する
• カスタマイズしてみる

3. 最初に
• 今回の勉強会の目標
• Rainierを利用して、「ウェブサイト」っぽ
いデザインにカスタマイズする
• http://goo.gl/5bUpy
– http://www.movabletype.jp/2013_rainier_customiz
e/

4. 本日やること

5. 本日やること
• テンプレート構造を把握する
• ページ、ブログ記事を作る
• ロゴの位置を変える
• 背景画像を変える
• グローバルメニューをカスタマイズする
• トップページをカスタマイズする
• サイドバーをカスタマイズする

6. 本日触れないこと
• 「レスポンシブウェブデザイン」自体の
テクニックについては触れません。
• MTタグの使い方については、別途マニュア
ル、本などをご覧ください。

7. 準備

8. アカウントの設定
• 自分の作業環境で、「Rainier」のブログを
作ってみましょう
• 再構築して、Rainierの初期画面が出てきた
ら準備完了

9. 便利なTips
• MTのテンプレートには「履歴管理」機能が
使えます。
– うまく使いこなして、作業効率を上げましょう。

10. 便利なTips
• MTタグの書き方は、自由度があります。
– ブロックタグ
• <MTEntires>
• <MT:Entries>
• <mtentries>
– ファンクションタグ
• <$MTBlogName$>
• <$MT:BlogName$>
• <mt:BlogName>
• <MTBLOGNAME>
• <mt:BlogName />

11. 初めに
MTのテンプレートを把握しよう

12. Rainierのテンプレート初期状態
HTML
ヘッダー バナーヘッダー
ナビゲーション
ブログ記事の概要 関連
コンテンツ
メインページ
ページネーション
バナーフッター

13. CSSテンプレートの構成
base.css スタイルシート
styles.css
screen.css
ブログのサイトカバー画像設定
• テンプレート「スタイルシート」は、あらかじめ準備さ
れたcssファイルをインクルード
• CSSの変更は、「base.css」「screen.css」ではなく
styles.cssに追記して、要素を上書きできます

14. データ入力

15. カスタマイズ前に
• ブログ記事を2つ作成します。
– ブログ記事は「ブログ記事１」「ブログ記事２」とタイトルを入れ
ます
• それぞれにタグ、カテゴリを入れます。
– ブログ記事１
• ブログ記事1のタグは「タグ1」「タグ共通」
• ブログ記事1のカテゴリは「カテゴリ1」
– ブログ記事２
• ブログ記事2のタグは「タグ2」「タグ共通」
• ブログ記事2のカテゴリは「カテゴリ2」
• ウェブページを2つ作成します。
– あらかじめ存在する「ウェブページの例」「アバウトページ」を公
開します

16. ここまで

17. メニューに「アバウト」だけがある理由
• プライベートタグ(シークレットタグ)
「@ABOUT_PAGE」を利用しているから
• Rainierマニュアル
– http://goo.gl/86vax
• プライベートタグ(シークレットタグ)
– http://goo.gl/3Xuyl
• MTPages
– http://goo.gl/vyEKG

18. ロゴ文字の移動

20. スタイルシートテンプレートに追記
#header[role="banner"] h1 {
position: static;
margin: 10px 10px 0;
text-align: left;
}

21. 背景画像の位置を変更する

23. スタイルシートテンプレートに追記
• #header[role="banner"] #header-content {
background:none;
background-position: 0 55px;
background-repeat: no-repeat;
}
• #header[role="banner"] #header-content:before{
background:none;
}

24. 補足
• 文字色は、screen.cssの63行目で白に指定され
ています。
#header[role="banner"] #header-content a {
color: white;
text-decoration: none; }
– header-content内のa要素について、文字色が白に指定されている
– 画像を使わず、文字をそのまま利用したい場合は、上記の要素を上
書きします。
#header[role="banner"] #header-content a {
color: black;
text-decoration: none;
}

26. ロゴ画像を入れ替える
• ロゴを画像に変更します。
• 文字のままが良い人は、スキップしてもかま
いません。
• アップロード後、 @SITE_LOGOというプラ
イベートタグを付与して再構築する。
• http://goo.gl/eRB7B

28. 背景画像を入れ替える
• 今の背景で良い人は、スキップしてもかまい
ません。
• 1024x768の画像をアップロード後、
@SITE_COVER_IMAGEというプライベート
タグを付与して再構築する。
• 再構築すれば、背景画像が変わる。
• http://goo.gl/xyBlg

30. グローバルメニューをカスタマイズする

31. ナビゲーションにページを表示する
• ウェブページ全てに@ADD_TO_SITE_NAV
とタグを入れて、再構築する。
• 常に「アバウト」ページが最初に出てくる。
• これは、テンプレートモジュール「ナビゲー
ション」で定義されているから

32. ウェブページをナビに表示した直後

33. ナビゲーションの順番を入れ替える
• アバウトを最後に表示するようにする
• ナビゲーションのコードを変更
<mt:Pages tag="@ABOUT_PAGE" limit="1">
<li><a href="<$mt:PagePermalink encode_html="1"$>">アバウト
</a></li>
</mt:Pages>
を、<mt:Pages tag=“@ADD_TO_SITE_NAV”>…</mt:Pages>のあとにカッ
トアンドペーストする

35. トップページをカスタマイズする

36. ブログ記事一覧ページを新たにつくる
• インデックステンプレートの「メインページ
」をコピーして、「アーカイブ」という名前
で保存。
• 出力ページは「archives.html」とする。

38. メインページのカスタマイズ
• 「アバウトページ」の内容をそのままメイン
ページに表示する
– 「本文」の内容をトップページに表示
– 「続き」は表示しない
• メインページテンプレートを変更
<div id=“index-main” class=“main” role=“main”>…</div>
の中身を以下に変更
<div id=“index-main” class=“main” role=“main”>
<mt:Pages lastn=“1” tag=“＠ABOUT＿PAGE”>
<mt:PageBody>
</mt:Pages>
</div>

40. ブログ一覧をグローバルナビゲーションに表示する
• 先ほどの要領で、「ナビゲーション」テンプ
レートをカスタマイズ。
• 末尾に以下のように追記
<li>
<a href="<mt:Link template="アーカイブ">">ブログ</a>
</li>

42. サイドバーをカスタマイズする

43. ウィジェットの内容を変える
• ウィジェットテンプレートの
「関連コンテンツ」から、タグクラウドを除
外してみる。
• 除外後、再構築。サイドバーから、タグクラ
ウドが消えているのがわかります。

45. 新しいウィジェットを作成して挿入する
• ウィジェット名「チャンク」
<div class="widget-tag-cloud widget">
<h3 class="widget-header">チャンク</h3>
<div class="widget-content">
自由にテキストを入れてみましょう。
</ul>
</div>
</div>
• 保存後、ウィジェットを入れ替えて保存
再構築してみる

47. まとめ

48. 今回のまとめ
• Movable Typeのデザイン、レイアウトは
テンプレートで管理されている
• CSSは追記することで、元ファイルを変えずに見
栄えを変えられる
• テンプレートのカスタマイズは、html感覚でカ
スタマイズができる
• Rainierは、カスタマイズベースのテンプレート
として作られており、企業サイトなどを作りやす
い

49. • ありがとうございました！
• ぜひ、ブログ記事に書いてください。
• 自由にMTカスタマイズを楽しんでください