[Cocoon] ボタン特集

「タグ」や「ショートコード」を設定できる囲みボタン （形・サイズ・色・効果を選べます。）

URLを設定できるボタン１ （ 形・サイズ・色・効果を選べます。）

URLを設定できるボタン２　アピールエリアのボタン

URLを設定できるボタン３　 画像にURLを設定する （好きな画像を自分で準備。）

ファイルをダウンロードできるボタン (コードが書けないと、「黒一択」です★。)

トップへ戻るボタン（通常、 画面右下にあります。ページの一番上に高速で戻るボタンです。）

シェアボタン・フォローボタン（見た目や表示数の変更もできます。）

シェアボタンです。

フォローボタンです。（アカウントをお持ちの方は、ボタンをもっと増やせます。）

ウィジェットにあるボタン

ボックスメニューウィジェット （投稿ページや固定ページ、メニューなどを飛び先に設定できるボックス型のボタン。好きな画像を自分で設定。ショートコードも利用できます！）

いいねボタン１　Faceboookバルーンウィジェット （自分のFBを設定。）

いいねボタン２　Faceboookボックスウィジェット （自分のFBを設定。）

そして、SNSフォローボタンウィジェット （自分のSNSを設定。） とCTA（Call To Action）ボックスウィジェットのボタン（URLを設定。）は以下のようになります。

タグやコードをボタンに

タグやコードをボタンにしたいときは、「囲みボタン」機能を使います。

ボタンにしていいのか

私は、以下３つのAPS（アフィリエイトサービスプロバイダー）に登録しています。

• A8.net 
• もしもアフィリエイト
• バリューコマース

それぞれで、ボタンにしていいのか確認しました。

Cocoonフォーラムで相談させていただき、以下のように質問しました。

2020年3月現在の回答は以下です。

・・・という情報をふまえて、自己責任で判断しましょう。

私は、A8.netともしもアフィリエイトは、ボタンにしても規約違反ではないという理解をしました。ただし、トラッキングへの影響などはサポート外ですし、その動作の保証はしないということです。

追記：バリューコマースは、「見た目の変更」も「改変」の範囲に入り、禁止事項となっています。バリューコマースの広告素材は、本当にそのまま使うことにしましょう。

ちなみに、一番最初に「テキストリンクをボタンにしてもいいですか？リンクテキストの文言を変えてもいいですか？」というザックリとした質問を送ったときの回答は以下でした。この回答の中にも有効な情報があるので、転載しておきます。（文字装飾は私がつけました。）

手順は以下です。

囲みボタンの作り方

０．APSのアカウントから、アフィリエイトの「リンクテキスト広告のタグ」をコピー。

リンクテキスト広告とは、このようなものです：　もしもアフィリエイト

「タグ」は以下のようなものです。(一部値を変えていますので、これは無効です。)

<a href="//af.moshimo.com/af/c/click?a_id=12345&p_id=1&pc_id=1&pl_id=1318&url=https%abcdefghijklmnopqrstuvwxyz12345678910" rel="nofollow">もしもアフィリエイト</a><img src="//i.moshimo.com/af/i/impression?a_id=123123123&p_id=1&pc_id=1&pl_id=0000" width="1" height="1" style="border:none;">

もしくは、すでにタグをCocoonで登録してある場合、[Cocoon設定] > [アフィリエイトタグ]から「リンクテキスト広告のタグやショートコード」をコピーできますね。

「ショートコード」は以下のようなものです。

[affi id=7]　数字部分はそれぞれ違います。

１． 投稿画面を開きます。 新しいブロックで＋アイコンをクリック。スクロールバーを下げて[Cocoonブロック]をクリック。

２．[囲みボタン] をクリック。

３．表示された囲みボタンブロックをクリックすると、右サイドに設定エリアが出ます。
[リンクタグ・ショートコード]にタグかショートコードをコピぺします。

４．ボタンサイズ・円形にするか・光らせるかを右サイドで設定できます。更に下にスクロールすると、「文字のサイズ」と「色」の設定エリアがあります。お好みで設定します。

右サイドをスクロールした状態が以下です。

文字のサイズと色の設定ができます。

色は、ボタンの背景・文字・ボーダーをそれぞれカラーパレットから選べます。

ボタンの位置は、プレビューボタンの上のアイコンをクリックします。左揃え・中央揃え・右揃えから選べます。

できあがり例がこちらです。実際に登録ページにジャンプします。

もしもアフィリエイトについては、以下でまとめています。会社員には信じがたい、W報酬ボーナス制度があります！おススメです♪。

URLをボタンに

URLを設定できるボタンの作成手順です。

Cocoonのボタン機能

１． 投稿画面を開きます。 新しいブロックで＋アイコンをクリック。スクロールバーを下げて[Cocoonブロック]をクリック。

２．[ボタン] をクリック。

３．右サイドに、飛び先にしたいURLをコピぺします。その下で、リンクの開き方、ボタンサイズ、円形にするか、光らせるかを選べます。編集画面部分で、ボタン位置の変更とテキストの入力ができます。

右サイドをスクロールした状態が以下です。

文字のサイズと色の設定ができます。色は、ボタンの背景・文字・ボーダーをそれぞれカラーパレットから選べます。

ボタンの位置は、プレビューボタンの上のアイコンをクリックします。左揃え・中央揃え・右揃えから選べます。

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

アピールエリアのボタン

設定手順は、わいひらさんの以下のページにあります。

姿はボタンでないけれど

ボタンでは無いのですが、他にも「ページを設定してジャンプできる機能」があります。以下の記事で簡単に紹介しています。（通知エリア・ナビカード・おすすめカード・カルーセル）

画像にURLを設定

画像にURLを指定すると、画像のクリックでそのページに移動できます。

どんな画像・形・サイズでもOKです。

私は、ボタンぽくしたかったので、小さく丸くしました。

以下が手順です。

１． 投稿画面を開きます。 新しいブロックで＋アイコンをクリック。[一般ブロック]で[画像]をクリック。

２．[アップロード]または[メディアライブラリ]をクリックして画像を挿入。（アップロードはパソコンから、メディアライブラリは、すでにアップロードしてある画像を選ぶ場合です。）

３．画像が挿入されたブロックを選択。[リンクを挿入]アイコンをクリックして、飛び先にしたいURLをコピペ。矢印アイコンをクリック。

４．お好みで、ボタンの配置を選びます。キャプションの入力もお好みで。

できあがり例がこちら。（Cocoonレイアウトで２列にして、左側に画像挿入しています。）

ダウンロードボタン

クリックすると、ファイルのダウンロードができるボタンです。

WordPressの機能だと思います。

１． 投稿画面を開きます。 新しいブロックで＋アイコンをクリック。[一般ブロック]で[ファイル]をクリック。

２．[アップロード]または[メディアライブラリ]をクリックしてファイルを挿入。 PCからファイルをアップロードするか、メディアライブラリからファイルを選択します。

３．これだけでボタンが表示されます。そのブロックを選択して、お好みでボタンの位置を調整したり、ボタン名のことばを変更します。

ボタンの左には、ファイル名が出ます。これは、「リンク」になります。サイドバーで、「メディアファイル」を選択しておけば、ダウンロードする前に中身を確認できます。（消去しておいても大丈夫です。）

こちらが、「ファイル名リンクあり」のできあがり例です。ファイル名のリンクをクリックすると中身を確認できます。

「ファイル名リンク」を削除するとこうなります。消しても、ダウンロードボタンはちゃんと機能します。お好みで。

ダウンロードできるPDFファイルの中で、花の挿絵を使わせていただきました。

クリエイターの方：無料イラスト・図案屋さんさんのイラスト

すてきなイラストがたくさん見つかるサイト「イラストボックス」について以下の記事で紹介しています。

トップへ戻るボタン

画面の右下に現れるボタンで、クリックするとそのページのトップに高速で戻れます。

Cocoonでは、この見た目オプションがかなりたくさんあります！

初期設定で表示されるようになっていますが、見た目などを変えたい場合はこちらから。

１．[Cocoon設定]をクリック。

２．[ボタン]タブをクリック。

３．以下の画面で、表示するかどうか・ボタンの見た目・色を設定できます。自前の画像を使うこともできます。

４．最後に[変更をまとめて保存]ボタンをクリックで完了です。

シェア・フォローボタン

当ブログの以下の記事で手順をまとめています。

フォローボタンの種類を増やしたい場合は、以下のページを参照しましょう。

ボックスメニューボタン

回遊率や直帰率の改善に効果的！とウワサのボックスメニュー！

私もついにデビューしました。

設定手順は以下のわいひらさんのページにあります。

割と新しい機能なので、無い！と思ったら、テーマを更新しましょう。

わいひらさんのページにあるように、FontAwesomeを利用して作ったのがこちらです。

自分で画像ファイルを準備して作ったのがこちらです。

画像は以下のサイトからダウンロードしました。

このサイト、使いやすさは絶対おすすめなのですが。

ボックスメニューアイコンに入ると、自分で作ったバージョンは、心なしか、輪郭がボワッとしているような気がするのですが、いかがでしょうか。

ボックスメニューアイコンは、 FontAwesomeの方がキレイな印象です。ただ、他のコクーンユーザーの方で、自前の画像だけどくっきりキレイにできている方もいらっしゃるので何かコツがあるのかな、と思っております。

いいねボタン① FBバルーン

設定例は、わいひらさんの以下のページにあります。

いいねボタン② FBボックス

設定例は、わいひらさんの以下のページにあります。

この機能については、Cocoonフォーラムで以下のようなコメントがありましたよ！（太字は私がつけました。）

CocoonのFB関連：いいねしてね。的なウィジェットおいてるだけで、何もしなくってもホンノリだけFBの　いいね　が増えますよ。

FBなどで特に宣伝してないんですが、ウィジェットを置いてから30個くらい増えました。

初サイト運営・sns初心者さんには良いカモしれませんよ！

引用元： 雑談フォーラム　かうたっくさんのコメントより　sns初心者さんに。CocoonのFBウィジェットが熱い！

試す価値ありですね♪。

SNSフォローボタン

SNSフォローボタンウィジェットを利用する際は、お持ちのアカウントを以下のページに従って設定しておきます。（私は何もないので、アカウントが無くても使えるFeedlyとRSSのみになっています。）

その上で、SNSフォローボタンウィジェットをお好きな場所に挿入します。

１．[外観]>[ウィジェット]を選択。

２．左サイドで[SNSフォローボタン]ウィジェットを見つけて、▼をクリックします。上のほうにありますよ。

３． SNSフォローボタンを表示させたい場所を選んで、[ウィジェットを追加]をクリック。例として、「投稿本文中」を選択しています。（「投稿本文中」にすると、序文の最後・目次の上に出ます。）

４．お好みで、[タイトル]、[表示設定]を設定して、[保存]をクリック。更に[完了]をクリックで終了です。（ [表示設定] は、特定のページだけ表示したい、非表示にしたいというときに利用します。）

ウィジェットの表示設定

例えば、私は「ボタン特集の記事でのみ」SNSフォローボタンウィジェットを表示するようにしています。

[表示設定]をクリックして、以下のように設定しました。

[ウィジェットの表示]で[チェック・入力したページで表示] を選択。（特定のページだけ除外したければ、 [チェック・入力したページで非表示] を選択。）

適宜タブを選びます。投稿ページの場合は、[投稿]タブで、投稿IDを入力します。

投稿IDは編集画面のURL内、もしくは、投稿一覧ページの表に載っています。

CTAボタン

Cocoonのサイトだったら、「テーマのダウンロード」という行動を促すページに移動するボタンに使われています。

販売ページやメルマガ登録、読者登録のページをお持ちの方は、そのリンクを入れると効果的ですよね。

設定手順は、わいひらさんの以下のページに載っています。

おわりに

３歳の娘も、娘の友だちも、ボタンを押すのが大好きです。

エレベーターのボタンを押すことにかける執念には驚きます。

ケンカになるくらい、押したがります。

人間の本能に含まれているのでしょうか・・・。

大人になると、そこまでの情熱は持てませんが、やっぱりボタンて、チョット気になるものだと思います。

読者の方が押したくなるようなボタンを作りたいですね！