ページブロック「横並びセット」
ページ機能では様々なタイプのページブロックを組み合わせることで、誰でも簡単に自由度の高いページを作成できます。PC・タブレット・モバイルのそれぞれの表示にも自動対応します。
ここではページブロック「横並びセット」の使い方を説明します。
ページブロック「横並びセット」について
画像とテキストの横並びレイアウトを設置することができるブロックです。
ページブロック「横並びセット」の編集方法(基本設定)
基本設定では、次のような部分を編集できます。
次のような画面で編集していきます。
タイトル
ブロック単位でタイトルを設定できます。
入力を省略することもできますが、どのような内容のセクションなのか簡潔に示すと情報が伝わりやすいページになります。
テキスト
ブロック単位でフリーテキストを設定できます。
画像の横にタイトルやテキストが並ぶレイアウトになるのが、「横並びセット」の特徴です。
画像
画像を1つだけ設定できます。
● 画像選択
画像はファイル管理に登録されている中からセレクトしたり、ここから新しい画像の追加も可能。一度設置した画像の削除や、トリミングを変更したい時には「再編集」の機能も利用できます。
● 画像の説明
『画像の説明』はユーザーや検索エンジンに対して、どのような内容の画像なのかをテキスト情報としてわかりやすく説明をするために用意されている入力項目です。
ページ上には反映されず「alt属性」という画像を表示できない時の代替テキストとして利用され、アクセシビリティの向上やSEO対策に有効です。
「キャプションとして表示」のオプションを利用することで、テキストをページ上に表示することもできます。
● リンク選択
画像をクリックしてページ遷移させるためのリンクを指定できます。作成している3do1内のページだけでなく、ソーシャルやブログなど外部リンクを設定することもできます。
ボタン
ボタンを1つだけ設定できます。
● ボタンテキスト
ボタンのラベルとして表示するテキストを設定できます。長すぎるラベルは伝わりにくいため、10文字前後で簡潔にまとめましょう。
● ボタンタイプ
- ノーマルボタン
- アウトラインボタン
の2種類のボタンタイプを選択できます。
● ボタンカラー
- メインカラー
- サブカラー
- アクセントカラー
の3種類のボタンカラーを選択できます。ボタンカラーはデザインテーマごとに指定されていて、任意の色指定はできません。
● リンク選択
ボタンをクリックしてページ遷移させるためのリンクを指定できます。作成している3do1内のページだけでなく、ソーシャルやブログなど外部リンクを設定することもできます。
ブロックレイアウト
次のブロックレイアウトを切り替えられます。
- 横並び(枠あり・左)
- 横並び(枠あり・右)
- 横並び(枠なし・左)
- 横並び(枠なし・右)
- 横並び(重なり・左)
- 横並び(重なり・右)
モバイルの表示順
モバイルで閲覧した場合の並び順を切り替えられます。
- 画像が上
- 画像が下
ブロック余白
ブロック単位での上下余白を調整することができます。上部の余白、下部の余白をそれぞれ
- あり
- なし
で指定できます。
ページブロックの編集方法(背景設定)
基本設定だけでなく、背景を編集することでさらに自分らしいデザインが可能です。背景設定の方法は下記のヘルプ記事をご覧ください。