実践編

初級

上級

コンテンツフィールドの入力をブロックエディタモードにする

ブロックエディタモードで入力しよう！

ここまでコンテンツの作成を進めてきましたが…、
トフくん、コンテンツデータの本文フィールドはどんな風に入力しているかな？

img04_01.png

toph_normal.png

簡単なページはリッチテキストモードで、
細かいタグを入れたいときはHTMLで書いているよ。

なるほど。
コンテンツデータは普段の記事・ウェブページで使える入力方式に加え、
新しくリリースされた「MTBlockEditor」プラグインをインストールすると、ブロックエディタモードという入力方式を使用することができます。
下記の手順でインストールし、ブロックエディタモードでフィールド入力を便利にしましょう！

プラグイン「MTBlockEditor」をインストール

プラグイン「MTBlockEditor」を、「github」からダウンロードします。

同ページに記載されている「README.md」を参考に、自分のMovable Type 7 の環境にインストールしてください。

ブロックエディタモードを有効化

まずはプラグインを有効にします。
左カラム上部の三点ナビゲーションをクリックし、メニューが切り替わったら [システム] - [設定] - [プラグイン]を選択します。

プラグイン設定画面が開いたら、一覧にある「 MTBlockEditor 」を有効にします。

toph_pc.png

「BlockEditor」って名前のプラグインもあるけど、これは違うの？

「BlockEditor」は、旧版のブロックエディタプラグインです。
紛らわしいので、従来のサイトで使っていない場合は無効にしてしまってOKです。

img05_01.png

プラグインの操作について、詳しくはマニュアルを参考にしてください。

プラグインのインストールや使い方について、詳しくはリリース記事にもまとめています。

ブロックエディタモードで入力！

コンテンツデータの入力画面に戻ります。
エディタモードに「ブロックエディタ」が追加されています。こちらに変更してみましょう。

img04_02a.gif

※旧版の「BlockEditor」を有効のままにしている場合は「MTブロックエディタ」という名称になっています。

下部の「＋ブロックを追加」をクリックし、入力したい形式を選択します。
1セクションごとにブロックを追加していきましょう。リンクや文字の装飾もカンタンにつけることができます。

img04_02b.gif

toph_wink.png

これがブロックエディタなんだ〜！
文字や画像の入力が直感的でとっても便利！

フィールド入力中に本文プレビュー状態で表示する

さらに、入力フィールドの中を実際の公開ページと同じようにプレビューすることもできます。

プレビューのための設定は、左カラム 設定＞投稿 のコンテンツCSSファイルで指定で行います。
インデックス・テンプレートに専用のCSSファイルを作成するなどの方法で用意するのがオススメです。

img04_03.png

CSSは、以下のようにコンテンツタイプ、フィールドを指定し、必要に応じてCSSセレクタやクラス名も指定します。

■コンテンツタイプを指定
[data-content-type-name="コンテンツタイプ名"] {
  color: #000;
}
[data-content-type-unique-id="ユニークID"] {
  color: #000;
}

■コンテンツフィールドを指定
[data-field-name="フィールド名"] {
  color: #000;
}
[data-field-unique-id="ユニークID"] {
  color: #000;
}

■コンテンツタイプ、フィールドを指定し、その中のCSSセレクタやクラスを指定
[data-content-type-name="コンテンツタイプ名"] [data-field-name="フィールド名"] h1 {
  color: #000;
}
[data-content-type-name="コンテンツタイプ名"] [data-field-name="フィールド名"] .class01 {
  color: #000;
}

先ほど設定画面で指定したコンテンツCSSファイルに、記述していきます。

img04_04.png

再構築後、フィールド内にCSSが反映されます。

img04_05.png

toph_socialgood.png

入力中にデザインの確認ができるんだ！
ページを公開したときの様子が想像しやすい！

カスタムブロックを活用しよう

既存のブロックを組み合わせて、独自のブロック、カスタムブロックの作成ができます。
例えば、<div>の囲みの中に画像やテキストが入っている…といった、htmlの記述が必要になるテキストエリアも、カスタムブロックの設定をしておけば1クリックで挿入できるのです。
今回のサイトでは必要ではないかもしれませんが、ここで使い方を覚えておきましょう。

toph_socialgood.png

へえ〜！！じゃあボクが今しゃべっている
この枠を作ってみるのはどう？

では、このページのトフくんコメントエリアのような「画像＋テキスト」のブロックを作っていきましょう！

左カラムから[ブロックエディタ] - [カスタムブロック]を選択し、カスタムブロックの管理画面に入ります。
上部の「＋ 新規作成」をクリックし、作成画面に移動しましょう。

img04_06.png

カスタムブロックの作成画面に入りました。
まずは上から3つのフィールドを以下のように設定します。

  • 名前 ：アイコン＋コメント
  • アイコン : 任意の画像
  • 識別子 : toph_comment

img04_07.png

続いて、重要なブロックを設定していきます。
ここで作りたいカスタムブロックは画像とテキストのブロックになります。
なので、フィールド下部の「＋ブロックを追加」をクリックし、「画像」ブロックと「複数行テキスト」ブロックを挿入し、必要なパーツを用意しましょう。

各ブロックの設定をしていきます。

画像ブロック

  • ラベル：アイコン
  • 説明：（適宜）
  • クラス名：tophwrap__img

テキストブロック

  • ラベル：テキスト
  • 説明：（適宜）
  • クラス名：tophwrap__balloon

ブロックの入力が完了したら、コンテナ要素で包む の設定をします。

コンテナ要素で包む

  • 編集した内容をDIV要素で囲む：チェック
  • クラス名：tophwrap

img04_08.png

以上で、設定は完了です。

コンテンツデータの作成画面に戻り、今作成したカスタムブロックを使ってみましょう。
「＋ブロックを追加」メニューの中に、「アイコン＋コメント」ブロックが入っています。選択すると、画像ブロック：アイコン、テキストブロック：テキストの入ったブロックが挿入されます。

img04_09.png

各ブロックに入力していきましょう。

img04_11.gif

通常のブロックと同様、対応するスタイルをCSSで設定すれば入力中にもプレビューが可能です。

img04_10.png

toph_wink.png

<div>の中に入れ子になっているブロックも
プレビューできるんだね♪
入力も確認もバッチリ！

入力方式という点も、コンテンツタイプ化のメリットだということがお分かりいただけたでしょうか？
ウェブページの入力にもブロックエディタが使えるよう、コンテンツタイプに作り変えていきましょう！

ウェブページをコンテンツタイプ化する

現在、セミナーの個別ページはウェブページで出力しています。
ウェブページはタイトルと本文の構成で、ページの内容は、本文フィールド内でHTMLを入力していました。

img04_12.png

こちらもコンテンツタイプに作りかえていきます。
もちろん本文の入力方式にはブロックエディタを設定して、内容入力のサポートも行いましょう！

セミナー情報用のコンテンツタイプを用意する

まずはセミナーの個別ページとして使用しているウェブページの代わりとして運用する、セミナー情報用のコンテンツタイプを用意していきましょう。
左カラムから、[コンテンツタイプ] - [新規]で、新規コンテンツタイプ作成画面に入り、以下の設定でコンテンツタイプを作成します。

  • 名前
    セミナー情報

  • テキスト
    名前：タイトル　このフィールドは必須ですか？：ON 表示オプション：必ず表示

  • テキスト（複数行）
    名前：本文　表示オプション：なし　入力フォーマット：ブロックエディタ
    リッチテキストの入力支援ボタンをすべて利用する：OFF

  • テキスト（複数行）
    名前：追記　表示オプション：なし　入力フォーマット：ブロックエディタ
    リッチテキストの入力支援ボタンをすべて利用する：OFF

入力フォーマットをブロックエディタにしているのがポイントです。
ついでに、コンテンツタイプの編集からユーザー識別ラベルを「タイトル」フィールドに変更しておくと、コンテンツデータ一覧画面が見やすくなります。

img04_13.png

設定が終わったら、保存しましょう。

toph_consent.png

コンテンツフィールドの並びが
記事やウェブページと似ているね

コンテンツデータを入力する

作成ができたら、左カラムの[コンテンツデータ] - [セミナー情報]が表示されることを確認し、管理画面を開きます。
「＋セミナー情報を作成」からコンテンツデータを作成します。
先ほど設定したフィールドが表示されていますので、元のページを参考に内容を入力していきましょう。

img04_14.png

入力フォーマットをブロックエディタに設定したので、本文・追記のフィールドは入力モードがデフォルトでブロックエディタモードになっています。
シンプルなページであればテキストブロックを使用すれば、見出しなども簡単につけられますし、罫線やテーブルもブロックから追加できます。
また、HTMLブロックを使用すれば以前記述していたようなHTMLタグ入りの文言でも扱えます。

toph_socialgood.png

ブロックエディタモードで入力が便利になったよ！
テーブルやカラムもカンタンに入れられるから、
初級者から上級者までカバーしているんだね！

入力を完了して、次に進みましょう。

コンテンツを出力するテンプレートを作成

セミナー情報ページのテンプレートを出力するテンプレートを作っていきます。
左カラム[デザイン] - [テンプレート]でテンプレートの一覧画面に入り、コンテンツタイプアーカイブテンプレートを新規作成します。
まずは以下を設定しておきましょう。

  • テンプレート名：セミナー情報テンプレート
  • コンテンツタイプ：セミナー情報

テンプレートの内容を記述します。
HTML部分はウェブページとして使用していたものと同じなので、ウェブページのアーカイブテンプレートを開いて内容をコピーしてきます。
セミナー情報テンプレートの内容にペーストし、この中のウェブページに関するMTタグをコンテンツタイプ用のテンプレートに書き換えます。

<h2><mt:PageTitle></h2>
<section>
    <$mt:PageBody$>
</section>
<section>
    <$mt:PageMore$>
</section>
↓
<mt:Contents content_type="セミナー情報">
    <h2>
        <mt:ContentField content_field="タイトル">
            <mt:PageTitle>
        </mt:ContentField>
    </h2>
    <mt:If tag="ContentField" content_field="本文">
    <section>
        <mt:ContentField content_field="本文">
            <$mt:PageBody$>
        </mt:ContentField>
    </section>
    </mt:If>
    <mt:If tag="ContentField" content_field="追記">
        <section>
            <mt:ContentField content_field="追記">
                <$mt:PageMore$>
            </mt:ContentField>
        </section>
    </mt:If>
</mt:Contents>

テンプレートタグリファレンスはこちらです。

保存と再構築をして、完了です。
構築後、ページを確認してみましょう。

img04_15.png

toph_wink.png

バッチリ！！

ウェブページをコンテンツタイプに作り変え、とっても便利になりました！
ブロックエディタに初めて触れる方も、この機会にぜひ使ってみてくださいね。

ここまでで、テストサイトが完全にコンテンツタイプ化されました👏
そして実践編（上級）も修了です！お疲れ様でした。
コンテンツタイプの仕組みや、使い方が身についてきたのではないのでしょうか？

ここまでは操作を重点的に学習してきましたが、実はコンテンツタイプの真骨頂は「サイトの設計」をしてこそ見えてくるものです。
ここから先は設計編 として、コンテンツタイプを活用する前提で１からウェブサイトを構築する際に役立つ考え方をご紹介します。

今までよりも理論的な内容になるため難しく感じるかもしれませんが、Movable Type 7 を使ってサイトを構築する方にとって必見の内容となっています。

toph_fine.png

続いて…設計編へ進む！

Copyright © 2021 Six Apart. All Rights Reserved.