■リード文
リード文。タイトルの下へ通常の段落ブロックに記載します。
文章はshiftを押しながらEnterで詰まった形で改行、普通にEnterをクリックで行間が空きます。
リード文には画像を載せる等できますが、見出しは作らないようにご注意ください。
目次は最初の見出しの上に表示される仕様です。
■監修・執筆
左上の青い＋マークをクリックし、ブロックから「監修者・執筆者セット」を選択してください。
写真・テキストはそのままブロック内で編集できます。SNSのリンク先は右側の設定からURLを登録してください。
監修者・執筆者はセットになっています。
監修： 代表取締役 荒川 大史
Webマーケティング歴20年。インターネット専門の広告代理店にて、営業、マーケティング、コンサルタントとして従事。 SEO部署の立ち上げに関わるなど、検索エンジンマーケティングを中心にマーケティングを支援。 WEB広告からマーケティングの戦略立案から、WEB制作まで幅広くWEBの集客のお困りごとなら何でもご相談可能。 一環したネットマーケティング支援を軸として、⾦融、美容、医療、コンサルティング会社などのお客様を幅広い実績あり。 Googleアナリティクスなどによるアクセス分析コンサルティングなども手掛ける。 上級ウェブ解析⼠。 一般財団法人ブランド・マネージャー認定協会、ブランドマネージャー、薬機法取得者。ちなみに、SEOが趣味（笑）
執筆： 代表取締役 荒川 大史
Webマーケティング歴20年。インターネット専門の広告代理店にて、営業、マーケティング、コンサルタントとして従事。 SEO部署の立ち上げに関わるなど、検索エンジンマーケティングを中心にマーケティングを支援。 WEB広告からマーケティングの戦略立案から、WEB制作まで幅広くWEBの集客のお困りごとなら何でもご相談可能。 一環したネットマーケティング支援を軸として、⾦融、美容、医療、コンサルティング会社などのお客様を幅広い実績あり。 Googleアナリティクスなどによるアクセス分析コンサルティングなども手掛ける。 上級ウェブ解析⼠。 一般財団法人ブランド・マネージャー認定協会、ブランドマネージャー、薬機法取得者。ちなみに、SEOが趣味（笑）
目次
見出しパターン
見出しのパターンです。すべての投稿ページで同じスタイルが当たります。＋から見出しを選び使用してください。
見出しh2
見出しh3
見出しh4
見出しh5
文字サイズ
これは文字サイズXLです。文字サイズXLは右側の設定のフォントサイズからXLを選択してください。
これは文字サイズLです。文字サイズLは右側の設定のフォントサイズからLを選択してください。
これは文字サイズMです。文字サイズMは右側の設定のフォントサイズからMを選択してください。
これは文字サイズSです。文字サイズLは右側の設定のフォントサイズからSを選択してください。
マーカー＆リンク
マーカーです。使用したい個所に使いたいマーカー部分をコピー＆ペーストで張り付けて使用してください。
マーカー/ピンクです。
マーカー/黄色です。
マーカー/グレーです。
マーカー/青です。
リンクは通常のテキストの場合、アンダーライン＋青のリンクになります。
関連記事カード
ブロックをコピペして、コードの編集から
★遷移先URL
★画像URL
★画像の説明
★関連記事のタイトル
★関連記事の説明文
★サイト名
を修正してご利用ください。説明文は３行まで表示されます。３行以降は表示されません。
見た目はプレビューでご確認ください。
関連記事カード（縦型）
関連記事カード（横型）
例）
横型も同様に、ブロックをコピペして、コードの編集から
★画像URL
★画像の説明
★関連記事のタイトル
★関連記事の説明文
★★遷移先URL
を修正してご利用ください。説明文は３行まで表示されます。
見た目はプレビューでご確認ください。
動画
ブロックに動画がございます。＋をクリックし、youtubeと検索してください。
list
ブロックがございます。＋をクリックし、リストと検索してください。
- 通常リスト
- 通常リスト
- 通常リスト
- インデント
- インデント
- 数字リスト
- 数字リスト
- 数字リスト
- インデント
- インデント
テーブル
通常のtableはブロックにございます。＋をクリックし、テーブルと検索してください。
右側の「設定」より、ブロック→高度な設定→追加cssクラス
に以下のクラスを追加で各テーブルを作成できます。
横スクロールだけ：
table-scroll
見出しあり＋交互に青：
table-head-gray-blue
左見出し：
table-side-head-gray
table-scroll table-head-gray-blue のようにすることで組み合わせることができます。
スクロールバー
横幅が画面よりも長くなる場合、スクロールバーが表示されます。
高度な設定から追加cssクラスへtable-scrollを追加してください。
| テーブル | テーブル | テーブル | テーブル | テーブル | テーブル | テーブル | テーブル | テーブル | テーブル |
| テーブル | テーブル | テーブル | テーブル | テーブル | テーブル | テーブル | テーブル | テーブル | テーブル |
| テーブル | テーブル | テーブル | テーブル | テーブル | テーブル | テーブル | テーブル | テーブル | テーブル |
見出しあり＋交互に青
右側の設定から、ヘッダーセクションにチェックを入れます。
高度な設定から追加cssクラスへtable-head-gray-blueを追加してください。
| 見出し | 見出し | 見出し | 見出し |
|---|---|---|---|
| テーブル | テーブル | テーブル | テーブル |
| テーブル | テーブル | テーブル | テーブル |
| テーブル | テーブル | テーブル | テーブル |
左見出し
2カラム等の際に使ってください。
ヘッダーセクションのチェックはOFFにして
高度な設定から追加cssクラスへtable-side-head-grayを追加してください。
| 見出し | テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト |
| 見出し | テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト |
| 見出し | テキストテキストテキストテキストテキスト |
ミックス
追加 CSS クラスを複数付けることでミックスのテーブルが作れます。
例）table-scroll table-head-gray-blue table-side-head-gray
| 見出し | 見出し | 見出し | 見出し | 見出し | 見出し | 見出し | 見出し | 見出し | 見出し |
|---|---|---|---|---|---|---|---|---|---|
| 見出し | テーブル | テーブル | テーブル | テーブル | テーブル | テーブル | テーブル | テーブル | テーブル |
| 見出し | テーブル | テーブル | テーブル | テーブル | テーブル | テーブル | テーブル | テーブル | テーブル |
| 見出し | テーブル | テーブル | テーブル | テーブル | テーブル | テーブル | テーブル | テーブル | テーブル |
その他（デフォルト）
デフォルトの機能を弄ることで以下のようなテーブルが作成できます。
右側の設定→
- ブロック→ヘッダーセクション、フッターセクションにチェック
- スタイル→ストライプ→色→テキスト
- スタイル→ストライプ→色→背景→グラデーション
| ヘッダーラベル | ヘッダーラベル | ヘッダーラベル |
|---|---|---|
| テーブル | テーブル | テーブル |
| テーブル | テーブル | テーブル |
| テーブル | テーブル | テーブル |
| フッターラベル | フッターラベル | フッターラベル |
枠線付きボックス・カラーパターンボックス
ブロックをコピペしてコードを編集してご利用ください。
見出し無し・アイコン無しボックス
見出し無し・アイコンありボックス
本文が入ります。ここを書き換えて使用してください。本文が入ります。ここを書き換えて使用してください。本文が入ります。ここを書き換えて使用してください。本文が入ります。ここを書き換えて使用してください。
見出しあり・アイコンありボックス
見出しが入ります
本文が入ります。ここを書き換えて使用してください。本文が入ります。ここを書き換えて使用してください。本文が入ります。ここを書き換えて使用してください。本文が入ります。ここを書き換えて使用してください。
チェックリストボックス
通常リストボックス
- リスト項目が入ります
- リスト項目が入ります
- リスト項目が入ります
黒背景見出しボックス
カラー・アイコンバリエーション
グレー/チェックアイコン
本文が入ります。ここを書き換えて使用してください。
黄色/アイコンチェック
本文が入ります。ここを書き換えて使用してください。
青/サムズアップ
本文が入ります。ここを書き換えて使用してください。
赤/サムズダウン
本文が入ります。ここを書き換えて使用してください。
使い回し例
親のclassを以下に変更することで使い回しができます。
例）グレー背景、チェックボックス、太字の見出し（ノーマル）、リスト無し
<div class="editor-box editor-box--gray editor-box--check editor-box--header-normal editor-box--list-none">
<div class="editor-box__inner">
<span class="editor-box__icon" aria-hidden="true"></span>
<div class="editor-box__content">
<p class="editor-box__title">見出しが入ります</p>
<div class="editor-box__body">
<p>本文が入ります。ここを書き換えて使用してください。</p>
</div>
</div>
</div>
</div>色：
editor-box–gray
editor-box–yellow
editor-box–red
editor-box–blue
アイコン：
editor-box–no-icon
editor-box–check
editor-box–thumbs-up
editor-box–thumbs-down
見出し：
editor-box–header-normal
editor-box–header-dark
リスト：
editor-box–list-none
editor-box–list-disc
editor-box–list-check
form
formです。各パーツはそれぞれコードの中に埋め込んであります。
使用する際はフォームパーツをコピー＆ペーストしてご利用ください。
コピー＆ペーストしたフォームパーツをクリックし、コードを編集からコードをご確認ください。
各パーツ部分名をコード内に表示してあります。フォームパーツはすべてのパーツを入れてあります。
各パーツをコメントアウト、または削除してご利用ください。
<!--
から
-->で囲った部分は非表示（コメントアウト）になります。
パーツ部分以外は削除しないようにお願いします。
すべてのパーツを表示させたパターン
リード文
フォームタイトル
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
フォームのみにしたパターン例
無料ダウンロード
AIOコンサルティングサービス資料
h2
テキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキスト
テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
CTAボタン
ページ内に埋め込む形にしていますが、固定する場合はご一報ください。URLは『コードを編集』から修正をしてください。
