Movable Type 7 の機能 「コンテンツタイプ」でレシピサイトを作る

Movable Type 7 のコンテンツタイプを利用して、レシピサイトを作ってみます。

※ 2018年4月4日時点、MT7ベータ3を前提に作成・記述しています。仕様の変更に伴い、動作が異なる場合があります。変更がありましたら随時修正します。

レシピサイトの仕様

・レシピ名、写真、材料、作り方を登録できるレシピコンテンツ
・トップページにレシピの一覧をサムネイルで表示。クリックすると、レシピの詳細情報を閲覧できる
・Movable Type 7 のコンテンツタイプを利用して構築する

コンテンツタイプの設計

ここで作成するコンテンツタイプ、およびレシピブックの概要図です。

about.png

要素として

  • レシピ名
  • レシピ画像(写真)
  • 材料
  • 作り方

の4要素が入力データとなります。
写真は画像を挿入するためのフィールドが必要になりそうです。
また、材料はレシピによって異なりますので、レシピごとに可変となる入力フィールドが必要となりそうです。

この辺りを意識しながらコンテンツタイプの設定を行っていきます。

コンテンツタイプとテンプレートの設定・構築

Movable Type 7 をインストール後、サインインを行い、レシピサイトを構築するサイトを選択します。

左メニューの「Content Types」⇒ 新規をクリックして、新しいコンテンツタイプを作成します。Content Types の名前は「レシピブック」とします。

右メニューから、以下の4つをドラッグアンドドロップで登録します。

  • Single Line Text (一行テキスト)

    • 名前 : レシピ名
  • Image Asset (画像)

    • 名前 : 写真
    • ユーザーに写真アップロードを許可する : チェック
  • List (リスト)

    • 名前 : 材料
  • multiline text (複数行テキスト)

    • 名前 : 作り方

設定が終わったら、保存ボタンを押してコンテンツタイプを保存します。

次に

  • レシピ一覧を表示するトップページ
  • サイト用のCSSファイル
  • レシピ詳細を表示する詳細ページ

の3種類のテンプレートを作成します。

トップページ

左のメニューから「デザイン」⇒「テンプレート」を選び、インデックステンプレートから「新規作成」を選びます。

recipe_02.png

以下のテンプレートをインデックステンプレートに貼り付けます。テンプレート名は「レシピインデックス」など、任意で入力します。出力ファイル名は「index.html」など、トップページ用のURLを任意で設定します。

<!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>

    </div>
  </body>
</html>

テンプレートを貼り付けたら、「保存」⇒「保存と再構築」をクリックします。

スタイルシート

次に、CSSファイル用テンプレートを作成します。CSSのサンプルはこちらに用意しておきました

左のメニューから「デザイン」⇒「テンプレート」を選び、インデックステンプレートから「新規作成」を選びます。テンプレート名は「スタイルシート」など、任意で入力します。出力ファイル名は「style.css」とします。

レシピ詳細

左のメニューから「デザイン」⇒「テンプレート」を選び、インデックステンプレートから「新規作成」を選びます。

[Content Types]から「Contents」の作成ボタンをクリックして、コンテンツタイプの個別詳細テンプレートを設定します。

以下のテンプレートをインデックステンプレートに貼り付けます。テンプレート名は「レシピ詳細」など、任意で入力します。

<!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 rel="stylesheet" href="<mt:SiteURL>style.css">
</head>

<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>
</body>
</html>

テンプレートの貼付けが終わったら、[保存]をクリック後、「アーカイブマッピングを作成」をクリックします。パスは「yyyy/mm/content-basename.html」を選びます。Date & Timefileds は「公開日」を選びます。

アーカイブマッピングを追加したら、保存ボタンをクリックして保存します。

データ登録

コンテンツタイプの設計、デザインテンプレートの設定が終わったらデータを入力します。
以下はレシピの例です。

  • レシピ名
    • 味たまご
  • レシピ画像

  • 材料

    • たまご
    • めんつゆ
    • みりん
  • 作り方

    • めんつゆとみりん、水の比率が 1:1:2 で混ぜ合わせ、鍋で一度沸騰させ、冷まします。 鍋でお湯を沸かします。 常温にした卵をお湯に入れ中火で6分半煮ます。 卵を冷水などで冷やし、卵の殻をむきます。 冷ました付け汁に卵を入れ、冷蔵庫で1日以上置きます。

入力後、公開ボタンをクリックしてデータの登録を完了します。

レシピデータを登録すると、トップページ、詳細ページともに更新されていきます。

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.