Movable Typeで「お知らせ」を作る

以前、Movable Typeでトップページを作る方法をご紹介いたしました。

Movable Typeでトップページを作る
以前、Movable Typeをローカルで構築する方法をご紹介いたしました。 今回は上記の続きで、実際にMovable TypeにWe...

前回の続きで、今回は「お知らせ」を作る方法をご紹介いたします。

※本記事はWindows10 Pro(64bit)版、Movable Type6.2で行ったものを掲載しています。ご了承ください。

元ソース

Movable Typeに組み込む前のソースをご紹介いたします。

下記は一覧と詳細ページのHTMLのソースになります。

html

お知らせ一覧

お知らせ詳細

設定

ブログ

Movable Typeでは、「お知らせ」など常に更新されるようなコンテンツは、「ブログ」に相当します。まずは「お知らせ」のブログを作成し、設定を行います。

下記の画像のように、「ブログ」メニューの「新規」から「お知らせ」のブログ設定を行います。

Movable Type ブログ作成

  1. 「ブログ」の「新規」からブログ設定ページへ。
  2. ブログ名を決める。
  3. ブログURLを決める。
  4. ブログパスを決める。

設定を一通り終えれば、「ブログの作成」ボタンを押下して「お知らせ」ブログを作成します。

カスタムフィールド

「お知らせ」はサムネイル画像を投稿できるようにしますので、サムネイル画像用のカスタムフィールドを作ります。

カスタムフィールドはMovable Typeのデフォルトで存在しないフィールドを作る機能です。

Movable Type カスタムフィールド作成

  1. 「カスタムフィールド」の「新規」からカスタムフィールドの設定ページへ。
  2. 「記事」を選択。
  3. フィールド名を決める。
  4. 「画像」を選択。
  5. 「ベースネーム」を決める。
  6. テンプレートで記述する「テンプレートタグ」を決める。
  7. 「保存」ボタンを押下する。

カスタムフィールドの設定は以上です。

テンプレートを設定する

「お知らせ」ブログのテンプレートを設定するために、「お知らせ」ブログに行きます。

Movable Type「お知らせ」ブログ行く

  1. 「ブログ」メニューの一覧を選択。
  2. 作成した「お知らせ」ブログを選択。

メインページ(メイン部分)

「お知らせ」ブログの一覧にあたるメインページのテンプレートにいきます。

Movable Type メインページ

  1. 「デザイン」メニューの「テンプレ-ト」を選択。
  2. 「インデックステンプレート」の「メインページ」を選択。

「メインページ」のテキストエリアでソースを記述します。

Movable Type メインページソース記述画面

ソースを記述したら、「保存と再構築」ボタンを押下します。

「メインページ」テンプレートのソースは下記のようになります。

メインページ解説1

「<MTSetVars>」は変数の名前とその値をまとめて設定できるブロックタグで、この「<MTSetVars>」内で、テンプレート内で記述してきた変数をまとめてセットしています。

  • 「site_url=<MTBlogParentWebsite><$MTWebsiteURL$></MTBlogParentWebsite>」とすることで、「site_url」という変数名を決め、値を入力しています。
  • 「page_title=<$MTBlogName$>」で「page_title」という変数名を決め、値を入力しています。「<$MTBlogName$>」には「お知らせ」がセットされています。
  • 「page_url=<$MTBlogURL$>」で「page_url」という変数名を決め、値を入力しています。
  • 「page_description=<$MTBlogDescription$>」で「page_description」という変数名を決め、値を入力しています。ブログ設定で紹介文を入力していると、ディスクリプションに入力した紹介文が表示されます。
  • 「page_keywords=<$MTBlogName$>,Movable Type テスト」で「page_keywords」という変数名にトップページのキーワード、「Movable Type テスト」を直接ここで入力しています。「<$MTBlogName$>」には「お知らせ」が入ります。

メインページ解説2

「$mt:Include module=”HTMLヘッダー”」で「HTMLヘッダー」をインクルードしています。

「parent=”1″」は前回作成した、親ウェブサイトにあるHTMLヘッダーモジュールをインクルードするために使用しています。

メインページ解説3

「$mt:Include module=”バナーヘッダー”」で「バナーヘッダー」をインクルードしています。

「parent=”1″」は前回作成した、親ウェブサイトにあるバナーヘッダーモジュールをインクルードするために使用しています。

メインページ解説4

下記は投稿されるお知らせの一覧が出力される部分になります。

「<MTEntries lastn=”0″ >」から「</MTEntries>」で投稿されさるエントリーを繰り返します。「lastn=”0″」は投稿される全エントリーを表示するために使用しています。

「MTEntryPermalink」で投稿された詳細ページへのリンクを可能にしています。

下記のimgタグ内で使われている「tag=”EntryThumb”」はカスタムフィールドで作成した、テンプレートタグ「EntryThumb」を使用しています。

「<MTEntryThumbAsset><$MTAssetThumbnailURL width=”200″ regex_replace=”/https?://[^/]+/g”,””$></MTEntryThumbAsset>」でサムネイル画像を表示しています。

はサムネイル画像が投稿されなかった場合に表示するNoImage画像です。

「$MTGetVar name=”site_url”」の「site_url」には「メインページ解説1」で記述されている、「<MTBlogParentWebsite><$MTWebsiteURL$></MTBlogParentWebsite>」により、サイトパスがセットされていますので、NoImage画像が設置されている階層を取得して、NoImage画像を表示しています。

「<$MTEntryTitle$>」で投稿タイトルを表示しています。

「<$mt:EntryBody count_characters=”1″ setVar=”cntWord”$>」は本文の文字数をカウントして比較するのに使用しています。

「<MTEntryBody words=”48″ convert_breaks=”0″ remove_html=”1″$><mt:if name=”cntWord” gt=”52″>…</mt:if>」で投稿した本文の一部を表示するようにしています。

メインページ解説5

「$mt:Include module=”バナーフッター”」で「バナーフッター」をインクルードしています。

「parent=”1″」は前回作成した、親ウェブサイトにあるバナーフッターーモジュールをインクルードするために使用しています。

メインページは以上となります。

記事(詳細)

次は「お知らせ」ブログの詳細にあたる記事のテンプレートにいきます。

Movable Type 記事

  1. 「デザイン」メニューの「テンプレ-ト」を選択。
  2. 「アーカイブテンプレート」の「記事」を選択。

「記事(詳細)」のテキストエリアでソースを記述します。

Movable Type 記事ソース記述画面

ソースを記述したら、「保存と再構築」ボタンを押下します。

「記事(詳細)」テンプレートのソースは下記のようになります。

解説1

「<MTSetVars>」は変数の名前とその値をまとめて設定できるブロックタグで、この「<MTSetVars>」内で、テンプレート内で記述してきた変数をまとめてセットしています。

  • 「site_url=<MTBlogParentWebsite><$MTWebsiteURL$></MTBlogParentWebsite>」とすることで、「site_url」という変数名を決め、値を入力しています。
  • 「page_title=<$MTBlogName$>」で「page_title」という変数名を決め、値を入力しています。「<$MTBlogName$>」には「お知らせ」がセットされています。
  • 「page_url=<$MTBlogURL$>」で「page_url」という変数名を決め、値を入力しています。
  • 「page_description=<$MTBlogDescription$>」で「page_description」という変数名を決め、値を入力しています。ブログ設定で紹介文を入力していると、ディスクリプションに入力した紹介文が表示されます。
  • 「page_keywords=<$MTBlogName$>,Movable Type テスト」で「page_keywords」という変数名にトップページのキーワード、「Movable Type テスト」を直接ここで入力しています。「<$MTBlogName$>」には「お知らせ」が入ります。

解説2

「$mt:Include module=”HTMLヘッダー”」で「HTMLヘッダー」をインクルードしています。

「parent=”1″」は前回作成した、親ウェブサイトにあるHTMLヘッダーモジュールをインクルードするために使用しています。

解説3

「$mt:Include module=”バナーヘッダー”」で「バナーヘッダー」をインクルードしています。

「parent=”1″」は前回作成した、親ウェブサイトにあるバナーヘッダーモジュールをインクルードするために使用しています。

解説4

「<MTEntryTitle>」で記事のタイトルを表示します。

解説5

「<$MTEntryDate format=”%Y年%b月%e日(%a)”$>」で記事の投稿年月日と曜日を表示します。

解説6

「$MTEntryBody」で記事の投稿本文を表示します。

解説7

「$mt:Include module=”バナーフッター”」で「バナーフッター」をインクルードしています。

「parent=”1″」は前回作成した、親ウェブサイトにあるバナーフッターーモジュールをインクルードするために使用しています。

記事を投稿する

テンプレートの準備ができましたので、実際に記事を投稿してみます。

例として、下記の画像の手順で記事を投稿してみます。

記事の投稿手順

Movable Type 記事の投稿手順

  1. 「記事」メニューの新規から「記事の作成」に行く。
  2. 「表示オプション」を押下する。
  3. 「サムネイル画像」にチェックを入れる。
  4. 「タイトル」を入力する。
  5. 「本文を」入力する。
  6. 「サムネイル画像」を選択する。

「サムネイル画像」はカスタムフィールドで作成しているので、デフォルトでは表示しません。カスタムフィールドで作成したフィールドは必ず、「表示オプション」から表示する必要があります。

サムネイル画像をアップロードする

サムネイル画像をアップロードする場合は下記の手順で行います。

Movable Type

  1. 画像をアップロードするフィールドにドラッグする(この機能は6.2から付きました)。
  2. サムネイル画像を確認する。
  3. 「挿入」ボタンを押下する。

記事を公開する

投稿画面に戻った後、サムネイルが表示されているのを確認し、「公開」ボタンを押下して記事を公開します。

Movable Type

投稿記事を確認する

ブログ設定で入力したURLにアクセスして、お知らせの一覧にいきます。

お知らせ一覧

赤枠で囲った部分が動的に出力された、お知らせの一覧部分になります。

Movable Type

サムネイル画像、またはタイトルのリンクを押下すると記事(詳細)ページに遷移します。

記事(詳細)

一覧から記事(詳細)ページに遷移しました。

Movable Type

入力したタイトルの「テスト投稿」、本文の「テスト内容」、記事を投稿した年月日と曜日が表示されていることがわかります。

複数投稿した場合

複数記事を投稿した場合、デフォルトでは、あとから投稿した記事が上から順に表示されます。

下記は本文を多く記述した「テスト投稿2」です。メインページで記述した「 <MTEntryBody words=”48″ convert_breaks=”0″ remove_html=”1″$><mt:if name=”cntWord” gt=”52″>…</mt:if>」によって、本文の一部のみが表示されています。

Movable Type 記事一覧(複数)

下記は「テスト投稿2」の記事(詳細)ページです。本文の内容が多いことがわかると思います。

info15

出力したソース

今回の過程で作成した一覧との記事のソースをブラウザで出力すると、下記のようになります。

一覧のソース

記事のソース(テスト投稿2)

まとめ

  • 元ソースを用意する。
  • ブログとカスタムフィールドの設定を行う。
  • ブログのメインページと記事のテンプレートを設定する。

、お使いのパソコンやMovable Typeのバージョンによっては上記の方法ではできないかもしれません。

時間があれば今回は手を付けなかった、パンくず、ページャー、カテゴリー分け、月刊のアーカイブ表示の設定なども掲載していければと思っています。

※本記事はWindows10 Pro(64bit)版、Movable Type6.2で行ったものを掲載しています。ご了承ください。

スポンサーリンク
記事のタイトルとURLをコピーする

シェアする

フォローする

Movable Typeで「お知らせ」を作る
この記事をお届けした
PC ウェブログの最新ニュース情報を、
いいねしてチェックしよう!