20130406 rainier study
TRANSCRIPT
新テーマ「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
ヘッダー
CSSテンプレートの構成
• テンプレート「スタイルシート」は、あらかじめ準備されたcssファイルをインクルード
• CSSの変更は、「base.css」「screen.css」ではなくstyles.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は、カスタマイズベースのテンプレートとして作られており、企業サイトなどを作りやすい
• ありがとうございました！
• ぜひ、ブログ記事に書いてください。
• 自由にMTカスタマイズを楽しんでください