ガイド/コンテンツの作成/デザイン/グループにスタイルを追加する

グループにスタイルを追加する

グループブロックを使用すると、コンテンツのグループにデザインスタイルを追加できます。このガイドでは、 グループブロック の外観を色、枠線、ビジュアル要素を使用してカスタマイズする方法について説明します。

動画チュートリアル

グループにプリセットスタイルを適用する

プリセットスタイルは、いくつかの ブロックテーマに含まれています。プリセットスタイルを適用するには、次の手順を実行します。

  1. 編集画面の上部にある 「リストビュー」 をクリックします。
  2. 「グループブロック」を選択します。
  3. ブロック設定サイドバーで、 「スタイル」 タブ (下の図のように黒と白の丸で表示されたアイコン) をクリックします。
  4. スタイルをクリックして グループブロックに適用します。
The Styles section of the Group block sidebar settings.

プリセットスタイルがない場合でも、お好みに合わせてスタイルを グループブロック に自由に適用できます (以下参照)。

グループの色を変更する

グループブロックのデフォルト色 (背景色、文字色など) を変更できます。​ グループブロックで使用する色を変更するには、次の手順を実行します。

  1. 編集画面の上部にある 「リストビュー」 をクリックします。
  2. 「グループブロック」を選択します。
  3. ブロック設定サイドバーで、 「色」 セクションを見つけます。
The "Color" section of the Group block's settings sidebar.
  1. 色を変更する要素の名前をクリックし、新しい色を選択します。
  2. 「色の設定」() アイコンをクリックすると、デフォルトの見出しとボタンの色を変更するオプションが有効になります。
  3. 「保存」または「公開」をクリックして、変更を保存します。

詳細はこちら: 色の変更

背景画像を追加する

背景画像は、コンテンツに視覚的な魅力とコンテキストをもたらします。背景画像を グループブロックに追加するには、次の手順を実行します。

  1. 編集画面の上部にある 「リストビュー」 をクリックします。
  2. 「グループブロック」を選択します。
  3. ブロック設定サイドバーで、「背景画像」セクションを見つけます。
  4. 「背景画像を追加」をクリックし、サイトの メディアライブラリ から画像を選択するか、新しい画像をアップロードします。
The "Background image" section of the Group block's settings sidebar.

背景画像を削除するには、背景画像オプション (⋮) アイコン (「背景画像」セクションにあります) をクリックし、「リセット」リンクを選択します。

枠線または影を追加する

枠線と影は奥行きを生み出し、コンテンツセクションを視覚的に区切るのに役立ちます。これらの要素を グループブロックに追加するには、次の手順を実行します。

  1. 編集画面の上部にある 「リストビュー」 をクリックします。
  2. 「グループブロック」を選択します。
  3. ブロック設定サイドバーで、 「境界線と影」 セクションを見つけます。
  4. 以下を調整して枠線をカスタマイズします。
    • : 枠線の太さ。
    • スタイル: 実線、破線、点線のスタイル。
    • : プリセットの色から選択するか、カスタムカラーを作成します。
    • 角丸: グループブロックの角を丸くします。
  5. 「境界線と影」オプション (⋮) メニューをクリックして 「シャドウ」 オプションを表示し、プリセットの影のデザインから選択します。

詳細はこちら: 枠線と影設定

スタイルを再利用する

サイト全体で一貫性のあるデザインを作成すれば、時間を節約し、視覚的な統一感を向上させることができます。デフォルトスタイルをすべての グループブロックに設定するには、次の手順を実行します。

  1. 「外観」→「エディター」→「スタイル」の順に移動します。
  2. 「グループブロック」 ( 「ブロック」 セクション内) を見つけ、お好みの背景、枠線、その他のスタイルオプションを設定します。
  3. 「保存」 をクリックして、これらのデフォルトをすべての グループブロックに適用します。

注意: 引き続き、個々の グループブロック をブロック設定サイドバーからカスタマイズできます。

詳細はこちら: サイトのスタイルの設定方法

Copied to clipboard!