サンプルページ
- フォントサイズ(WP)
- タイポグラフィー(WP)
- 見出し(WP)
- パラグラフ(WP)
- リスト(WP)
- ボタン各種 (WP)
- 画像PC/SPコントロール(WP)
- テーブル Flexible table(PI)
- PC/SP表示コントロール
- テキストリンク
- Align(寄せ)
- 画像サイズ
- 強調マーカー
- Separator
- Spacer
- 定義リスト(WP/カスタムHTML)
- youtube縦長/横長
- ページフッター
- 背景色付きボックス(CB)
- アコーディオン(CB)
- Read more(CB)
- カラーコンテナ(CB)
- STEP(CB)
- ツールチップ（JS）
- FlexboxのGap
- 予約モーダルポップアップ
フォントサイズ(WP)
タイポグラフィ→サイズのプルダウンの選択項目から希望のサイズを選択してください。
プルダウンが表示されない場合は サイズの右端にあるアイコン（カスタムサイズを設定）をクリックすると表示されます。
これはダミーテキストです34px相当-> 4XL
これはダミーテキストです30px相当-> 3XL
これはダミーテキストです24px相当-> 2XL
これはダミーテキストです20px相当-> XL
これはダミーテキストです18px相当-> L
これはダミーテキストです16px相当-> M 標準サイズ
これはダミーテキストです14px相当-> S
これはダミーテキストです12px相当-> XS
| 選択項目 | PC(px) | SP(px) |
|---|---|---|
| 4XL | 34 | 24 |
| 3XL | 30 | 22 |
| 2XL | 24 | 20 |
| XL | 20 | 18 |
| L | 18 | 16 |
| M | 16 標準サイズ | 14 標準サイズ |
| S | 14 | 12 |
| XS | 12 | 10 |
タイポグラフィー(WP)
段落ブロック→スタイルから選択できます。CSSを追加する必要はありません。
これはダミーテキストです。タイポグラフィからZen Maru Gothicを選択します。
見出しスタイル１(WP)
見出しスタイル２
見出しスタイル３
Title style4
見出しスタイル５
パラグラフ(WP)
パラグラフブロック→スタイルから選択できます。CSSを追加する必要はありません。
デフォルトパラグラフ（段落）
パラグラ：英字アクセントMontserratフォント
パラグラフ：ヘッダーリード
パラグラフ：リード文大
パラグラフ：タグ
以下のタグは is-beige, is-brown, is-pink, is-white というクラスを追加することでタグのカラー変更を行えます
パラグラフ タグ
パラグラフ タグ
パラグラフ タグ
パラグラフ タグ
下線付きパラグラフ
下線付きパラグラフ
下線付きパラグラフ
■これはパラグラフ単体です。パラグラフ単体の時とパラグラフをグループ化した時では、下の余白量が倍違います。ダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。
■これはパラグラフ単体です。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。
●パラグラフ２つをグループ化しています。パラグラフ単体の時の２倍の余白がグループの下につきます。ダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。
●上のパラグラフとグループ化されてます。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。
■パラグラフ単体 これはダミーテキストです
リスト(WP)
リストブロック→スタイルから選択できます。CSSを追加する必要はありません。
| 用途 | クラス名 |
|---|---|
| 通常のリスト（・ ） | クラスなし（<ul>デフォルト） |
| 数字付きリスト（1. 2. 3. …） | クラスなし（<ol>デフォルト） |
| 矢印リスト | .is-style-list-arrow |
| PDFリスト | .is-style-list-pdf |
| ※（こめじるし）付きのリスト | .is-style-list-kome |
| チェックマーク付きのリスト | .is-style-list-check |
| マークなしの横並びリスト（SP時に縦並び） | .is-style-list-nomark-row |
| マークなしの縦並びリスト | .is-style-list-nomark-column |
- 通常リスト
- 通常リスト
- 矢印リスト
- 矢印リスト
- Aリンク ファイル拡張子が.pdfの場合にのみアイコンが表示される
- 数字リスト
- 数字リスト
- 数字リスト
- 数字リスト
- 数字リスト
- 数字リスト
- 数字リスト
- 数字リスト
- 数字リスト
- 数字リスト
- 注釈リスト
- 注釈リスト
- 注釈リスト
- チェックマークつきリスト
- チェックマークつきリスト
- チェックマークつきリスト
マークなし横並びリストにブロックボタンを設置。SP時は縦に並ぶ。↓
- 縦並びマークなしリスト縦並びマークなしリスト縦並びマークなしリスト縦並びマークなしリスト縦並びマークなしリスト縦並びマークなしリスト縦並びマークなしリスト
- 縦並びマークなしリスト縦並びマークなしリスト縦並びマークなしリスト縦並びマークなしリスト縦並びマークなしリスト
- 縦並びマークなしリスト
ボタン、アイコンリンク
| 用途 | クラス名 |
|---|---|
| 幅ミディアムサイズ指定 | .is-btn-medium |
| PCの時に親コンテンツに合わせてフィット | .is-btn-pc-liquid |
| SPの時に親コンテンツに合わせてフィット | .is-btn-sp-liquid |
| 親コンテンツに合わせてフィット | .is-btn-liquid |
アイコン付きリンク
リンク用のタグにクラスを入れてください
右矢印アイコンリンク bl-link-arrow-right
下矢印アイコンリンク bl-link-arrow-down
下矢印アイコンリンク bl-link-circle-arrow-down
右矢印アイコンリンク bl-link-circle-arrow-right
PDF印アイコンリンク bl-link-pdf
画像のPC／SP表示コントロール（WP）
画像ブロック→スタイルから選択できます。CSSを追加する必要はありません。
| 意味 | クラス名 |
|---|---|
| PC時に表示（SP時非表示） | is-style-display-pc-block |
| SP時に表示（PC時非表示） | is-style-display-sp-block |
| 画像サイズコントロール | is-img-30, 50, 65, 75, 100 |
| SP時に100% | is-sp-img-100 |
| SP時に指定％表示 | is-sp-img-30, 50, 75 |
テーブル Flexible Table(PI)
Flexible Tableブロックを選択します。
| thead ダミーです | ダミー | ダミー |
|---|---|---|
| プラグインFlexibleTableの編集画面から、 セルのタグで変更 th | td これはダミーテキストですこれはダミーテキストです。セル内にWPのブロックは入れられません。コードのみでへ週が可能です。 | コードで入力
|
| コードで入力 | 寄せの設定はユーザーに委ねる | |
| thセル |
| th 幅を200px固定（PC/SP共通） | table-layout:fixedが基本なので、固定幅で使用できます。 管理画面でthの幅を指定すればthタグの幅をPC/SP共通で固定幅化できます。 | これはダミーテキストです。 |
|---|
| th 幅を20%固定（PC/SP共通） | table-layout:fixedが基本なので、固定幅で使用できます。 管理画面でthの幅を指定すればthタグの幅をPC/SP共通で固定幅化できます。 幅37.5%指定 | これはダミーテキストです。 幅37.5%指定 |
|---|
PC／SP表示コントロールタグ
改行タグ
| 用途 | クラス名 |
|---|---|
| PCのみで改行を表示する | .is-pc-br |
| スマホのみで改行を表示する | .is-sp-br |
display-block（ブロック表示 or 非表示）
| 用途 | クラス名 |
|---|---|
| PCのみで表示（display: block）する | .is-pc-block |
| スマホのみで表示（display: block）する | .is-sp-block |
inline-block（インラインブロック表示 or 非表示）
| 用途 | クラス名 |
|---|---|
| PCのみで表示（display: inline-block）する | .is-pc-inline-block |
| スマホのみで表示（display: inline-block）する | .is-sp-inline-block |
flexboxなどカラムの表示 or 非表示
| 用途 | クラス名 |
|---|---|
| PCで消す（display: none）する | .is-pc-hidden |
| スマホで消す（display: none）する | .is-sp-hidden |
Align(寄せ)
WPの寄せの機能を使う場合は、PC/SPで同じ挙動になります。
PC/SPで寄せを変えたい場合は、以下のクラスを使用してください。
※WPの寄せの設定と併用はできません。
テキストの寄せ PC左 SPセンター
テキストの寄せ PC左 SP左→WPのアラインでOK
再テキストの寄せ PC左 SP右
再テキストの寄せ PC右 SPセンター
再テキストの寄せ PC右 SP左
テキストの寄せ PC右 SP右→WPのアラインでOK
テキストの寄せ PCセンターSPセンター→WPのアラインでOK
テキストの寄せ PCセンターSP左
テキストの寄せ PCセンターSP右
| PC寄せ | SP寄せ | クラス名 |
|---|---|---|
| left | center | is-align-pc-left-sp-center |
| left | right | is-align-pc-left-sp-right |
| center | left | is-align-pc-center-sp-left |
| center | right | is-align-pc-center-sp-right |
| right | center | is-align-pc-right-sp-center |
| right | left | is-align-pc-right-sp-left |
画像のサイズ
スマホ表示の際に小さくする
| 意味 | クラス名 |
|---|---|
| SP時に画像を75%に縮小 | is-sp-img-75 |
| SP時に画像を50%に縮小 | is-sp-img-50 |
| SP時に画像を30%に縮小 | is-sp-img-30 |
| SP時に画像を100%に | is-sp-img-100 |
PC/スマホ共通
| 意味 | クラス名 |
|---|---|
| 画像を75%に縮小 | is-img-75 |
| 画像を50%に縮小 | is-img-50 |
| 画像を30%に縮小 | is-img-30 |
文字の強調マーカー
これはダミーテキストです。強調マーカーイエロー、強調マーカーピンク、強調マーカーブルー
フォントサイズ中、WeightをBold選択：強調マーカーイエロー、強調マーカーピンク、強調マーカーブルー
| 用途 | クラス名 |
|---|---|
| 背景にピンク色のマーカー風装飾を付ける | .is-marker-pink |
| 背景に黄色のマーカー風装飾を付ける | .is-marker-yellow |
| 背景に青色のマーカー風装飾を付ける | .is-marker-blue |
Separator（WP）
セパレーターブロックを選択します。
デフォルト
幅広線
ドット
Spacer(WP)
スペーサーブロック→スタイルから選択できます。
構造が違うのでエディタで見えているサイズが完全にフロントと一致するわけではありません。おおよその幅をエディタで再現しています。
余白-小 サイズ指定はそのままでOK
余白-セクション（大） サイズ指定はそのままでOK
youtube動画のサイズ選択（WP）
16×9(横長) or 9×16(縦長)
ページフッター
FlexboxのGap（ギャップ）
| 対応クラス名 | |
|---|---|
| PC表示でカラム間のギャップを０にする | .is-pc-no-gap |
| SP表示でカラム間のギャップを０にする | |
Flexbox
| 対応クラス名 | |
|---|---|
| SP表示でカラムを縦積みにする | .is-flex-direction-column-sp |
