1. TakeshiNickOsanai
Changes in body
Source | HTML | Preview
@@ -1,214 +1,208 @@
Movable Type 7 のコンテンツタイプを利用して、レシピサイトを作ってみます。
-※ 2018年4月4日時点、MT7ベータ3を前提に作成・記述しています。仕様の変更に伴い、動作が異なる場合があります。変更がありましたら随時修正しま
+※ 2018年7月5日、MT7.0.3をベースにテンプレートや画像などを修正しました
## レシピサイトの仕様
・レシピ名、写真、材料、作り方を登録できるレシピコンテンツ
・トップページにレシピの一覧をサムネイルで表示。クリックすると、レシピの詳細情報を閲覧できる
・Movable Type 7 のコンテンツタイプを利用して構築する
## コンテンツタイプの設計
ここで作成するコンテンツタイプ、およびレシピブックの概要図です。
![about.png](https://qiita-image-store.s3.amazonaws.com/0/83767/5a14018b-1861-f208-7b60-f76cbc99b98a.png)
要素として
* レシピ名
* レシピ画像(写真)
* 材料
* 作り方
の4要素が入力データとなります。
写真は画像を挿入するためのフィールドが必要になりそうです。
また、材料はレシピによって異なりますので、レシピごとに可変となる入力フィールドが必要となりそうです。
この辺りを意識しながらコンテンツタイプの設定を行っていきます。
## コンテンツタイプとテンプレートの設定・構築
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%">
+![recipe_1.png](https://qiita-image-store.s3.amazonaws.com/0/83767/21151c3e-6d1e-4654-a15b-f788485e1190.png)
+
次に
* レシピ一覧を表示するトップページ
* サイト用のCSSファイル
* レシピ詳細を表示する詳細ページ
の3種類のテンプレートを作成します。
### トップページ
-左のメニューから「デザイン」⇒「テンプレート」を選び、インデックステンプレートから「新規作成」を選びます。
+左のメニューから「デザイン」⇒「テンプレート」を選び、画面上部から「インデックス」を選び、新規作成します。
+
+![recipe_2.png](https://qiita-image-store.s3.amazonaws.com/0/83767/510d2b44-d3f8-2632-f920-89684b65640d.png)
+
+
-![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">
- <head>
- <meta charset="UTF-8">
- <meta content="width=device-width,user-scalable=no,maximum-scale=1" name="viewport">
- <title>
- レシピブック
- </title>
- <link href="<mt:SiteURL>style.css" rel="stylesheet">
- </head>
- <body class="headerBg" id="topPage">
- <div class="wrapper">
-
- <div id="TopHeader">
- <h1>レシピブック</h1>
- </div>
-
- <h2>新着一覧</h2>
-
- <div class="listWrapper" id="entries">
- <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>
-
+<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>
- </body>
+<div class="wrapper">
+<div id="TopHeader">
+<h1>レシピブック</h1>
+</div>
+
+
+<h2>新着一覧</h2>
+<div id="entries" class="listWrapper">
+<mt:Contents name="レシピブック">
+<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:ContentFieldValue></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」の作成ボタンをクリックして、コンテンツタイプの個別詳細テンプレートを設定します。
+![recipe_3.png](https://qiita-image-store.s3.amazonaws.com/0/83767/ef77759a-792f-8fb2-8a12-0f011c88ff9b.png)
-<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">
+<html lang="ja" xml:lang="ja">
<head>
- <meta charset="UTF-8">
- <meta content="width=device-width,user-scalable=no,maximum-scale=1" name="viewport">
- <title>| レシピブック</title>
- <link rel="stylesheet" href="<mt:SiteURL>style.css">
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" />
+
+<title><mt:ContentField content_field="レシピ名"><mt:ContentFieldValue></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:ContentFieldValue></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:ContentFieldValue></p></mt:ContentField>
+
+<h2>作り方</h2>
+<mt:ContentField content_field="作り方"><mt:ContentFieldValue></mt:ContentField>
+
-<body class="headerBg" id="entryPage">
- <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>
+</div>
+</div>
+<div class="backBtn"><a href="<mt:SiteURL>recipe.html">トップへ戻る</a></div>
+</div>
+</div>
</body>
</html>
```
-テンプレートの貼付けが終わったら、[保存]をクリック後、「アーカイブマッピングを作成」をクリックします。パスは「yyyy/mm/content-basename.html」を選びます。Date & Timefileds は「公開日」を選びます。
+テンプレートの保存後「新しいアーカイブマッピングを作成」をクリックします。
+パスを [yyyy/mm/content-basename.html]として選び、[追加]ボタンをクリックします
-<img src="https://qiita-image-store.s3.amazonaws.com/0/83767/c2b71459-9f63-3809-7ec7-f3716c4c21a2.png" width="50%" >
+![recipe_4.png](https://qiita-image-store.s3.amazonaws.com/0/83767/9ff570dd-d5c3-c5ef-9d78-544aa4b2bdf5.png)
アーカイブマッピングを追加したら、保存ボタンをクリックして保存します。
## データ登録
コンテンツタイプの設計、デザインテンプレートの設定が終わったらデータを入力します。
以下はレシピの例です。
* レシピ名
* 味たまご
* レシピ画像
* <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%">