Sign In
Home
Subscribe

デザイン

サイトの背景やテキスト、ブロックなどのスタイル全体を変更します。テーマを適用してサイト全体のデザインを一度に変更したり、各要素の設定値を個別に変更したりできます。デザインはリアルタイムで反映され、サイト訪問者に直接公開されます。

サイト全体のスタイルの変更

編集モード右パネルのデザインカラータブで、サイト全体に適用するテーマとパレットを選択します。
➕
テーマとパレットを選択すると、各種基本色とデフォルト値が変更されます。公開状態のサイトのデザインを修正するときは、テストサイトを作成して変更された様子を確認して修正することをおすすめします。

サイトテーマ

テーマは、背景、テキスト、ボタンの色、コーナーの丸み、罫線、影などがあらかじめ設定されています。 デザインメニューの上部にあるテーマ領域をクリックして目的のものを選択して適用すると、すべての要素のデフォルトの色とデフォルト値が自動的に変更されます。

カラーパレット

パレットは似合う色の組み合わせをあらかじめ設定したものです。 [色]タブでパレット領域をクリックして目的のものを選択して適用すると、すべての要素のデフォルトの色がそのパレットの色に自動的に変更されます。
パレットの各色をクリックすると、異なる色に変更できます。このとき、変更した色がパレットの下の個々の要素の色にも適用されていた場合、その要素の色も一緒に変更されます。
ライトダークをクリックすると、訪問者の画面モードによって異なるように見えるパレットの色を別々に指定できます。
➕
サイトを訪問者のモードに関係なくライトモードまたはダークモードに固定したい場合は?
ライトまたはダークを選択したまま円形アイコンをクリックしてシステムカラー対応を無効にしてください。

各要素ごとのデフォルトスタイルの変更

編集モード右パネルのデザイン> フォント図形タブで、要素ごとにスタイルのデフォルト値を変更します。
➕
デザインメニューでスタイルを変更しても適用されないブロックがある場合は?
該当ブロックの色、サイズ、厚さなどが個別にカスタマイズされた状態ですので、該当ブロック設定で元に戻すアイコンをクリックしてください。

サイトの背景、ヘッダースタイル

カラータブのサイト全体の領域で背景とサイトヘッダーの色を変更します。

テキストスタイル

テキストの色を変更
[色]タブで、サイト全体のタイトルとデフォルトのテキストの色を変更します。
テキストサイズ、太さ、行間隔、フォントの種類を変更
[フォント]タブで、サイト全体に適用するデフォルトフォントとタイトルに適用するタイトルフォントをそれぞれ選択します。
ページタイトル、ページ本文、タイトル1〜3をクリックして、それぞれの太さ、サイズ、行間隔の値を変更します。

➕
チャンネル投稿のスタイルを別に指定したい場合は、「ポスト」オプションを有効にして値を修正してください。
➕
テキストごとにスタイルを個別に設定する方法は、 テキストガイド(クリック)で確認してください。

ボタンスタイル

ボタンの背景、テキストの色を変更
カラータブのボタン領域で背景とテキストの色を変更します。
ボタンテキストサイズ、太さ、行間隔の調整
[フォント]タブのデフォルト値領域で、ボタンをクリックして厚さ、サイズ、行間隔の値を変更します。
ボタンパディング、コーナー丸み調整
[外観] タブのボタン領域で、パディング(内側の余白)と丸みを帯びたエッジの値を調整します。
ボタン枠、影を追加
[図形] タブのボタン領域で枠線と影をアクティブにして、枠線の太さ、影のぼかし、位置を調整します。 [色]タブに移動して、ボタン領域の境界線と影の色を変更します。
➕
ボタンごとにスタイルを個別に設定する方法は下のガイドをクリックして確認してください。

メディア(画像、動画)スタイル

メディアコーナーの丸み調整
[シェイプ]タブの画像、ムービー領域の丸みを帯びた角の値をそれぞれ調整します。
メディアボーダー、影を追加
[図形] タブの画像、ムービー領域で枠線と影をアクティブにして、枠線の太さ、影のぼかし、位置を調整します。 [色]タブに移動して、メディア領域の境界線と影の色を変更します。
➕
メディアブロックごとにスタイルを個別に設定する方法は下のガイドをクリックして確認してください。

カード(背景、列)スタイル

カードの背景、テキストの色の変更
カラータブのカード領域で背景、タイトル、テキストの色を変更します。
カードコーナーの丸み調整
[形状] タブのカード領域で、丸みを帯びたエッジの値を調整します。
カードボーダー、影を追加
[図形] タブのカード領域で枠線と影を有効にして、枠線の太さ、影のぼかし、位置を調整します。 [色]タブに移動して、カード領域の境界線と影の色を変更します。
➕
カードブロックごとにスタイルを個別に設定する方法は下のガイドをクリックして確認してください。

チャンネルプレビュースタイル

チャンネルのプレビューの背景、テキストの色の変更
[色]タブのチャンネル領域で背景とテキストの色を変更します。
チャンネルプレビューエッジの丸みを調整する
[シェイプ]タブのチャンネル領域で丸みを帯びたエッジの値を調整します。
チャンネル プレビューの枠線、影を追加
[図形] タブのチャンネル領域で枠線と影をアクティブにして、枠線の太さ、影のぼかし、位置を調整します。 [色]タブに移動して、チャンネル領域の境界線と影の色を変更します。