狠狠撸

新テーマ「Rainier」を使ってブログ、
ウェブサイトを作ってみよう！

2013年4月6日
シックス?アパート株式会社
長内毅志

アジェンダ

? 新テーマ「Rainier」について
? テンプレートの構成を把握する
? カスタマイズしてみる

最初に

? 今回の勉強会の目標

? Rainierを利用して、「ウェブサイト」っぽ
いデザインにカスタマイズする

? http://goo.gl/5bUpy

– http://www.movabletype.jp/2013_rainier_customiz
e/

本日やること

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

本日触れないこと

? 「レスポンシブウェブデザイン」自体の
テクニックについては触れません。

? MTタグの使い方については、別途マニュア
ル、本などをご覧ください。

アカウントの設定

? 自分の作業環境で、「Rainier」のブログを
作ってみましょう
? 再構築して、Rainierの初期画面が出てきた
ら準备完了

便利なTips

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

便利なTips

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

初めに

MTのテンプレートを把握しよう

Rainierのテンプレート初期状態
HTML
ヘッダーバナーヘッダー

ナビゲーション

ブログ記事の概要関連
コンテンツ
メインページ
ページネーション

バナーフッター

颁厂厂テンプレートの构成

base.css スタイルシート
styles.css
screen.css
ブログのサイトカバー画像設定

? テンプレート「スタイルシート」は、あらかじめ準备さ
れたcssファイルをインクルード

? CSSの変更は、「base.css」「screen.css」ではなく
styles.cssに追記して、要素を上書きできます

カスタマイズ前に
? ブログ記事を2つ作成します。
– ブログ記事は「ブログ記事１」「ブログ記事２」とタイトルを入れ
ます

? それぞれにタグ、カテゴリを入れます。
– ブログ記事１
? ブログ記事1のタグは「タグ1」「タグ共通」
? ブログ記事1のカテゴリは「カテゴリ1」
– ブログ記事２
? ブログ記事2のタグは「タグ2」「タグ共通」
? ブログ記事2のカテゴリは「カテゴリ2」

? ウェブページを2つ作成します。
– あらかじめ存在する「ウェブページの例」「アバウトページ」を公
開します

メニューに「アバウト」だけがある理由

? プライベートタグ(シークレットタグ)
「@ABOUT_PAGE」を利用しているから

? Rainierマニュアル
– http://goo.gl/86vax
? プライベートタグ(シークレットタグ)
– http://goo.gl/3Xuyl
? MTPages
– http://goo.gl/vyEKG

スタイルシートテンプレートに追記

#header[role="banner"] h1 {
position: static;
margin: 10px 10px 0;
text-align: left;
}

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

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

補足
? 文字色は、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;
}

ロゴ画像を入れ替える

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

背景画像を入れ替える

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

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

ナビゲーションにページを表示する

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

ウェブページをナビに表示した直后

ナビゲーションの順番を入れ替える

? アバウトを最後に表示するようにする
? ナビゲーションのコードを変更
<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>のあとにカッ
トアンドペーストする

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

ブログ記事一覧ページを新たにつくる

? インデックステンプレートの「メインページ
」をコピーして、「アーカイブ」という名前
で保存。
? 出力ページは「archives.html」とする。

メインページのカスタマイズ

? 「アバウトページ」の内容をそのままメイン
ページに表示する
– 「本文」の内容をトップページに表示
– 「続き」は表示しない
? メインページテンプレートを変更
<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>

ブログ一覧をグローバルナビゲーションに表示する

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

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

ウィジェットの内容を変える

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

新しいウィジェットを作成して挿入する

? ウィジェット名「チャンク」
<div class="widget-tag-cloud widget">
<h3 class="widget-header">チャンク</h3>
<div class="widget-content">
自由にテキストを入れてみましょう。
</ul>
</div>
</div>

? 保存後、ウィジェットを入れ替えて保存
再構築してみる

今回のまとめ
? Movable Typeのデザイン、レイアウトは
テンプレートで管理されている

? CSSは追記することで、元ファイルを変えずに見
栄えを変えられる

? テンプレートのカスタマイズは、html感覚でカ
スタマイズができる

? Rainierは、カスタマイズベースのテンプレート
として作られており、企業サイトなどを作りやす
い

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

狠狠撸

20130406 rainier study

More Related Content

20130406 rainier study