• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
20130406 rainier study
 

20130406 rainier study

on

  • 1,319 views

 

Statistics

Views

Total Views
1,319
Views on SlideShare
1,319
Embed Views
0

Actions

Likes
0
Downloads
4
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    20130406 rainier study 20130406 rainier study Presentation 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テンプレートの構成 base.css スタイルシート styles.css screen.css ブログのサイトカバー画像設定 • テンプレート「スタイルシート」は、あらかじめ準備さ れたcssファイルをインクルード • CSSの変更は、「base.css」「screen.css」ではなく styles.cssに追記して、要素を上書きできます
    • データ入力
    • カスタマイズ前に • ブログ記事を2つ作成します。 – ブログ記事は「ブログ記事1」「ブログ記事2」とタイトルを入れ ます • それぞれにタグ、カテゴリを入れます。 – ブログ記事1 • ブログ記事1のタグは「タグ1」「タグ共通」 • ブログ記事1のカテゴリは「カテゴリ1」 – ブログ記事2 • ブログ記事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カスタマイズを楽しんでください