サンプル
管理画面右にある「ブロック」タブは、選択しているブロック特有のメニューが表示されています。
それぞれのブロックを選択した時に何ができるかを確認することができます。
また、入力している場所のすぐ上にポップアップが出ております。
こちらも、テキストの太字やリンクの設定、中央寄せなどのアイコンがありますので、適宜ご利用ください。
見出しが3個以上の記事は、最初のh2見出しの前にページ内リンクが自動的に表示されます。
見出し (見出しはh2以下をお使いください）
見出し H2
見出し H3
見出し H4
テキストの装飾など
■Shift + Enterで、ブロック内改行をすることができます。
■色を変更する場合は、管理画面右メニュー「ブロック」タブより「色」を選択します。
■一部だけ色を変更するには、テキストを選択した状態で、ポップアップで表示される下向きの矢印から「ハイライト」を選択します。
■太字は、テキストを選択した状態で、ポップアップから「B」を選択します。
（ショートカットCtr+Bでも太字にすることができます。）
■斜体は、テキストを選択した状態で、ポップアップから「I」を選択します。
■リンクつきテキストは、テキストを選択した状態で、ポップアップから「Link」のアイコンをクリックし、設定をします。リンク先URLを入力したあとは、右にある矢印をクリックして確定します。
■背景色テキスト
背景色テキストは、テキストを選択した状態で、管理画面右メニュー「ブロック」タブより、「色」項目で「背景」を設定します。
※複数段落をまとめて背景色をつける場合は、「段落をまとめて、背景色をつけたい場合」をご参照ください。
■フォントサイズは、テキストを選択した状態で、管理画面右メニュー「ブロック」タブより、「タイポグラフィ」項目で設定します。
フォントサイズ小
フォントサイズ標準
フォントサイズ中
フォントサイズ大
フォントサイズ特大
■画像の設定も、管理画面右メニュー「ブロック」タブと、ポップアップメニューからすることができます。
画像にグレーの枠線をつけたい場合は、ブロックタブのメニュー「追加CSS」クラスに「border」と入力します。
■ページの任意の位置にジャンプ(スクロール)することもできます。
ページ内スクロールの設定方法
- テキストを選択した状態で、ポップアップから「Link」のアイコンをクリック
- リンクに「#nanika」と入力し（nanikaのところは任意の文字です。先頭に必ず#を入れてください。）
- ジャンプ先を選択→管理画面右側メニューの「ブロック」タブを開き、下にある「高度な設定」をクリック
- 「HTMLアンカー」に「nanika」を入れる
段落をまとめて、背景色をつけたい場合
段落ブロックの文章です。
段落ブロックの文章2つ目です。
- 二つ以上の段落のブロックを作成し、ドラッグ＆ドロップでまとめて選択します。
- ポップアップメニューの一番右にある３点リーダをクリックし、「グループ化」を選択します。
（メニューに「グループ化」がない場合は、2つ以上の段落が選択がされているか再度ご確認ください。） - 2のグループを選択します。選択しにくい場合は、テキスト部分をクリックし、ポップアップメニューの一番左にあるアイコンをクリックすると「親のブロック」を選択することができます。
- 管理画面右メニューの「ブロック」タブにて、「背景」の項目から色を選びます。
画像＋テキスト回り込み
回り込みの作り方
- まず画像のブロックを作成し、その下に回り込ませたいテキストを入力します。
- 画像を選択し、ポップアップの「配置」のアイコンから「右寄せ」を選択します。
- 画像を縮小していくと、下に入力したテキストが画像横に回り込みます。
※回り込みが必要なく、ただ単に横並びにしたい場合は「メディアとテキスト」をお使いください。
2の時に画像を左寄せにすると、右にテキストが回り込みます。2の時に画像を左寄せにすると、右にテキストが回り込みます。2の時に画像を左寄せにすると、右にテキストが回り込みます。2の時に画像を左寄せにすると、右にテキストが回り込みます。2の時に画像を左寄せにすると、右にテキストが回り込みます。2の時に画像を左寄せにすると、右にテキストが回り込みます。2の時に画像を左寄せにすると、右にテキストが回り込みます。2の時に画像を左寄せにすると、右にテキストが回り込みます。2の時に画像を左寄せにすると、右にテキストが回り込みます。2の時に画像を左寄せにすると、右にテキストが回り込みます。2の時に画像を左寄せにすると、右にテキストが回り込みます。2の時に画像を左寄せにすると、右にテキストが回り込みます。2の時に画像を左寄せにすると、右にテキストが回り込みます。
画像を真ん中に表示
画像のブロックを作成し、画像を選択した状態でポップアップの「配置」のアイコンから「中央揃え」を選択すると真ん中に表示されます。
メディアとテキスト
画像とテキストを横並びにして表示することができます。
テキストが多い場合は、「画像＋テキスト回り込み」もご参照ください。
ギャラリー
リスト
リストには、リストマークが⚫︎のリストと、数字付きのリストがあります。
- リスト形式です。
- リスト形式です。
- リスト形式です。
- 数字つきのリストです。
- 数字つきのリストです。
- 数字つきのリストです。
表
表を選択した状態で、右メニューの「ブロック」タブで「ヘッダーセクション」をオンにすると、ヘッダーが追加されます。
| ヘッダー | ヘッダー | |
|---|---|---|
| コンテンツ | コンテンツ | コンテンツ |
| コンテンツ | コンテンツ | コンテンツ |
| コンテンツ | コンテンツ | コンテンツ |
ボタン
区切り線
スペーサー
任意の高さを持った余白を挿入できます。（あまり高さを出しすぎるとスマートフォンで不自然に見えますのでご注意ください。）
カラム
任意の数の横並びボックスです。画像、テキスト、その他お好きなブロックを入れることができます。
カラムの左側です。カラムの左側です。カラムの左側です。カラムの左側です。カラムの左側です。カラムの左側です。カラムの左側です。カラムの左側です。カラムの左側です。カラムの左側です。カラムの左側です。
カラムの真ん中です。カラムの真ん中です。カラムの真ん中です。カラムの真ん中です。カラムの真ん中です。カラムの真ん中です。カラムの真ん中です。カラムの真ん中です。カラムの真ん中です。カラムの真ん中です。
アンカーでここまでジャンプ（上の方の「ジャンプ」からここまでとんできます。）
このテキストを選択した状態で、右メニューの「ブロック」タブ ＞ HTMLアンカー にて、ジャンプ元のリンクテキストと同じもの（「#」を除く）を入力します。
