【Cocoon】URLをボタンにする方法

URL（リンク）をボタンにして目立たせたい！ときの作り方をまとめました。

Cocoonボタンの基本

Cocoonには、専用の「ボタン」ブロックがあります。

• 形（四角・楕円）
• サイズ（小・中・大）
• 光らせる・光らせない
• 背景色・文字色・ボーダー色

などをワンクリックで簡単に変えられます！

Cocoonボタンの作り方（手順）

１．ブロックの右辺にプラスサインが表示されています。クリック。

以下のようになります。

２．検索ボックスに[ボタン]と入力。

・黒い[ボタン]アイコンがCocoonのボタンです。クリック。

３．ボタンのテキストを入力する（いつでも修正可。）

４．右サイドバーでボタン設定をする

• URL：リンク先のURLをコピペ
• リンクの開き方：現在のタブ、もしくは新しいタブで開くかを設定
• サイズ：まずは「中」から試すのがおすすめ
• 円形にする：角に丸みがあるボタンにしたいときだけON
• 光らせる：ピカッとする効果をつけたいときにON、重要なリンクにおすすめ

右サイドバーを下にスクロールすると、さらに細かな設定も可能です。

• 文字サイズ
• ボタンの色
• 文字の色
• 外枠の色

Cocoonボタンの位置を変える方法

Cocoonのボタン位置は「ツールバーの配置アイコン」で変更できます。

ボタンをクリックすると、ツールバーが表示されますので、

[配置]アイコンをクリック。

左揃え・中央揃え・右揃えから選べます。

「なし」を設定すると、左寄せになっていました。

できあがり例がこちらです。実際に当ブログのトップページにジャンプします。

おわりに

ボタンの文言は、「何が起きるか」が一目で分かる ように書いてあるとありがたいですよね。

• NG例：
  • 「こちら」
• OK例：
  • 「無料ダウンロードはこちら」
  • 「Cocoonの設定手順を見る」

ボタンは、読者に次の一歩を示すための道しるべ です。

まずは１つ、記事を読み終わったあとに見て欲しいページを決めて、
そのリンクだけでもボタンにしてみてください。