CMS「MovableType.net」にブロックエディタ追加 既存テーマも一部リニューアル

  • このエントリーをはてなブックマークに追加
2020/06/19 07:00

 シックス・アパートは、CMSサービス「MovableType.net」のコンテンツ編集機能にブロックエディタを追加した。同サービスのすべてのプランで追加料金なく利用できる。

 ブロックエディタとは、記事やウェブページのコンテンツ作成時に見出しやテキスト、表組み、画像、埋め込み動画、マルチカラム(2列、3列、4列)といったブロックを組み合わせて編集できる機能。サイトのデザインに合わせたカスタムブロックを作ることで、吹き出し付きのインタビュー記事や、複数の画像を指定しスライドショー形式で表示するブロックが作成可能。HTMLのソースコードを編集することなく、リッチなレイアウトを容易に表現できる。

 MovableType.netは、SaaS型CMSであるため任意のプラグインを追加することはできない。その代わりに、ユーザーが追加できるカスタムブロックが用意されている。拡張性が高く、さまざまな構造のコンテンツが登録しやすい編集画面を実現できるという。

 同フォーマットの特徴は、次のとおり。

ブロックを組み合わせて、記事・ウェブページを作成

 MovableType.netのブロックエディタは、記事とウェブページの編集画面にある本文・続き・複数行テキスト(カスタフィールド)で利用可能。標準では、8種類のブロックを用意している。

  • テキストブロック(段落、見出し、太字、箇条書き、中央寄せなど)
  • 画像(代替テキスト、キャプション、表示サイズ、表示位置指定)
  • ファイル(ダウンロードリンク)
  • HTML
  • oEmbed(動画やSNS投稿を埋め込み)罫線
  • テーブル(セルの追加、結合、スタイルの調整)
  • マルチカラム(2列、3列、4列)
標準で搭載する8つのブロック
標準で搭載する8つのブロック

ブロックを並び替えて編集

 テキストや画像、表などのブロックを組み合わせてコンテンツを作成できる。配置したブロックの順番はドラッグ&ドロップ、または矢印ボタンで自由に並べ替えが可能。

ドラッグ&ドロップまたは矢印でブロックの順番を並び替え
ドラッグ&ドロップまたは矢印でブロックの順番を並び替え

ユーザーがカスタムブロックを追加可能

 8つの標準ブロックに加えて、サイトごとにカスタムブロックを追加できる。CSSやJavaScriptを利用して、ファイルを扱うこともできるため、多様な型式のコンテンツをブロックにすることができる。

カスタムブロックの利用例
  • 注意やヒントを表示する複数パターンの囲み枠や、インタビュー記事用のアイコン付き吹き出しなど、スタイル付きのテキストブロックを作る
  • サイトごとのレスポンシブレイアウトの仕様に合わせた、横並び 2 カラムのブロックを作る
  • Excelのデータを読み込み、自動で表を作成する
  • 複数の画像を指定して、スライドショー形式で表示する
Excelのデータを読み込み、表を作成する例
Excelのデータを読み込み、表を作成する例

 カスタムブロックは、個別の設定ごとに「書き出す」「読み込む」ことが可能。たとえば店舗紹介用の写真・店名・メニュー・住所・営業時間をレイアウトして表示するカスタムブロックを読み込むことで、記事やウェブページ内の任意の場所で店舗紹介枠を表示することができる。

 また、テーマを「書き出す」「読み込む」際にもカスタムブロックの設定を含めることができるため、より作り込んだサトのひな形を用意できる。

ブロックの表示/非表示や、並び順の変更

 管理画面より、記事・ウェブページの編集時に利用するブロックの表示/非表示や並び順の変更、「+ブロックを追加」の左に表示するショートカットの追加の設定が可能。

ブロックエディタの表示設定
ブロックエディタの表示設定

ブロックエディタを活用して既存テーマを一部リニューアル

 サイトの構造に合わせたカスタムブロックを用意することで、ウェブページ全体をより容易に編集できるようになる。また、ブロックエディタで作成したデータはMTタグで出力できるため、モバイルからの閲覧者により素早くコンテンツを提供できるAMPに対応したソースコードへの変換も実現。また、ブロックエディタの活用例として、ふたつのテーマをリニューアルした。

シングルページ用テーマ「OnePage」

 「OnePage」は、ランディングページやシンプルな企業公式ページなどでよく利用される、1ページ内に情報を縦に積み重ねて表現するシングルページ用のテーマ。ページに表示する情報を、ブロックを組み合わせて構築できるようになった。ブロックは、横並び2カラム・横並び3カラム・右に画像を配置・左に画像を配置・表組みの5つを用意している。

OnePage テーマ2カラムブロックと、左画像ブロックを組み合わせてレイアウト
OnePage テーマ2カラムブロックと、左画像ブロックを組み合わせてレイアウト
オウンドメディア用テーマ「OwnedMedia」

 企業のオウンドメディア向けのテーマ「OwnedMedia」では、各ブロックの情報を取り出してAMP用に変換する処理を追加。

OwnedMedia テーマブロックの投稿内容をMTタグで変換しAMP対応
OwnedMedia テーマブロックの投稿内容をMTタグで変換しAMP対応

 同社は今後、MovableType.net活用ブログで、そのままインポートして使えるカスタムブロックのサンプルを発信していく。また、Movable Typeへの搭載についても計画しているとのこと。