新テーマ「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カスタマイズを楽しんでください