20130225 pronet study
- 1. テンプレート?カスタマイズについて学 ぶPronet勉強会 シックス?アパート株式会社 ?内 毅志
- 2. 自己紹介 : ?内毅志 2011年よりMovable Type製品企画マネージャー twitter: Nick_smallworld blog: smallworld.west-tokyo.com
- 3. アジェンダ ? 最初に – Movable 罢测辫别の特徴 – テンプレートとは – ウェブサイトとブログの違い ? Movable Typeのテンプレート构造 ? テンプレートの種類 ? 空のテンプレートを変えてみる ? 簡単な条件分岐 ? テーマとは? ? テーマとテンプレート
- 4. 罢测辫别の特徴 Movable Type の特徴 ? 10年以上利用されているブログ?CMS(通称MT) ? MTタグと呼ばれるタグの組み合わせでロジック生成 ? テンプレートとDBが完全に分離している(MVCライク) ? プラグインで拡張可能 ? どんなコードも生成可能
- 5. 惭罢タグによる丑迟尘濒生成 惭罢タグによる丑迟尘濒生成 タグによる html 再新10件のブログ記事をリンク付きで生成 <ul> <MT:Entries limit="10"> <li><a href="<MT:EntryPermalink>"><MT:EntryTitle></a></li> </MT:Entries> </ul> 参考リンク2： https://github.com/movabletype/Documentation/wiki/J apanese-mtml-guide
- 12. ウェブサイトとブログの違い ? ウェブサイト… いわゆる「ウェブサイト」「ホームページ」全体を管理するた めの器 ? ブログ… ウェブサイト(ホームページ)の中にある、更新頻度の高いコン テンツを管理するための器。 「ブログ」「ニュースリリース」「IR情報」 「新製品紹介」など 参考リンク3： http://www.movabletype.jp/documentation/mt5/websites/
- 14. ウェブページとブログ記事の違い ? ブログ記事…時間の経過とともに蓄積されるページ 例:日記、ニュースリリースなど ? ウェブページ…時間の経過と関係なく、階層构造に従い 情報を伝えるためのページ 例:会社概要、組織図、会社地図など 参考リンク4： http://www.movabletype.jp/documentation/mt5/compose/
- 18. Typeのテンプレート构造 Movable Type のテンプレート构造 ? インデックステンプレート ? アーカイブテンプレート ? テンプレートモジュール ? システムテンプレート ? ウィジェット 参考リンク5： http://www.movabletype.jp/documentation/designer/temp late-types.html
- 19. インデックステンプレート ? ブログ?ウェブサイト全体に関わるファイルを扱うテン プレート ? サイトに一つしか存在しないファイルを扱う事が多い 例:CSS, JavaScript, トップページなど
- 20. アーカイブテンプレート ? 更新ごとに増加するデータページをまとめるテンプレー ト。 ? 出力ルールを設定できる(カテゴリごとに一覧ページを 作る、月毎にページをまとめるなど) ? 1テンプレートで复数の种类のファイルを出力できる
- 23. ウィジェット ? サイドバーなどで利用するコンテンツを細かく部品化し 、管理画面上でドラッグ?アンド?ドロップして管理で きるもの。 ? テンプレートモジュール以上に、細かいパーツを管理 ? 昔はブログパーツなどによく使われていました
- 24. ハンズオン バナーヘッダー サイドバー バナーフッター バナーフッター
- 25. 构造
- 26. 课题1 課題 1 ? 新しいウェブページを作成、更新してみる
- 27. 课题2 課題 2 ? インデックスページの文言を変えてみる
- 28. 课题3 課題 3 ? 全部のウェブページのタイトルに色をつける
- 29. 课题4 課題 4 ? サイドバーの見出し「ウェブページ」を別な文言に変え る
- 30. 课题5 課題 5 ? インデックスページの場合、サイトロゴ文字の下に 「これはインデックスページです」 ウェブページの場合、サイトロゴ文字の下に 「これはウェブページです」 という文字を、条件分岐を利用して入れる 参考リンク6： http://www.movabletype.jp/blog/customize_conditional_01.html 参考リンク7: http://www.movabletype.jp/documentation/designer/archive- template-variable.html
- 31. 课题6 課題 6 ? インデックスページの場合はサイドメニューの位置を左 に、ウェブページの場合はサイドメニューの位置を右の ままにする ? ヒント：スタイルシートのclassを見ながら、bodyの指 定を変える
- 32. 课题6 課題 6 -1 ? インデックスページ、ウェブページでレイアウトを変え る方法を、条件分岐を使って実現する
- 33. 课题7 課題 7 ? @topタグがついたページのみ、トップページにタイト ルとリンクを表示してみる 参考リンク8： http://www.movabletype.jp/documentation/mt5/compose/edit.html #edit-privatemode 参考リンク9: http://www.movabletype.jp/blog/mtddc2011_special_03.html