2024/12/13

大阪

ブロックエディタ用記事パーツサンプル（コラム、予備校共通）

こちらは記事作成用のパーツサンプルページです。
公開しますとサイト内に表示されてしまいますので、公開しないようにお気をつけください。

記事投稿時、ブロックはサンプルをコピー＆ペーストしてご使用ください。
ブロック一覧からも投稿は可能ですが、ご説明と異なる手順が必要になる場合もございます。

MV直下の段落

MV直下の「ブロック：段落」はMVと同様の幅になります。

段落

通常テキスト
通常テキスト入力時に使用
段落内で改行する場合キーボード「Shift + Enter」

アンダーラインマーカー

アンダーラインマーカーを適用したいテキストを選択し、赤枠部分をクリック。
メニューが表示されるので「mark（アンダーラインマーカー）」を選択

マーカー

マーカーを適用したいテキストを選択し、赤枠部分をクリック。
メニューが表示されるので「mark（マーカー）」を選択

h2

H2サンプル

「見出し」選択後、表示されたバーに「H2」を選択

右メニュー「ブロック」内下部「高度な設定」に
「c_headline__design–type-b」を入力

h3

H3サンプル

「見出し」選択後、表示されたバーに「H2」を選択

右メニュー「ブロック」内下部「高度な設定」に
「c_headline__design–type-d」を入力

h4

H4サンプル

「見出し」選択後、表示されたバーに「H4」を選択

画像

「メディア」にアップロードした画像を選択

キャプションが必要な場合は下記赤枠を選択

引用

引用：引用サンプル
出典:StudySearch

アイコンからブロックを挿入直後は通常の段落のような見た目になりますが、テキストを入力いただくとバーに引用のアイコンが表示されています。

テーブル

塾名	入会金	授業料/月
東京・関西個別指導学院	無料	授業料シミュレーション
東京・関西個別指導学院	無料	授業料シミュレーション
東京・関西個別指導学院	無料	授業料シミュレーション

テーブルをクリックするとバーが表示されます。
赤枠部分をクリックするとメニューが表示され、行や列の挿入や削除が可能です。

リスト（数字・チェックマーク）

サンプル
サンプル
サンプル
サンプル
サンプル

サンプル
サンプル
サンプル
サンプル
サンプル

項目を増やす場合は最終行でキーボード「Enter」

ブロック囲み

お子さま専用カリキュラムの作成お子さま専用カリキュラムの作成お子さま専用カリキュラムの作成お子さま専用カリキュラムの作成

お子さま専用カリキュラムの作成お子さま専用カリキュラムの作成

コピーする場合

テキスト部をクリックすると下記バーが表示されます。

赤枠をクリックし、バーの形状が ↓ のようになったものをコピーしてください。

Point

Point!

サンプル

サンプルサンプル

サンプルサンプルサンプル

「サンプル」部分のテキストを変更してください。

<div class="pointBlock01">
<div class="inner01">
<p>Point!</p>

<p>サンプル</p>
<p>サンプルサンプル</p>
<p>サンプルサンプルサンプル</p>

</div>
</div>

テキスト：「サンプル」部分のテキストを変更してください。
リンク先：「dummy」部分を変更してください。

<div class="relatedBlock01">
<div class="inner01">
<p class="title">関連記事</p>
<ul>

<li><a href="dummy">サンプル</a></li>
<li><a href="dummy">サンプルサンプル</a></li>
<li><a href="dummy">サンプルサンプルサンプル</a></li>
<li><a href="dummy">サンプルサンプルサンプル</a></li>

</ul>
</div>
</div>

CTA

お問い合わせを誘引する一行テキストが入ります。

授業料シミュレーション

テキスト：「サンプル」部分のテキストを変更してください。
ボタン内テキスト：「ボタンテキストサンプル」部分のテキストを変更してください。
リンク先：「dummy」部分を変更してください。

<div class="btnBlock01">
<p class="title01">サンプル</p>
<p class="btn02"><a href="dummy" class="btn--type-a">ボタンテキストサンプル</a></p>
</div>

この記事を監修した人

ダミー

ここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入ります

投稿者氏名：「ダミー」部分のテキストを変更してください。
テキスト：「ここにテキストが入ります」部分のテキストを変更してください。
リンク先：「http://dummyimage.com/800×600/4d494d/686a82.gif&text=placeholder+image” alt=”placeholder+image」部分を変更してください。

<div class="frameArea02">
<div class="inner01">
<p class="title01">この記事を監修した人</p>
<div class="wrap02">
<div class="col01">
<p class="image01"><img src="http://dummyimage.com/800x600/4d494d/686a82.gif&text=placeholder+image" alt="placeholder+image"></p>
<p class="title02">ダミー</p>
</div>
<p class="text01">ここにテキストが入ります ここにテキストが入ります ここにテキストが入ります ここにテキストが入ります ここにテキストが入ります ここにテキストが入ります ここにテキストが入ります ここにテキストが入ります</p>
</div>
</div>
</div>

GoogleMap

マーカー部分を差し替え

<div class="mapBlock01">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d410.19331038366215!2d135.5163084886289!3d34.666154657752514!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6000e74f9aa3e06d%3A0xb0ba45520e1de244!2z44CSNTQzLTAwNzIg5aSn6Ziq5bqc5aSn6Ziq5biC5aSp546L5a-65Yy655Sf546J5YmN55S677yR4oiS77yRIOS4iuacrOeUuuODm-ODvOODq-ODieODk-ODqw!5e0!3m2!1sja!2sjp!4v1739008530503!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>

予備校ページ上部「公式サイトはこちら」ボタン設定

予備校コンテンツ投稿画面にのみ表示されます。（下部画像赤枠）

投稿画面最下部にて設定。

コラム一覧へ戻る

ブロックエディタ用 記事パーツサンプル（コラム、予備校共通）