テキスト、見出し、ボタンを編集する

ページの文章を変更し、見出しのサイズを選び、書体や色でテキストを装飾し、ページへのリンクを設定したボタンを作ります。

見出し、テキスト、ボタンは、ページで最もよく使うブロックです。文章や見た目は、エディタ右側の設定パネルで変更します。入力するたびに、ページに反映されます。

文章を変更する

  1. ページ上の見出しまたはテキストをクリックして選択します。
  2. 設定パネルで、全般が閉じている場合はクリックして開きます。
  3. テキストボックスで文章を編集します。
    メインの見出しの下の段落を選択し、設定パネルでテキストボックスを開いたエディタ

変更は自動的に保存されます。ボックス内で Enter キーを押すと、同じブロックの中で改行できます。ブロックは1つの段落のままで、新しい行は改行として扱われます。

注: テキストブロックには、書式のないテキストしか入力できません。1つの単語だけを太字にしたり、文の一部をリンクにしたりすることはできません。何かを強調したいときは、それを独立したブロックにして、そのブロックの太さまたはイタリックの設定を変更してください。リンクを付けるには、ボタンブロックを使います(下の「ボタン」を参照)。

見出し

見出しブロックには、全般の下に3つの設定があります。

  • テキストは、見出しの文章です。
  • サイズでは、見出し1から見出し6まで、見出しのレベルを選びます。レベル1が最も大きくなります。レベルは、検索エンジンやスクリーンリーダーにページの構成を伝える役割もあります。そのため、見出し1はページのメインタイトルに1回だけ使い、主要な各パートには見出し2、その下には小さいレベルを使いましょう。
  • 配置は、左、中央、右から選びます。

テキストブロックには、テキストと配置があります。段落にはこちらを使います。

テキストと見出しを装飾する

設定パネルでタイポグラフィを開くと、文字の見た目を変更できます。初期設定のままにした項目は、サイトのデザインに従うので、ページ全体で統一感を保てます。

見出しの設定。全般にはテキスト、サイズ、配置、タイポグラフィには書体、文字サイズ、太さ、色、イタリックが表示されている
  • 書体: このブロックで使うフォントを選びます。サイトの書体を使うのままにすることもできます。
  • 文字サイズ: ピクセル単位でサイズをスライドして選びます。自動のままにすると、見出しのレベルやサイトのテキストサイズに合ったサイズになります。
  • 太さ: レギュラーからブラックまで選べます。
  • 色: 色のボックスをクリックして、テーマの色、最近使った色、または任意の16進コードから色を選びます。なしをクリックすると、サイトの色に戻ります。
  • イタリック: ブロック全体のイタリックをオン・オフします。
  • 大文字・小文字: 入力したまま、UPPERCASE、lowercase、Capitalize Each Wordから選びます。
  • 字間と行間: 文字の間隔を広げたり、詰めたりします。

ボタン

ボタンブロックは、ボタンの見た目をしたリンクです。ページ上のボタンをクリックして選択し、設定を順に進めます。

ボタンの設定。表示名、ページとカスタムリンクの選択肢があるリンク、スタイル、配置

表示名とリンク

  1. 全般の表示名に、ボタンに表示する文言を入力します。
  2. リンクで、ボタンの移動先を選びます。
    • ページでは、一覧からご自身のページを選べます。名前で一覧を検索することもできます。あとからページのアドレスを変更してもリンクが機能し続けるので、ストア内のページにはこの方法が最適です。
    • カスタムリンクでは、https://example.com のような任意のアドレス、mailto:you@example.com のようなメールリンク、tel:+15555550100 のような電話リンクを入力できます。アドレスは https:// から始めてください。www.example.com のように、先頭に https:// がないアドレスは機能しません。

新しいボタンにはまだリンクが設定されていないため、リンクを選ぶまでどこにも移動しません。

スタイルと位置

スタイルは、塗りつぶし、アウトライン、控えめから選びます。配置では、ボタンを、占めるスペースの左、中央、右のいずれかに配置します。

3つのボタンを並べた図。濃い色の塗りつぶしのボタン、細い枠線のアウトラインのボタン、淡い色の控えめなボタン

外観

外観を開くと、ボタンを自分好みに仕上げられます。

ボタンの外観の設定。色、角の丸み、文字サイズ、太さ、書体、余白、幅いっぱい
  • 背景色、文字色、枠線の色は、サイトのデザインの色を上書きします。なしのままにすると、サイトのアクセントカラーが使われます。
  • 角の丸みは、角を丸くします。自動では、サイトの角の丸みが使われます。
  • 文字サイズ、太さ、書体で、表示名のスタイルを設定します。
  • 左右の余白と上下の余白で、ボタンを大きくしたり小さくしたりします。
  • 幅いっぱいにすると、ボタンが占めるスペースの幅いっぱいに広がります。
ヒント: すべてのボタンのメインカラーを一度に変えたいときは、ボタンを1つずつ装飾するのではなく、サイトのデザインのアクセントを変更します。詳しくは色、フォント、レイアウトを設定するをご覧ください。

関連記事

Last updated 2026-10-03