Movable Typeのコンテンツタイプで使えるフィールドを試してみる

2018.10.06

Movable Type7から追加されたコンテンツタイプで使用できるフィールドを色々と試してみます。

コンテンツタイプについて

コンテンツタイプの基本的な使い方については、以前記事を投稿していますので、そちらをご確認ください。
Movable Typeのコンテンツタイプを使ってみる

今回は「テスト」という名前でコンテンツタイプを作成して、追加できる各フィールドを試してみます。
　

コンテンツタイプ

まずはコンテンツタイプです。
別で追加したコンテンツタイプのデータを紐づけることができます。

コンテンツタイプには以下のような設定項目があります。

フィールド名は「コンテンツタイプ」にしました。
一番下の「コンテンツタイプ」の項目で別のコンテンツタイプを指定します。
今回は以前の記事で作成した「アニメ」というコンテンツタイプを指定してみます。

実際の投稿画面では以下のように表示されます。
コンテンツタイプを選択をクリックします。

そのコンテンツタイプで登録しているデータ識別ラベルの一覧が表示されます。
使用するコンテンツデータを選択します。

最初の画面に選択したコンテンツタイプが表示されました。

テンプレート上で表示する場合、以下のように記述します。

<mt:Contents content_type="テスト">
  <mt:ContentField content_field="コンテンツタイプ">
    <mt:ContentField content_field="公式サイト">
      <a href="<mt:ContentFieldValue>"><mt:ContentFieldValue></a>
    </mt:ContentField>
    <mt:ContentField content_field="期間">
      <$mt:CategoryLabel$>,
    </mt:ContentField>
  </mt:ContentField>
</mt:Contents>

「テスト」が今回作成してコンテンツタイプ名、「コンテンツタイプ」がコンテンツタイプのフィールド名です。
「公式サイト」や「期間」はアニメのコンテンツタイプ内で用意しているフィールド名になります。

再構築すると、以下のように出力されました。

<a href="https://ao-buta.com/">青春ブタ野郎はバニーガール先輩の夢を見ない</a>
2018,
秋アニメ,

　

テキスト

テキストは1行テキストを入力できるフィールドです。
以下のような項目を設定できます。

実際の投稿画面では以下のような表示になります。

テンプレート上で表示する場合、以下のように記述します。

<mt:Contents content_type="テスト">
  <mt:ContentField content_field="テキスト">
    <mt:ContentFieldValue>
  </mt:ContentField>
</mt:Contents>

再構築すると、入力した文字列がそのまま出力されました。
　

テキスト(複数行)

テキスト(複数行)はいろいろな入力フォーマットでテキストなどを入力できるフィールドです。
以下のような項目を設定できます。

「入力フォーマット」の項目でフォーマットの初期値を設定できます。

例えばブロックエディタを選択した場合、実際の投稿画面では以下のような表示になります。

リッチエディタの場合は以下のようにインラインでの設定になります。

それ以外のフォーマットの場合です。

エディタのフォーマットについて詳しくは以下をご確認ください。
Movable Typeのエディタについて調べてみる

テンプレート上で表示する場合、以下のように記述します。

<mt:Contents content_type="テスト">
  <mt:ContentField content_field="テキスト(複数行)">
    <mt:ContentFieldValue>
  </mt:ContentField>
</mt:Contents>

　

数値

数値を入力するためのフィールドです。
設定できる項目は以下になります。

実際の投稿画面では以下のような表示で、inputのtypeがnumberになります。

ハイフンなど数字以外を入れるとエラーになります。

小数点以下の桁数を0にしている場合、小数点を含めるとエラーになります。

テンプレート上で表示する場合、以下のように記述します。

<mt:Contents content_type="テスト">
  <mt:ContentField content_field="数値">
    <mt:ContentFieldValue>
  </mt:ContentField>
</mt:Contents>

　

URL

URLを入力するためのフィールドです。
設定できる項目は以下になります。

実際の投稿画面では以下のような表示で、inputのtypeはtextです。

URLのフォーマットが正しくない場合はエラーになります。

テンプレート上で表示する場合、以下のように記述します。

<mt:Contents content_type="テスト">
  <mt:ContentField content_field="URL">
    <mt:ContentFieldValue>
  </mt:ContentField>
</mt:Contents>

　

日付と時刻

日付と時刻のセットを入力するためのフィールドで、後述しますが日付のみ/時刻のみを入力するフィールドもあります。
設定できる項目は以下になります。

実際の投稿画面では以下のような表示になります。

日付にフォーカスすると、以下のようにカレンダーから選択できます。

日付のフォーマットが正しくない場合、エラーが表示されます。

時刻も同様で、フォーマットが正しくない場合はエラーが表示されます。

テンプレート上で表示する場合、以下のように記述します。

<mt:Contents content_type="テスト">
  <mt:ContentField content_field="日付と時刻">
    <mt:ContentFieldValue>
  </mt:ContentField>
</mt:Contents>

フォーマットを変更することもできます。

<mt:Contents content_type="テスト">
  <mt:ContentField content_field="日付と時刻">
    <mt:ContentFieldValue format_name="rfc822">
  </mt:ContentField>
</mt:Contents>

フォーマットの変更について詳しくはこちらを参照ください。
　

日付

日付を入力するフィールドで、仕様は「日付と時刻」の日付と同じです。
設定できる項目は以下になります。

実際の投稿画面では以下のような表示になります。
入力部分にフォーカスするとカレンダーから選択できます。

テンプレート上で表示する場合、以下のように記述します。

<mt:Contents content_type="テスト">
  <mt:ContentField content_field="日付">
    <mt:ContentFieldValue>
  </mt:ContentField>
</mt:Contents>

　

時刻

時刻を入力するフィールドで、仕様は「日付と時刻」の時刻と同じです。
設定できる項目は以下になります。

実際の投稿画面では以下のような表示になります。

テンプレート上で表示する場合、以下のように記述します。

<mt:Contents content_type="テスト">
  <mt:ContentField content_field="時刻">
    <mt:ContentFieldValue>
  </mt:ContentField>
</mt:Contents>

　

セレクトボックス

セレクトボックスで複数から値を選択するフィールドです。
設定できる項目は以下になります。

一番下の項目で値の内容や初期値を設定できます。
値を複数選択できるようにすることもできます。

実際の投稿画面では以下のような表示になります。

複数選択できるようにした場合、以下のようにselectにmultiple属性を付けた状態になります。

テンプレート上で表示する場合、以下のように記述します。

<mt:Contents content_type="テスト">
  <mt:ContentField content_field="セレクトボックス">
    <mt:ContentFieldValue>
  </mt:ContentField>
</mt:Contents>

コンテンツタイプ設定画面で指定したvalueの値が出力されます。
　

ラジオボタン

ラジオボタンで複数から1つを選択するフィールドです。
設定できる項目は以下になります。

一番下の項目で値の内容や初期値を設定できます。

実際の投稿画面では以下のような表示になります。

テンプレート上で表示する場合、以下のように記述します。

<mt:Contents content_type="テスト">
  <mt:ContentField content_field="ラジオボタン">
    <mt:ContentFieldValue>
  </mt:ContentField>
</mt:Contents>

コンテンツタイプ設定画面で指定したvalueの値が出力されます。
　

チェックボックス

チェックボックスで複数から値を選択するフィールドです。
設定できる項目は以下になります。

一番下の項目で値の内容や初期値を設定できます。

実際の投稿画面では以下のような表示になります。

テンプレート上で表示する場合、以下のように記述します。

<mt:Contents content_type="テスト">
  <mt:ContentField content_field="チェックボックス">
    <mt:ContentFieldValue>
  </mt:ContentField>
</mt:Contents>

コンテンツタイプ設定画面で指定したvalueの値がそのまま出力されます。

a
b
c

選択した値に個別にタグなどを付けたい場合、MtContentField内でループになっているようなので、以下のようにします。

<mt:Contents content_type="テスト">
  <mt:ContentField content_field="チェックボックス">
    <mt:ContentFieldValue>,
  </mt:ContentField>
</mt:Contents>

再構築すると、以下のようになりました。

a,
b,
c,

　

アセット

アセットは後述の「オーディオ、ビデオ、画像」やpdfなどをアップロードできるフィールドです。
設定できる項目は以下になります。

実際の投稿画面では以下のような表示になります。

テンプレート上で表示する場合、以下のようにMtContentFieldValueを使用すると、アセットのIDのみが出力されます。

<mt:Contents content_type="テスト">
  <mt:ContentField content_field="アセット">
    <mt:ContentFieldValue>
  </mt:ContentField>
</mt:Contents>

実際に使う場合は、MtAssetURLでファイルのURLを表示するようにするとよさそうです。

<mt:Contents content_type="テスト">
  <mt:ContentField content_field="アセット">
    <$mt:AssetURL$>
  </mt:ContentField>
</mt:Contents>

　

オーディオアセット

オーディオファイルをアップロードできるフィールドです。
設定できる項目は以下になります。

実際の投稿画面では以下のような表示になります。

オーディオ以外をアップロードしようとすると、エラーになります。

テンプレート上で表示する場合、MtContentFieldValueだとアセットのIDが出力されてしまうので、MtAssetURLでファイルのURLを表示させます。

<mt:Contents content_type="テスト">
  <mt:ContentField content_field="オーディオアセット">
    <$mt:AssetURL$>
  </mt:ContentField>
</mt:Contents>

　

ビデオアセット

ビデオファイルをアップロードできるフィールドです。
設定できる項目は以下になります。

実際の投稿画面では以下のような表示になります。

テンプレート上で表示する場合、MtAssetURLでファイルのURLを表示させます。

<mt:Contents content_type="テスト">
  <mt:ContentField content_field="ビデオアセット">
    <$mt:AssetURL$>
  </mt:ContentField>
</mt:Contents>

　

画像アセット

画像ファイルをアップロードできるフィールドです。
設定できる項目は以下になります。

実際の投稿画面では以下のような表示になります。

テンプレート上で表示する場合、MtAssetURLでファイルのURLを表示させます。

<mt:Contents content_type="テスト">
  <mt:ContentField content_field="画像アセット">
    <$mt:AssetURL$>
  </mt:ContentField>
</mt:Contents>

　

埋め込みテキスト

入力した内容がそのまま出力されるフィールドです。
設定できる項目は以下になります。

実際の投稿画面では以下のような表示になります。

テンプレート上で表示する場合、brタグを使わずに改行しているとソースコード上のみで改行されます。

<mt:Contents content_type="テスト">
  <mt:ContentField content_field="埋め込みテキスト">
    <mt:ContentFieldValue>
  </mt:ContentField>
</mt:Contents>

表示でも改行させたい場合、改行をbrに変換します。

<mt:Contents content_type="テスト">
  <mt:ContentField content_field="埋め込みテキスト">
    <mt:ContentFieldValue nl2br="xhtml">
  </mt:ContentField>
</mt:Contents>

　

カテゴリ

カテゴリを選択できるフィールドです。
コンテンツタイプを設定する前に、左メニューのカテゴリセット > 新規 からカテゴリを作成します。
今回は以下のようにしました。

コンテンツタイプで設定できる項目は以下になります。
一番下のカテゴリセットで先ほど追加したカテゴリを指定します。

実際の投稿画面では以下のような表示になります。

テンプレート上で表示する場合、MtContentFieldValueだとカテゴリIDが表示されます。

<mt:Contents content_type="テスト">
  <mt:ContentField content_field="カテゴリ">
    <mt:ContentFieldValue>
  </mt:ContentField>
</mt:Contents>

実際に使う時は、MtCategoryLabelやMtCategoryBasenameなどを使うとよさそうです。

<mt:Contents content_type="テスト">
  <mt:ContentField content_field="カテゴリ">
    <$mt:CategoryLabel>
    <$mt:CategoryBasename>
  </mt:ContentField>
</mt:Contents>

　

タグ

タグを選択できるフィールドです。
設定できる項目は以下になります。

実際の投稿画面では以下のような表示になります。

テンプレート上で表示する場合、MtContentFieldValueだとタグIDが出力されます。

<mt:Contents content_type="テスト">
  <mt:ContentField content_field="タグ">
    <mt:ContentFieldValue>
  </mt:ContentField>
</mt:Contents>

実際に使う時には、MtTagNameなどを使うとよさそうです。

<mt:Contents content_type="テスト">
  <mt:ContentField content_field="タグ">
    <mt:TagName>
  </mt:ContentField>
</mt:Contents>

　

一覧

リスト項目を作成するフィールドです。
設定できる項目は以下になります。

実際の投稿画面では以下のような表示になります。
右部分で入力を増やしたり減らしたりできます。

テンプレート上で表示する場合、以下のように記述します。

<mt:Contents content_type="テスト">
  <mt:ContentField content_field="一覧">
    <li><mt:ContentFieldValue></li>
  </mt:ContentField>
</mt:Contents>

再構築すると、以下のように出力されました。

<li>一覧1</li>
<li>一覧2</li>
<li>一覧3</li>

　

テーブル

テーブルを作成するフィールドです。
設定できる項目は以下になります。

実際の投稿画面では以下のような表示になります。

左の列をクリックで行の追加、削除が行えます。
insert row aboveが行を上に挿入、insert row belowが行を下に挿入、remove rowが行の削除になります。

上の行をクリックで列の追加、削除が行えます。
insert column on the leftで列を左に挿入、insert column on the rightが列を右に挿入、remove columnが列をの削除になります。

行と列を増やして、各セルに値を入れました。
この状態で保存して、出力してみます。

テンプレートで以下のように記述します。

<mt:Contents content_type="テスト">
  <mt:ContentField content_field="テーブル">
    <mt:ContentFieldValue>
  </mt:ContentField>
</mt:Contents>

以下のような内容で出力されました。

<table>
<tr>
	<td>1-1</td>
	<td>1-2</td>
	<td>1-3</td>
</tr>
<tr>
	<td>2-1</td>
	<td>2-2</td>
	<td>2-3</td>
</tr>
<tr>
	<td>3-1</td>
	<td>3-2</td>
	<td>3-3</td>
</tr>
</table>

テーブルの上にあるボタンでセルの結合やthへの変更、テキストの中央寄せや右寄せの設定もできます。
例として、2行目の2列目・3列目を結合、1行目と1列目をthに変更、1行目を中央寄せ・td部分を右寄せにしてみます。

再構築すると、以下のように出力されました。

<table>
	<tr>
		<th class="center">1-1</th>
		<th class="center">1-2</th>
		<th class="center">1-3</th>
	</tr>
	<tr>
		<th>2-1</th>
		<td class="right">2-2</td>
		<td class="right">2-3</td>
	</tr>
	<tr>
		<th>3-1</th>
		<td class="right">3-2</td>
		<td class="right">3-3</td>
	</tr>
</table>

　

【参考サイト】

　

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

関連記事

コメントを残す

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

CAPTCHA


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

Category

Tag

Recent

2024年11月
日 月 火 水 木 金 土
 12
3456789
10111213141516
17181920212223
24252627282930