Movable Type7でエディタテンプレート

: らら

2022.04.04

Movable Type

はじめに

以前は、ckeditorとか入れて、ckeditorのテンプレート機能を使って、本文エリアにデフォルトのレイアウトをいれることができていましたが、

Movable Type7になってブロックエディタ(MTBlockEditor)という、プラグイン(無料)があるのを発見、試しに使用してみることに・・

Movable Type Block Editorのインストール

下記Git Hubサイトよりzipをダウンロードします。

https://github.com/movabletype/mt-plugin-MTBlockEditor/releases

Movable Type7ブロックエディタ１

zipを解凍すると下記になります。

plugins,mt-staticの２つをMovable Typeをインストールしたフォルダーへコピーします。

Movable Type7ブロックエディタ２

使用条件

Movable Type 7 r.4609 以降

　Microsoft Edge

Mobile

　Google Chrome (iOS/iPadOS, Android)

　Safari (iOS/iPadOS)

　Google Chrome

　Firefox

　Safari

プラグインを有効にする

Movable Typeの設定→プラグインから有効にします。

Movable Typeでログインすると下記がでるのでアップグレード開始

Movable Type7ブロックエディタ３

上記が完了するとプラグインが有効になります。

一応、Movable Typeの設定→プラグインから確認します。

つかってみる。

記事を新規で作成

フォーマットをMTブロックエディタを選択

Movable Type7ブロックエディタ４

デフォルトのメニュー

Movable Type7ブロックエディタ５

マルチカラムを選択

おお～これですね。ほしいの～　２カラム、３カラム、４カラムまでありますね

Movable Type7ブロックエディタ６

左テキストブロック、右画像をいれてみました。

おお～これこれ～、いいですねこれ！！

Movable Type7ブロックエディタ７

一番初めにいれた、テキストブロック、初期は段落でした。

Movable Type7ブロックエディタ８

変えれる～～、ちょっと感動です。w

Movable Type7ブロックエディタ９

ちなみに罫線hrタグもいれてます。

おお～、いいやん。。これ！

Movable Type7ブロックエディタ１０

実際のソース

テキストブロック


<div class="mt-be-columns" style="display: flex">
	<div class='mt-be-column'><p>マルチブロック２カラムのテキスト</p></div>
	<div class='mt-be-column'><p><img src="/2022/Lighthouse.jpg" alt="" width="1024" height="768" class="asset asset-image" style="max-width:100%;height:auto;display:block"/></p></div>
</div>
<hr/>

でもあとpとかにクラス設定できたら超便利なのに

調べてみる。こういう場合はブラグインの設定ですね。！

なさげ・・・

Movable Type7ブロックエディタ１１

と、プラグインみてたら。メニューができているじゃないですか～

Movable Type7ブロックエディタ１２

メニュー見てみると、カスタムブロックってあるじゃないですか～。どきどき。新規押して！

Movable Type7ブロックエディタ１３

むむ。むずかしそう・・？！

Movable Type7ブロックエディタ１４

ん？どういうこと？、あ！ここでテンプレートつくれるのか？！ためす・・

Movable Type7ブロックエディタ１５

１行テキストを追加してみる

ラベル名　クラス名など設定できる。おお。

Movable Type7ブロックエディタ１６

マルチカラムを選択してみる（２カラム）ここもクラス名が定義できる。

Movable Type7ブロックエディタ１７

保存後、記事の新規作成で、カスタムパーツ１がメニューにできている。

Movable Type7ブロックエディタ１８

選択するとカスタムブロックで作成したテンプレートのひな型がデータ、文章とか画像を登録してみて表示してみた。

Movable Type7ブロックエディタ１９

実際のソース

カスタムブロックで指定したクラス名が入っているし、指定したテンプレートになってますね～


<section class="entry-content clearfix">
	<div>
		<p class="class1">説明文をいれてみました。</p>
		<div class="mt-be-columns classm2" style="display: flex">
			<div class='mt-be-column class_l'><p>テスト</p></div>
			<div class='mt-be-column class_r'><p><img src="/2022/Lighthouse.jpg" alt="" width="1024" height="768" class="asset asset-image" style="max-width:100%;height:auto;display:block"/></p></div>
		</div>
	</div>
</section>