Movable Typeのブログ投稿を使ってみる

2016.03.20

Movable Typeのブログ投稿とテンプレートについて見てみます。

ブログの作成

Movable Typeにログイン後、左上のユーザーダッシュボードから対象のウェブサイトを選択します。

try-a-blog-post-with-the-output-of-the-movable-type01

左メニューのブログ > 新規 を選択します。

try-a-blog-post-with-the-output-of-the-movable-type02

作成するブログの情報を入力します。
ブログURLの末尾は「/」になるので注意して下さい。

try-a-blog-post-with-the-output-of-the-movable-type03

ブログを作成したら再構築して完了です。
　

ブログの記事投稿

ブログの記事を投稿する前に、カテゴリとカスタムフィールドを設定してみます。

左メニューの記事 > カテゴリ を選択して、カテゴリを作成します。
カテゴリ名を入力して追加をクリックします。

try-a-blog-post-with-the-output-of-the-movable-type04

必要に応じてカテゴリの順番の入れ替えやディレクトリ名の指定なども行えます。

try-a-blog-post-with-the-output-of-the-movable-type05

次に左メニューのカスタムフィールド > 新規 を選択して、カスタムフィールドを作成します。
システムオブジェクトでカスタムフィールドを追加するオブジェクトを選択できます。
今回は記事に1つ入力エリアを増やしてみます。

try-a-blog-post-with-the-output-of-the-movable-type06

名前を「ジャンル」、ベースネームを「genre」、テンプレートタグを「EntryData」としました。

次に左メニューの記事 > 新規 を選択して、ブログの記事を投稿します。
先ほど追加したカスタムフィールドは、右上の表示オプションを選択して、追加したフィールド名にチェックを入れると表示されます。
今回はタイトルと本文、カテゴリ、タグ、カスタムフィールド項目の入力と記事アイテムの追加を行って投稿しました。

try-a-blog-post-with-the-output-of-the-movable-type07

表示確認用にいくつか記事を投稿したら完了です。
　

メインページに記事一覧を表示

テンプレートのカスタマイズは、左メニューのデザイン > テンプレートから行えます。
今回はインデックステンプレートのメインページと アーカイブテンプレートの記事を修正します。

try-a-blog-post-with-the-output-of-the-movable-type08

まずはメインページに記事一覧の情報を表示してみます。

HTML

<mt:Entries>
<mt:EntriesHeader>
<div class="article-list">
</mt:EntriesHeader>
	<div id="entry-<$mt:EntryID$>" class="article-item cate-<$mt:CategoryBasename default="no_category"$>">
		<mt:EntryAssets type="image" limit="1">
		<img src="<$mt:AssetThumbnailURL width="300"$>">
		</mt:EntryAssets>
		<p class="article-item_title">タイトル:<a href="<$mt:EntryPermalink$>"><$mt:EntryTitle$></a></p>
		<p class="article-item_category">カテゴリ:<$mt:EntryCategory$></p>
		<div class="article-item_published">公開日:<$mt:EntryDate$></div>
		<div class="article-item_updated">更新日:<$mt:EntryModifiedDate$></div>
		<mt:EntryIfTagged>
		<ul class="article-item_tags">
			<mt:EntryTags>
			<li><$mt:TagName$></li>
			</mt:EntryTags>
		</ul>
		</mt:EntryIfTagged>
		<div class="article-item_content">本文:<$mt:EntryBody$></div>
		<div class="article-item_customField_text">カスタムフィールド:<mt:If tag="EntryData"><mt:EntryData></mt:If></div>
	</div>
<mt:EntriesFooter>
	<div class="article-item_count">件数:<$mt:EntriesCount$></div>
</div>
</mt:EntriesFooter>
</mt:Entries>

再構築すると投稿内容が確認できました。

try-a-blog-post-with-the-output-of-the-movable-type09

ブロックタグ

<mt:Entries>～</mt:Entries> 記事アーカイブ以外のテンプレートで記事一覧を表示するときに使用。
並びは新着順。
<mt:EntriesHeader>～</mt:EntriesHeader> MTEntriesの中で、最初の記事のときだけ実行。
<mt:EntriesFooter>～</mt:EntriesFooter> MTEntriesの中で、最後の記事のときだけ実行。
<mt:EntryAssets>～</mt:EntryAssets> 特定の記事で利用しているアイテムの一覧を表示する時に使用。
typeでアイテムの種類を絞り込み、limitで表示するアイテム数を制限。
<mt:EntryIfTagged>～</mt:EntryIfTagged> タグが記事に設定されているとき、囲まれた内容を処理。
<mt:EntryTags>～</mt:EntryTags> 記事に設定されたタグ一覧を表示するときに使用。
<mt:If>～</mt:If> 設定した条件により実行内容を分けるときに使用。

ファンクションタグ

<$mt:EntryID$> 記事のID番号を表示。
<$mt:EntryCategory$> 記事のメインカテゴリを表示。
<$mt:CategoryBasename$> カテゴリのベースネームを表示。
<$mt:AssetThumbnailURL$> サムネイルのURLを表示。
widthかheightを指定することで、縦横比を維持したまま指定したサイズのURLが表示される。
<$mt:EntryTitle$> 記事のタイトルを表示。
<$mt:EntryCategory$> 記事のメインカテゴリを表示。
<$mt:EntryDate$> 記事の公開日を表示。
<$mt:EntryModifiedDate$> 記事の更新日時を表示。
<$mt:TagName$> 特定のタグの名前を表示。
<$mt:EntryBody$> 記事の本文を表示。
<$mt:EntriesCount$> 出力される記事の件数を表示。

記事一覧(MTEntries)の設定

記事一覧を表示するときに使う<mt:Entries>～</mt:Entries>はよく使用するので、絞り込みなどの設定方法をいくつか見てみます。

sort_by=”foo“ 記事を並び替える対象を指定。
modified_on(更新日順)・title(記事のタイトル順)・text(本文) など
sort_order=”ascend | descend“ 並び順を指定。
ascendが昇順(新しいものが下)でdescendが降順(新しいものが上)。
初期値はdescend。
lastn=”N“ 出力する記事の件数を制限。
他に絞り込みの設定がある場合、lastnの件数で絞り込まれてから実行される。
limit=”N“ 出力する記事の件数を制限。
他に絞り込みの設定がある場合、絞り込みが行われた後にlimitで件数を制限する。
field:customfieldbasename=”foo“ customfieldbasename部分に「ベースネーム」、foo部分にその値を指定して、出力する記事を絞り込む。
offset=”N“ 指定した数の記事を除外して表示。
値に3を指定すると、上から3件の記事を除外してリスト表示。
category=”category_foo“
categories=”category_foo“		 記事を特定のカテゴリに属するものだけに絞り込む。
ORやANDを使って複数指定、NOTで除外の指定も可能。
tag=”tag_foo“
tags=”tag_foo AND tag_bar“		 指定したタグが設定されている記事だけに絞り込む。
ORやANDを使って複数指定、NOTで除外の指定も可能。
id=”entry_id“ 指定した記事IDの記事のみに絞り込み。
days=”N“ 現在の日から指定日数内に投稿された記事に絞り込む。
unique=”1 | 0“ unique=”1″の場合、同じテンプレート内で使用したMTEntriesで出力した記事を除いて出力。
初期値は0。
glue=”foo“ 出力される記事と記事の間の文字を設定。

　

カテゴリ一覧の表示

メインページにカテゴリ一覧を表示してみます。

<ul class="category-list">
	<mt:Categories>
	<li class="category-item">
		ID:<$mt:CategoryID$><br>
		<a href="<$mt:CategoryArchiveLink$>"><$mt:CategoryLabel$>(<$mt:CategoryCount$>)</a><br>
		説明文:<$mt:CategoryDescription$>
	</li>
	</mt:Categories>
</ul>
<div class="category-item_count">件数:<$mt:BlogCategoryCount$></div>

カテゴリ一覧が表示できました。

try-a-blog-post-with-the-output-of-the-movable-type10

ブロックタグ

<mt:Categories>～</mt:Categories> カテゴリの一覧を表示するときに使用。
メインカテゴリ・サブカテゴリを区別せずに表示。

ファンクションタグ

<$mt:CategoryID$> カテゴリのID番号を表示。
<$mt:CategoryArchiveLink$> カテゴリアーカイブのURLを表示。
<$mt:CategoryLabel$> カテゴリ名を表示。
<$mt:CategoryCount$> 未公開の記事を除いたカテゴリに含まれる記事 数を表示。
<$mt:CategoryDescription$> カテゴリの編集画面で入力した「説明」を表示。
<$mt:BlogCategoryCount$> ブログ内のカテゴリの総数を表示。

　

タグ一覧の表示

メインページにタグ一覧を表示してみます。

HTML

<ul class="tag-list">
	<mt:Tags>
	<li class="tag-item">
		ID:<$mt:TagID$><br>
		<a href="<$mt:TagSearchLink$>"><$mt:TagName$>(<$mt:TagCount$>)</a><br>
		label:<$mt:TagLabel$><br>
		rank:<$mt:TagRank$><br>
	</li>
	</mt:Tags>
</ul>

タグ一覧が表示できました。

try-a-blog-post-with-the-output-of-the-movable-type11

ブロックタグ

<mt:Tags>～</mt:Tags> カテゴリの一覧を表示するときに使用。
メインカテゴリ・サブカテゴリを区別せずに表示。

ファンクションタグ

<$mt:TagID$> タグのID番号を表示。
<$mt:TagSearchLink$> タグが設定された記事やウェブページを検索するURLを表示。
<$mt:TagName$> 特定のタグの名前を表示。
<$mt:TagLabel$> 特定のタグの名前を表示します。
(機能はMTTagNameと同じ。)
<$mt:TagCount$> タグが設定された記事・ウェブページの数を表示。
<$mt:TagRank$> タグの利用頻度を表示。
タグクラウドを表示する時に使用するもので、数値が小さい方が頻度が高い。

　

記事ページの表示

記事ページに該当記事の情報を表示してみます。
基本的にはメインページに記事一覧を出したときと同じです。

HTML

<div id="entry-<$mt:EntryID$>" class="article-detail cate-<$mt:CategoryBasename default="no_category"$>">
	<mt:EntryAssets type="image" limit="1">
	<img src="<$mt:AssetThumbnailURL width="300"$>">
	</mt:EntryAssets>
	<p class="article-detail_title">タイトル:<a href="<$mt:EntryPermalink$>"><$mt:EntryTitle$></a></p>
	<p class="article-detail_category">カテゴリ:<$mt:EntryCategory$></p>
	<div class="article-detail_published">公開日:<$mt:EntryDate$></div>
	<div class="article-detail_updated">更新日:<$mt:EntryModifiedDate$></div>
	<mt:EntryIfTagged>
	<ul class="article-detail_tags">
		<mt:EntryTags>
		<li><$mt:TagName$></li>
		</mt:EntryTags>
	</ul>
	</mt:EntryIfTagged>
	<div class="article-detail_content">本文:<$mt:EntryBody$></div>
	<div class="article-detail_customField_text">カスタムフィールド:<mt:If tag="EntryData"><mt:EntryData></mt:If></div>
</div>

他にも月別やカテゴリ別の記事リストページがありますが、今回は省略します。
　

【参考サイト】

　

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

Category

Tag

Recent

2024年4月
日 月 火 水 木 金 土
 123456
78910111213
14151617181920
21222324252627
282930