1. TakeshiNickOsanai

    Posted

    TakeshiNickOsanai
Changes in title
+Movable Type 7 の機能 「コンテンツタイプ」でレシピサイトを作る
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,192 @@
+Movable Type 7 のコンテンツタイプを利用して、レシピサイトを作ってみます。
+
+※ 2018年4月4日時点、MT7ベータ3を前提に作成・記述しています。仕様の変更に伴い、動作が異なる場合があります。変更がありましたら随時修正します。
+
+## レシピサイトの仕様
+
+・レシピ名、写真、材料、作り方を登録できるレシピコンテンツ
+・トップページにレシピの一覧をサムネイルで表示。クリックすると、レシピの詳細情報を閲覧できる
+・Movable Type 7 のコンテンツタイプを利用して構築する
+
+## コンテンツタイプの設計
+
+ここで作成するコンテンツタイプ、およびレシピブックの概要図です。
+
+![about.png](https://qiita-image-store.s3.amazonaws.com/0/83767/5a14018b-1861-f208-7b60-f76cbc99b98a.png)
+
+
+
+## コンテンツタイプとテンプレートの設定・構築
+
+Movable Type 7 をインストール後、サインインを行い、レシピサイトを構築するサイトを選択します。
+
+左メニューの「Content Types」⇒ 新規をクリックして、新しいコンテンツタイプを作成します。Content Types の名前は「レシピブック」とします。
+
+右メニューから、以下の4つをドラッグアンドドロップで登録します。
+
+* Single Line Text (一行テキスト)
+ * 名前 : レシピ名
+
+* Image Asset (画像)
+ * 名前 : 写真
+ * ユーザーに写真アップロードを許可する : チェック
+
+* List (リスト)
+ * 名前 : 材料
+
+* multiline text (複数行テキスト)
+ * 名前 : 作り方
+
+設定が終わったら、保存ボタンを押してコンテンツタイプを保存します。
+
+<img src="https://qiita-image-store.s3.amazonaws.com/0/83767/57a099a4-b237-d8ef-c521-8339a990b6c6.png" width="50%">
+
+次に
+
+* レシピ一覧を表示するトップページ
+* サイト用のCSSファイル
+* レシピ詳細を表示する詳細ページ
+
+の3種類のテンプレートを作成します。
+
+
+### トップページ
+
+左のメニューから「デザイン」⇒「テンプレート」を選び、インデックステンプレートから「新規作成」を選びます。
+
+![recipe_02.png](https://qiita-image-store.s3.amazonaws.com/0/83767/121ad0b0-9988-0ca5-1939-99f7afe736ae.png)
+
+
+以下のテンプレートをインデックステンプレートに貼り付けます。テンプレート名は「レシピインデックス」など、任意で入力します。出力ファイル名は「index.html」など、トップページ用のURLを任意で設定します。
+
+```html
+<!DOCTYPE html>
+<html lang="ja" xml:lang="ja">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" />
+<title>レシピブック</title>
+<link rel="stylesheet" href="<mt:SiteURL>style.css">
+</head>
+<body id="topPage" class="headerBg">
+
+<div class="wrapper">
+<div id="TopHeader">
+<h1>レシピブック</h1>
+</div>
+
+
+<h2>新着一覧</h2>
+<div id="entries" class="listWrapper">
+<mt:Contents content_type="レシピブック">
+<div class="list">
+<div class="thum"><a href="<mt:ContentPermaLink>">
+<mt:ContentField content_field="写真"><img src="<mt:AssetThumbnailURL width="220" square="1">" ></mt:ContentField>
+<div class="listDescription"><span class="listDescriptionTxt"><mt:ContentField content_field="名前"><mt:var name="__value__"></mt:ContentField></span></div></a></div>
+</div>
+</mt:Contents>
+
+</div>
+
+</div>
+
+</body>
+</html>
+```
+
+テンプレートを貼り付けたら、「保存」⇒「保存と再構築」をクリックします。
+
+
+### スタイルシート
+
+次に、CSSファイル用テンプレートを作成します。CSSのサンプルは[こちらに用意しておきました](https://gist.github.com/Nick-smallworld/3334765b0597a8451af294ab1d17f4b1)。
+
+左のメニューから「デザイン」⇒「テンプレート」を選び、インデックステンプレートから「新規作成」を選びます。テンプレート名は「スタイルシート」など、任意で入力します。出力ファイル名は「**style.css**」とします。
+
+
+### レシピ詳細
+
+左のメニューから「デザイン」⇒「テンプレート」を選び、インデックステンプレートから「新規作成」を選びます。
+
+[Content Types]から「Contents」の作成ボタンをクリックして、コンテンツタイプの個別詳細テンプレートを設定します。
+
+<img src="https://qiita-image-store.s3.amazonaws.com/0/83767/9bc4bf7a-ba33-44d9-c559-08a86b6c2643.png" width="50%">
+
+
+以下のテンプレートをインデックステンプレートに貼り付けます。テンプレート名は「レシピ詳細」など、任意で入力します。
+
+```html
+<!DOCTYPE html>
+<html lang="ja" xml:lang="ja">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" />
+
+<title><mt:ContentField content_field="レシピ名"><mt:var name="__value__"></mt:ContentField> | レシピブック</title>
+
+<link rel="stylesheet" href="<mt:SiteURL>style.css">
+
+</head>
+<body id="entryPage" class="headerBg">
+
+<div class="wrapper">
+<div class="detailWrapper">
+
+<h1 class="mainTitle"><mt:ContentField content_field="レシピ名"><mt:var name="__value__"></mt:ContentField></h1>
+<div class="detail">
+<div class="mainImg"><mt:ContentField content_field="写真"><img src="<mt:AssetURL>"></mt:ContentField></div>
+<div class="detailInner">
+<h2>材料</h2>
+
+<mt:ContentField content_field="材料"><p class="mb5"><mt:var name="__value__"></p></mt:ContentField>
+
+<h2>作り方</h2>
+<mt:ContentField content_field="作り方"><mt:var name="__value__"></mt:ContentField>
+
+
+</div>
+</div>
+<div class="backBtn"><a href="<mt:SiteURL>index.html">トップへ戻る</a></div>
+</div>
+</div>
+</body>
+</html>
+
+```
+
+テンプレートの貼付けが終わったら、[保存]をクリック後、「アーカイブマッピングを作成」をクリックします。パスは「yyyy/mm/content-basename.html」を選びます。Date & Timefileds は「公開日」を選びます。
+
+<img src="https://qiita-image-store.s3.amazonaws.com/0/83767/c2b71459-9f63-3809-7ec7-f3716c4c21a2.png" width="50%" >
+
+アーカイブマッピングを追加したら、保存ボタンをクリックして保存します。
+
+
+## データ登録
+
+コンテンツタイプの設計、デザインテンプレートの設定が終わったらデータを入力します。
+以下はレシピの例です。
+
+* レシピ名
+ * 味たまご
+* レシピ画像
+ * <img src="https://qiita-image-store.s3.amazonaws.com/0/83767/1ec7a31b-45ea-88a5-86f3-70f0e833cea4.jpeg" width="50%">
+
+* 材料
+ * たまご
+ * めんつゆ
+ * みりん
+* 作り方
+ * めんつゆとみりん、水の比率が 1:1:2 で混ぜ合わせ、鍋で一度沸騰させ、冷まします。
+鍋でお湯を沸かします。
+常温にした卵をお湯に入れ中火で6分半煮ます。
+卵を冷水などで冷やし、卵の殻をむきます。
+冷ました付け汁に卵を入れ、冷蔵庫で1日以上置きます。
+
+
+入力後、公開ボタンをクリックしてデータの登録を完了します。
+
+
+レシピデータを登録すると、トップページ、詳細ページともに更新されていきます。
+
+<img src="https://qiita-image-store.s3.amazonaws.com/0/83767/b90e02e0-0eb2-ded6-eaba-84565a848801.png" width="50%">
+