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

こちらはクラシックエディタ用 記事作成用のパーツサンプルページです。

公開しますとサイト内に表示されてしまいますので、
公開しないようにお気をつけください。

目次

目次挿入方法

※投稿画面上には表示されません。「プレビュー」にてご確認ください。

1. 右メニュー「投稿」内「目次」の項目で「目次を有効化」をクリック。
2. ページ内最初の「hタグ」上に挿入されます。

目次を「H2」「H3」を使用すると自動でページ内に挿入されます。

MV直下の段落

MV直下の段落はMVと同様の幅になります。

<p>だからこそ、個人に合わせたカリキュラムを組める塾で、テストごとに受講科目を変更し、ご予算を先に見積もって、苦手科目に絞ることをお勧めします。</p>

段落

だからこそ、個人に合わせたカリキュラムを組める塾で、テストごとに受講科目を変更し、ご予算を先に見積もって、苦手科目に絞ることをお勧めします。

<p>だからこそ、個人に合わせたカリキュラムを組める塾で、テストごとに受講科目を変更し、ご予算を先に見積もって、苦手科目に絞ることをお勧めします。</p>

アンダーラインマーカー

だからこそ、個人に合わせたカリキュラムを組める塾で、テストごとに受講科目を変更し、ご予算を先に見積もって、アンダーラインマーカー苦手科目に絞ることをお勧めします。

<p>だからこそ、個人に合わせたカリキュラムを組める塾で、テストごとに受講科目を変更し、ご予算を先に見積もって、<mark class="style-undermaker">アンダーラインマーカー</mark>苦手科目に絞ることをお勧めします。</p>

マーカー

だからこそ、個人に合わせたカリキュラムを組める塾で、テストごとに受講科目を変更し、ご予算を先に見積もって、ラインマーカー苦手科目に絞ることをお勧めします。

<p>だからこそ、個人に合わせたカリキュラムを組める塾で、テストごとに受講科目を変更し、ご予算を先に見積もって、<mark class="style-maker">ラインマーカー</mark>苦手科目に絞ることをお勧めします。</p>

上下のスペース

<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>

「height:50px」50pxの部分を任意の数値に変更。

h2

H2サンプル

<h2 class="wp-block-heading c_headline__design--type-b">H2サンプル</h2>

h3

H3サンプル

<h3 class="wp-block-heading c_headline__design--type-d">H3サンプル</h3>

h4

H4サンプル

<h4 class="wp-block-heading">H4サンプル</h4>

画像

<figure class="wp-block-image size-full"><img src="https://igakubuyobikou-hikaku.com/wp-content/uploads/2024/12/146_1.png" alt=""/><figcaption class="wp-element-caption">キャプションが入ります</figcaption></figure>

引用

引用：引用サンプル

出典:StudySearch

<blockquote class="wp-block-quote is-style-default">
<p>引用：引用サンプル</p>
<cite><a href="http://localhost:10930/" data-type="page" data-id="41">出典:StudySearch</a></cite>
</blockquote>

テーブル

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

<figure class="wp-block-table is-style-regular">
<table class="has-fixed-layout">
<thead><tr><th class="has-text-align-left" data-align="left">塾名</th><th class="has-text-align-left" data-align="left">入会金</th><th>授業料/月</th></tr></thead>
<tbody>
<tr><td class="has-text-align-left" data-align="left"><a href="#">東京・関西個別指導学院</a></td><td class="has-text-align-left" data-align="left">無料</td><td><a href="#">授業料シミュレーション</a></td></tr>
<tr><td class="has-text-align-left" data-align="left"><a href="#">東京・関西個別指導学院</a></td><td class="has-text-align-left" data-align="left">無料</td><td><a href="#">授業料シミュレーション</a></td></tr>
<tr><td class="has-text-align-left" data-align="left"><a href="#">東京・関西個別指導学院</a></td><td class="has-text-align-left" data-align="left">無料</td><td><a href="#">授業料シミュレーション</a></td></tr>
</tbody>
</table>
</figure>

リスト（数字）

1. サンプル
2. サンプル
3. サンプル
4. サンプル
5. サンプル

<ol class="wp-block-list">
<li>サンプル</li>
<li>サンプル</li>
<li>サンプル</li>
<li>サンプル</li>
<li>サンプル</li>
</ol>

リスト（チェックマーク）

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

<ul class="wp-block-list">
<li>サンプル</li>
<li>サンプル</li>
<li>サンプル</li>
<li>サンプル</li>
<li>サンプル</li>
</ul>

ブロック囲み

<div class="wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained">
<p>お子さま専用カリキュラムの作成お子さま専用カリキュラムの作成お子さま専用カリキュラムの作成お子さま専用カリキュラムの作成</p>
<p>お子さま専用カリキュラムの作成お子さま専用カリキュラムの作成</p>
<p>お子さま専用カリキュラムの作成お子さま専用カリキュラムの作成</p>
</div>

Point

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

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

関連記事

<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

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

この記事を監修した人

<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>

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

投稿画面最下部に設定項目があります。