結論
「＋」ボタンから Button Basic を挿入し、プリセットを適用すれば、数クリックで見栄えの良いボタンが完成します。テキストとリンクを設定して公開するだけで使い始められます。
ステップ1: ブロックを挿入する
- 投稿または固定ページの編集画面を開く
- ブロックを追加したい位置で ＋ ボタンをクリック
- 検索欄に「Button Basic」と入力する
- 表示された Button Basic ブロックをクリックして挿入
ポイント: 「zen」や「ボタン」で検索しても見つかります。
ステップ2: デザインプリセットを適用する
- 挿入したブロックを選択する
- ブロック上部のツールバーにある プリセットアイコン をクリック
- 表示されるプリセット一覧から好みのデザインを選択
調整のコツ: プリセットは土台として使い、色やサイズは後から自由に調整できます。まず全体の方向性に近いプリセットを選ぶのがおすすめです。
ステップ3: テキストを編集する
- ブロック内のテキスト部分を直接クリック
- 表示したいボタンテキストを入力する（例:「お問い合わせはこちら」「無料で始める」）
ポイント: テキストはエディタ上で直接編集できます。フォントサイズや太さはサイドバーの「テキスト設定」パネルから調整できます。
ステップ4: リンクを設定する
- ブロックを選択した状態で、ツールバーの リンクアイコン をクリック
- リンク先URLを入力する
- 必要に応じて「新しいタブで開く」を有効にする
- Enterキーで確定
注釈: ツールバーのタグ選択で
a（リンク）/button（ボタン要素）/div（ブロック要素）を切り替えられます。通常のリンクボタンはaタグのままで問題ありません。
ステップ5: 色を調整する
- サイドバーの各設定パネルを開く
- 背景色を変更するには 背景設定 パネルを開く
- テキスト色を変更するには テキスト設定 パネルを開く
- カラーピッカーまたはカラーコードで色を指定する
調整のコツ: ボタンの背景色とテキスト色のコントラスト比を十分に確保すると、視認性とアクセシビリティが向上します。
ステップ6: プレビューで確認する
- エディタ上部の プレビュー ボタンをクリック
- 「新しいタブでプレビュー」を選択
- フロントエンドでボタンの表示を確認する
- ホバー時の変化やリンク先への遷移も確認する
ポイント: エディタ上の表示とフロントエンドの表示は基本的に一致しますが、テーマのCSSが影響する場合があります。最終確認はフロントエンドで行ってください。
ステップ7: ページを公開する
- ボタンの見た目とリンクを確認できたら、エディタ上部の 公開 または 更新 をクリック
- フロントエンドのページにアクセスして最終確認
もっと詳しく設定したい場合
Button Basic には18種類の設定パネルがあります。詳しい設定方法は buttonBasic 設定ガイド を参照してください。
主な設定パネル:
| パネル | できること |
|---|---|
| テキスト設定 | フォントサイズ・太さ・行間・文字間隔の調整 |
| レイアウト設定 | 幅・高さ・余白（マージン・パディング）の調整 |
| 背景設定 | 色・グラデーション・画像・パターンの設定 |
| ボーダー設定 | 線幅・スタイル・色・角丸の調整 |
| アイコン設定 | アイコンの追加・サイズ・色の設定 |
| アニメーション設定 | ホバー時や表示時のアニメーション（Pro機能） |
次のステップ
Pro版に興味がある方は、Pro版のアクティベーション で有効化方法を確認できます。