[Cocoon] ボタン特集

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

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

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

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

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

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

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

シェアボタンです。

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

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

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

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

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

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

タグやコードをボタンに

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

ボタンにしていいのか

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

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

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

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

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

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

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

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

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

手順は以下です。

囲みボタンの作り方

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

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

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

<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を利用して作ったのがこちらです。

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

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

このサイト、使いやすくておすすめです！

ただ、ボックスメニューアイコンに入ると、自分で作ったバージョンは、心なしか、輪郭がボワッとしているような気がするのですが、いかがでしょうか。（追記：4月になって、CocoonとWordPressを最新バージョンにしたら、ボワッと感がとれたと思います♪。）

初期設定だと、ボックスメニューはオレンジ色です。その色を変更する方法も記事にしています。

いいねボタン① 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のサイトだったら、「テーマのダウンロード」という行動を促すページに移動するボタンに使われています。

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

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

おわりに

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

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

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

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

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

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