ニュースページを作る・その１〜記事ページ編〜

ニュースページを作る！

記事ページとアーカイブ・テンプレートを使って、ニュースページを作りましょう。

必要なのは記事そのものになる記事と、ニュースぺージを一覧させるのに使う、記事ページ一覧のアーカイブ・テンプレート。それとnews.htmlになるインデックス・テンプレートです。

このテンプレートを使っていきます。

どちらもいままでの要領で進めていけば大丈夫！さっそく作っていきましょう。

記事ぺージを作る

まずは、ニュース記事そのものに使うインデックス・テンプレートの方を作っていきます。
デザイン＞テンプレート＞アーカイブ・テンプレートにある、
記事を編集し、必要なモジュールを置き換えておきましょう。

今回、ニュースページは２カラムのデザインにしています。
メインカラムには記事内容を表示させます。
必要なのは、記事の日付、カテゴリ、記事タイトル、本文、本文追記分です。
サブカラムには、各記事リストをアーカイブにしたものをおきましょう。

このようなデザインです。

サブカラムはこの後「その３〜アーカイブ編〜」で作るよ！
まずはメインカラム！！

メインカラム、記事を表示する部分を作っていきましょう。
必要になるMTタグは下記の通りです。以前に記事の一覧を作った際に使ったMTタグも出てきますね。
思い出して、作ってみましょう。

<$mt:EntryDate$>

ブログ記事の公開日を表示します。

https://movabletype.net/tags/2007/08/entrydate.html

モディファイアの指定で色々オプションがつけられます。

https://movabletype.net/tags/date-formats.html

<mt:EntryCategories>

ブログ記事に指定したカテゴリの一覧のためのブロックタグです。

https://movabletype.net/tags/2007/08/entrycategories.html

<$mt:CategoryLabel$>

カテゴリ名を表示します。

https://movabletype.net/tags/2007/08/categorylabel.html

<$mt:CategoryArchiveLink$>

カテゴリアーカイブの URL を表示します。

https://movabletype.net/tags/2007/08/categoryarchivelink.html

<$mt:EntryBody$>

ブログ記事の本文を表示します。

https://movabletype.net/tags/2007/08/entrybody.html

<$mt:EntryMore$>

ブログ記事の続きに入力した内容を表示します。

https://movabletype.net/tags/2007/08/entrymore.html

これを、記事ページになるように組み立てていきます。ウェブページを作った時と同じように、考えてみましょう。

<div class="news-newsArea">
  <div class="news__titleArea">
    <p class="news__day">
      <$mt:EntryDate format="%Y.%m.%d"$>
  <p>
    <mt:EntryCategories type="primary">
      <a href="<$mt:CategoryArchiveLink$>" class="category">
        <p class="news__category">
          <$mt:CategoryLabel$>
        </p>
      </a>
    </mt:EntryCategories>
    <h3 class="news__title">
      <$mt:EntryTitle$>
    </h3>
  </div>
  <div class="news-textArea"> 
    <$mt:EntryBody$>
    <$mt:EntryMore$>
  </div>
  <!-- SNSエリア -->
  <!-- /SNSエリア -->
</div>

記事が表示されました！これでニュース本体のアーカイブ・テンプレートが完成です。
続いて、ニュースのトップページnews.htmlのインデックス・テンプレートを編集します。