![](https://starting-marketing.com/wp-content/uploads/2021/11/1027725_m-1024x683.jpg)
この記事ではCocoon設定の【ボタン】のタブについて解説していきます。
ここではページのトップへ戻るボタンの設定を行ないます。
![](https://starting-marketing.com/wp-content/uploads/2021/11/6b4756fbf0e5fa10d9fbd866eaa14a9e-1024x688.jpg)
それでは順に解説していきます。
トップへ戻るボタン設定
プレビュー
![](https://starting-marketing.com/wp-content/uploads/2021/11/4f7a17903fc35206f2f9ceb1d7b199b3.jpg)
プレビューでは現在設定されているボタン画像が表示されます。ただし動作はしません。
トップへ戻るボタン表示
![](https://starting-marketing.com/wp-content/uploads/2021/11/c28e886a5e137107bbc91d1d2ec68d5f-1.jpg)
「トップへ戻るボタンを表示する」にチェックを入れるとボタンが表示されるようになり、チェックを外すとボタンが表示されなくなります。
ボタンのアイコンフォント
![](https://starting-marketing.com/wp-content/uploads/2021/11/dcd709f9930f28aeca24bf42243239a1.jpg)
「ボタンのアイコンフォント」では、ボタンのアイコンを設定することができます。
いろんなアイコンがありますが、読者が困惑しないアイコンに設定しましょう。
ボタン色
![](https://starting-marketing.com/wp-content/uploads/2021/11/8184c171e4f2104f7076d730d5561b74.jpg)
その下の「ボタン色」では、ボタンの色を設定することができます。
ここではボタン全体の色と、その中に入る文字の色を選択することができます。
ボタン画像
![](https://starting-marketing.com/wp-content/uploads/2021/11/c3d20f94e3e0e3cd01986963de1a6c1b.jpg)
最後の「ボタン画像」では、アイコンではなく画像を使いたい場合には、こちらからアップロードして表示させることができます。
横幅の最大は120pxになります。
ボタン画像サンプル
![](https://starting-marketing.com/wp-content/uploads/2021/11/8aff3bafd66a7f1be1b55bcd00e06b2a.jpg)
![](https://starting-marketing.com/wp-content/uploads/2021/11/024caa65389d233f7e39ee7fa82efe6c.jpg)