ボタンのデザインを変える

記事内のボタンを、矢印付き・角丸・影付きなどの見た目に変えます。

実画面で確認

操作画面と手順のポイント

1. ボタンのまとまりではなく、中のボタンを1つクリックします。
2. 右側の「スタイル」で表示されているデザインを選びます。撮影画面では「塗りつぶし」「輪郭」が選べます。
3. 文字とリンク先を設定し、プレビューで移動先を確認します。

独自スタイルが表示されない場合：撮影した環境では、下記で紹介するOptiB独自スタイルは一覧に表示されませんでした。テーマのバージョンや対応状況を管理担当者に確認してください。表示される標準設定はそのまま使えます。

操作手順

1. 投稿や固定ページをブロックエディターで開きます。
2. ボタンのまとまりではなく、その中のボタン1つをクリックします。
3. 右側のブロック設定で「スタイル」を開き、使いたいデザインを選びます。
4. ボタンの文字とリンク先を確認し、保存します。

どれを選ぶ？

• 矢印付き：移動先があることを伝えたいとき。
• 角丸：両端を丸くしたいとき。
• 影付き：背景から浮き上がるように見せたいとき。
• リンク風：背景をなくし、文字と下線で控えめに案内したいとき。

元に戻すには「塗りつぶし」を選びます。スタイルは1つだけ選べ、標準の「輪郭」と同時には使えません。幅や配置は標準設定で変えられます。

できたか確かめる

公開ページでボタンを押し、正しいページへ移動するか確認します。「リンク風」の色はサイトのメインカラーに連動します。