ブロックの活用方法&デザインについて
ブロックの活用方法
ブロックテンプレ紹介、デザイン、コピー、時間差で表示させる方法などを解説しています。
ブロックとは？
ブロックは、最小限のデザインスキルでページを構成できる便利なパーツ です。
何百種類ものブロックが用意されており、高度なデザイン知識がなくても、見た目に優れたレイアウトを作成できます。
各ブロックは、プロジェクトにスムーズに統合できるよう設計されており、デザイン作業に時間をかけるのではなく、コンテンツ作成に集中できる のが特徴です。
ブログ、ポートフォリオ、ビジネスサイトなど、さまざまなスタイルや用途に対応可能。使いやすさと柔軟性を兼ね備えたブロックを利用することで、美しく、かつ効果的に機能するページ を簡単に作成できます。
1.ブロックの構成
①ブロックが積み重なり構成される。
②ブロックの中にカラムを構成（列。サンプル画像は2列のカラム）。
③カラムの中にウィジェットから様々なパーツを選択してデザインする。
④ブロックの追加を左クリックで、ブロックを選択。
⑤様々なブロックテンプレートが表示される。
各テンプレートの説明は動画をご参照ください。
ブロックの追加方法
- ページ上で、コンテナの 上部または下部 にカーソルを移動します。
- [ブロック] タブ を選択すると、あらかじめデザインされたブロックのギャラリーが表示されます。
- 好きなブロックを選ぶと、そのままページに追加され、すぐに編集可能になります。
2.ブロックの複製
①カーソルを合わせると操作バーが表示されます。
ウィジェットをコピーすると②に格納される。
- ブロック上部にあるメニューから [ウィジェットをコピー] を選択すると、コピーされたブロックが「保存済みブロック」アイコンの下に表示されます。
格納された箇所にカーソルを合わせると、一番上に今コピーしたものが有るので、それを、挿入したい箇所にドラックアンドドロップをする。
- コンテナを保存する場合は、横にある 歯車アイコン をクリックし、名前を付けて保存してください。
- 保存されたブロックは、[保存済み] タブ からいつでも呼び出すことができます。
3.ブロックごとの設定
ブロックサイズの変更
ブロック単位で、サイトの非表示が可能です。
ブロックの部分のサイト表示の時間を遅延する事が出来ます。
ブロックの位置を変更する事が出来ます。
ブロックデザイン設定
ブロックのデザイン方法です。背景、グラデーション、境界線の設定などをすることで、シャープなデザインが手軽に作成が可能です！
1.ブロックデザイン
①ブロックを押すと、編集ボックスが開きます。
2.ブロックの画像設定
①カメラのマークがある場所をクリックすると、ファイルマネージャーが開きます。
②ファイルマネージャーから画像を選択する。または、下部のアップロードボタンでPC内の画像をアップロードする事も出来ます。
3.ブロックの画像のデザイン設定
視差効果を選択すると、視差スピードの設定ができます。
また、画像の上にグラデーションやオーバーレイを被せる事が出来ます。
4.ブロックの背景色の設定
①背景色を選択する事も出来ます。
5.ブロックに画像設定
YouTube上の映像をブロック内に設定できます。その際、動画の音量、映像のループ箇所の設定もできます。
6.ブロックの分離線の設定
ブロックの境界線を様々なデザインから選び、設定する事が出来ます。
設定は、デザインの他、色、上部か下部、デザインをフリップさせたり反転させることもできます。
ページビルダー一覧
更新日 06/09/2025
ありがとうございます