<!-- mt-beb t="core-image" m='{"className":"body_logo"}' --><p class="body_logo"><img src="https://movabletype.github.io/mt-block-editor/demo/images/logo.png" class="body_logo" alt=""/></p><!-- /mt-beb --><!-- mt-beb --><h1 class="product-name">Movable Type Block Editor</h1><!-- /mt-beb --><!-- mt-beb --><hr><!-- /mt-beb --><!-- mt-beb --><p><a href="https://movabletype.net" target="_blank" rel="noopener">MovableType.net</a> や <a href="https://www.movabletype.jp/" target="_blank" rel="noopener">Movable Type</a> では、新しく追加された記述形式「<strong>ブロックエディタ</strong>」を利用できます。<br />ブロックエディタでは、ブロックを追加していくことでコンテンツを作成することができます。</p><!-- /mt-beb --><!-- mt-beb --><p>ブロックの種類も様々に用意されています。<br /> 例えば、以下では<strong>テキストブロック</strong>による見出しと、リストを挿入しています。</p><!-- /mt-beb --><!-- mt-beb --><h2>テキストブロックから見出しやリストを作成</h2><!-- /mt-beb --><!-- mt-beb --> <ul> <li>リスト１</li> <li>リスト２</li> <li>リスト３</li> </ul> <!-- /mt-beb --> <!-- mt-beb --><p>ページの区切りは罫線のブロックを挿入。</p><!-- /mt-beb --> <!-- mt-beb --><hr><!-- /mt-beb --> <!-- mt-beb --><h2>動画・WEBサービスの埋め込み</h2><!-- /mt-beb --> <!-- mt-beb --><p>oEmbedブロックでは、URLを指定するだけでYoutubeやTwitterなどのウェブサービスを埋め込むことができます。</p><!-- /mt-beb --> <!-- mt-beb t="sixapart-oembed" m='{"url":"https://www.youtube.com/watch?v=3hX5MsyatS0","width":612,"height":344,"maxwidth":"640","maxheight":"400","providerName":"YouTube"}' h='' --> <iframe width=" 612" height="344" src="https://www.youtube.com/embed/-UuvmB3KupU?feature=oembed" frameborder="0" allowfullscreen="allowfullscreen"></iframe> <!-- /mt-beb --> <!-- mt-beb t="core-horizontalrule" --><hr><!-- /mt-beb --> <!-- mt-beb --><h2>表の挿入</h2><!-- /mt-beb --> <!-- mt-beb --><p>表の挿入もできます。</p><!-- /mt-beb --> <!-- mt-beb t="core-table" --> <table> <tr> <th>イベント名</th> <td>◯◯勉強会</td> </tr> <tr> <th>日時</th> <td>7月1日 19:00〜</td> </tr> <tr> <th>会場</th> <td>◯◯社ラウンジ</td> </tr> </table> <!-- /mt-beb --> <!-- mt-beb t="core-image" --> <img src="/mt-block-editor/demo/images/table_anime.gif" /> <!-- /mt-beb --> <!-- mt-beb --><hr><!-- /mt-beb --> <!-- mt-beb --><h2>マルチカラム</h2><!-- /mt-beb --> <!-- mt-beb --><p>マルチカラムのレイアウトも可能です。</p><!-- /mt-beb --> <!-- mt-beb t="core-columns" --> <div class="mt-be-columns" style="display: flex;"> <!-- mt-beb t="core-column" --> <div class="mt-be-column"> <!-- mt-beb --><h3>マルチカラムを使ってレイアウト</h3><!-- /mt-beb --> <!-- mt-beb --><p>マルチカラムは、並列に見せたい情報がある場合にオススメのレイアウトです。<br /> カラム数を設定し、カラムの中に見出しやテキスト、画像などのブロックを挿入していきます。</p><!-- /mt-beb --> </div> <!-- /mt-beb --> <!-- mt-beb t="core-column" --> <div class="mt-be-column"> <!-- mt-beb --><h3>マルチカラムを使ってレイアウト</h3><!-- /mt-beb --> <!-- mt-beb --><p>画像も挿入できます。</p><!-- /mt-beb --> <!-- mt-beb t="core-image" --><img src="/mt-block-editor/demo/images/img_dummy.png" /><!-- /mt-beb --> </div> <!-- /mt-beb --> </div> <!-- /mt-beb --> <!-- mt-beb t="core-image" --> <img src="/mt-block-editor/demo/images/column_anime.gif" /> <!-- /mt-beb --> <!-- mt-beb t="core-horizontalrule" --><hr><!-- /mt-beb --> <!-- mt-beb --><h2>カスタム機能</h2><!-- /mt-beb --> <!-- mt-beb --><h3>カスタムブロック</h3><!-- /mt-beb --> <!-- mt-beb --><p>標準のブロック以外にも、独自にカスタムブロックを追加することもできるため、サイト運用にあわせたブロックを用意することも可能です。</p><!-- /mt-beb --> <!-- mt-beb --><hr><!-- /mt-beb --> <!-- mt-beb --><h3>定型入力</h3><!-- /mt-beb --> <!-- mt-beb --><p>レイアウトや項目を完全に固定した定型のブロックもカスタムブロックで作れるので、意図通りのデザインでコンテンツを追加していくことが可能です。</p><!-- /mt-beb --> <!-- mt-beb --><hr><!-- /mt-beb --> <!-- mt-beb --><h3>markdownエディタ</h3><!-- /mt-beb --> <!-- mt-beb --><p>カスタムブロックを使うと、Markdownに特化したブロックエディタ、といったものも作成することも可能です。</p><!-- /mt-beb --> <!-- mt-beb --><hr><!-- /mt-beb --> <!-- mt-beb --><h2>関連記事</h2><!-- /mt-beb --> <!-- mt-beb --><p>以下の関連サイトでもブロックエディタについて紹介しています。</p><!-- /mt-beb --> <!-- mt-beb --> <ul> <li><a href="https://movabletype.net/blog/" target="_blank">活用ブログ</a></li> </ul> <!-- /mt-beb -->