[Cocoon] ボタン特集

[Cocoon] ボタン特集
アイキャッチ画像は

Annalise BatistaによるPixabayからの画像 (ボタンと背景の両方)

いくみ
いくみ

ボタンの種類、以下のようにたくさんあります。

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

URLを設定できるボタン1 ( 形・サイズ・色・効果を選べます。)

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

[Cocoon]アピールエリアのボタンサンプル

URLを設定できるボタン3  画像にURLを設定する (好きな画像を自分で準備。)

メニューボタンサンプル

 
運営メニューの記事一覧ページに移動するボタンです。

ファイルをダウンロードできるボタン

いくみ
いくみ

ダウンロード用のサンプルファイルは、「ボタンを含む英語表現」の紹介ノートです。ファイル名をクリックすると中身を確認できます。ボタンをクリックすると、ダウンロードが促されます。

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

[Cocoon]トップページへ戻るボタンサンプル

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

シェアボタンです。

シェアボタンサンプル

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

フォローボタンサンプル

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

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

いくみ
いくみ

ブログマニュアル4種類です、ぜひご利用ください!

いいねボタン1 Faceboookバルーンウィジェット (自分のFBを設定。)

[Cocoon]FBバルーンウィジェット、いいねボタンサンプル
わいひらさんサイト「Cocoonデフォルトのウィジェット機能まとめ」よりキャプチャ

いいねボタン2 Faceboookボックスウィジェット (自分のFBを設定。)

[Cocoon]FBボックスウィジェット、いいねボタンサンプル
わいひらさんサイト「Cocoonデフォルトのウィジェット機能まとめ」よりキャプチャ
いくみ
いくみ

私はFBアカウントが無いため、上の2つは、わいひらさんのサイトのスクショです。

『 当サイト(wp-cocoon.com)の内容はクリエイティブ・コモンズBY-ND(CC BY-ND 2.1)ライセンスに従っていただければ転載も自由です。 』とありましたので利用させていただきました。

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

SNSフォローボタン
いくみをフォローする
CTAボックスボタン
読者登録フォーム
ご登録いただいたメールアドレスに、新記事投稿のお知らせメールを送らせていただきます。 よろしければご利用くださいませ。

 

Cocoon ボタンの種類

bego eguiaによるPixabayからの画像

いくみ
いくみ

当記事では、ボタン挿入手順をまとめたり、手順ページへのリンクをリストしています。

目次でお目当てのボタンをクリックすると、該当セクションにジャンプします。

タグやコードをボタンに

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

いくみ
いくみ

アフィリエイトリンクを例に説明します。

ボタンにしていいのか

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

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

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

ASPで取得したテキストリンクのaタグに対して、CSSを変更してボタンのような見た目にするのは規約的に大丈夫、という理解であっていますか(間違いがあったら自己責任)?

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

A8.netからの回答:

お問い合わせの件につきまして、CSSなどで元のコードに影響のない範囲で見た目を変更されることは不正行為には該当いたしません。

ただし、生成されたリンクコードをそのまま掲載していない場合はトラッキングへの影響を含め、コードの動作について弊社では保証致しかねます。何卒ご了承ください。

また、広告主様より使用停止の要請がございました際には、迅速にご対応くださいますようお願い申し上げます。

もしもアフィリエイトからの回答:

おっしゃるとおりです。

CSSにつきましても、弊社サポートの対象外となるためご自身の責任のもとご利用いただければと存じます。

バリューコマースからの回答:

ご質問いただいた件ですが、弊社では、管理画面で取得した広告コードをそのまま利用していただくことをお願いしておりますので、少しでも広告コードに改変が加われば、アフィリエイトサイト運営者利用規約第14条(禁止行為)に抵触しますため公認することはできません。

利用規約 | ASPのバリューコマース アフィリエイト

—————————————————————–

1.広告ソースコード、IDおよび広告データの改変本プログラムの広告表示用のHTMLソースならびにアフィリエイトサイトID、広告IDのコード(総称して以下「広告コード」といいます。)ならびに広告に利用する画像および文言(以下「広告コード」と総称して「広告コード等」といいます。)などを当社または広告主が認める場合を除き、無断で改変すること。また、アフィリエイトサイトおよびアフィリエイトサイト以外のメディアに当該広告に影響を及ぼす可能性のあるスクリプトを記述したり、そのようなスクリプトの記述のあるページへ当該広告のHTMLソースおよびコードを掲載すること。

—————————————————————–

広告コードの一部分の抜粋や改変を行われますと、トラッキングの保証ができかねます。

不正利用との判断から、弊社の不正監視チームよりご連絡がいく場合もございます。

また、すべての報酬のお支払いができなくなる場合もございますので、ご遠慮いただけますようお願いいたします。

上記をご理解いただいた上で、変更される場合につきましてはアフィリエイト様ご自身の責任をもってご利用くださいますようお願い申し上げます。

追記(上記の回答ですと、CSSの取り扱いが私には分からなかったため、再確認の質問を送りました。いただいた回答が以下です。):

CSSによる見た目のみのご変更とのことでございますが、見た目を変更されることが弊社での改変にあたります。違う見た目にするために弊社の広告コードを埋め込まれること自体について、許可することはできません。

重ねて申し上げますが、広告コードの一部分の抜粋を行われますとトラッキングの保証ができかねます。

上記をご理解いただいた上で、変更される場合につきましてはアフィリエイト様ご自身の責任をもってご利用くださいますようよろしくお願い申し上げます。

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

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

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

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

原則としてA8.netで生成される広告素材は、改変を加えない状態にてご利用頂くことが前提となりますが、CSSによる文字装飾など、広告内容に影響を及ぼさない改変につきましては、自己責任にて行って頂いております。

ただし、改変を加えたコードの動作について弊社では保証致しかねます。

広告素材を改変したことによって、成果報酬が正しく反映されなくなった場合はサポート対象外になりますので予めご了承ください。

また、テキスト素材のテキスト文言変更は禁止行為に該当いたしますのでおやめください。

参考)FAQ:コードの一部を変更しても良いですか?

原則、タグの書き換えは推奨しておりません。

しかしながら、知識がおありになるのであれば、ご自身の責任の下、書き換えていただいても特に罰則などはございません。

ただし、書き換えミスなどで成果が発生しないなどの事象が発生してもサポートの対象外となりますのでご注意ください。

「リンクテキストの文言変更について」

タグの書き換えは推奨しておりませんのでご自身の責任の下、ご判断いただければと存じます。

弊社で提供している広告コードにつきましては、改変なくすべてのコードをそのままご利用いただくようお願いしております。

コード内には、アフィリエイトに必要となる各種の機能が設定されております。変更や一部分の抜粋を行われますと、トラッキングが行われなくなる場合や、不正利用との判断から、すべての報酬のお支払いができなくなる場合もございますので、ご遠慮いただけますようお願いいたします。

自由テキストがない広告主様につきましては、広告主様の意図で自由テキストを設定していない可能性がございますので、無断でテキストを編集することはご遠慮ください

リンクテキストの「ことばの変更」は、A8.netとバリューコマースはハッキリと禁止になっています。(バリューコマースは正確には「ご遠慮」とありますが、禁止と解釈しました。)

ことばの変更例:「A8.net」というリンクテキストを「A8.netの登録ページへ」などに自分で変更することを指しています。

「もしも」と「バリューコマース」は、「自由テキストリンク」という広告素材があるので、自分でことばを変えたいときは、それを利用しましょう。広告案件に「自由テキストリンク」素材が無い場合、ことばを変えるのは辞めておきましょう。

いくみ
いくみ

ASPの担当の方々、わいひらさん、ありがとうございました!

手順は以下です。

囲みボタンの作り方

0.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機能で登録すると、「ショートコード」が割り当てられます。登録しなくても、タグはそのまま使えますが、一覧になるので便利です。

詳しくはこちら:[Cocoon] アフィリエイトタグの使い方とアフィリエイトリンクの入れ方

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

Cocoon囲みボタン挿入手順

2.[囲みボタン] をクリック。

Cocoon囲みボタン挿入手順、囲みボタンアイコン

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

Cocoon囲みボタン挿入手順、タグやショートコードをコピペ

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

Cocoon囲みボタン挿入手順、ボタンサイズ・形・効果を選択

ショートコードをコピペすると、編集画面のプレビューは出ないです。ショートコードがそのまま表示されます。設定した効果は、記事のプレビューで反映されますが、色などをじっくり選びたい場合は、「タグ」をコピペして編集画面で見ながら選ぶほうが便利です。

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

Cocoon囲みボタン挿入手順、文字サイズ、ボタンと文字の色を選択

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

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

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

Cocoon囲みボタン挿入手順、ボタンの位置を選択

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

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

URLをボタンに

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

いくみ
いくみ

内部リンク・外部リンク、両方とも同じ手順です。

Cocoonのボタン機能

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

[Cocoon]URLを設定できるボタン挿入手順

2.[ボタン] をクリック。

[Cocoon]URLを設定できるボタン挿入手順、ボタンアイコン選択

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

[Cocoon]URLを設定できるボタン挿入手順、URLコピペ・リンクの開き方・サイズ・形・効果を選択

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

[Cocoon]URLを設定できるボタン挿入手順、文字サイズ・ボタンの色・文字の色を選択

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

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

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

アピールエリアのボタン

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

姿はボタンでないけれど

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

画像にURLを設定

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

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

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

いくみ
いくみ

タップフレンドリーな感じになるかなと。

以下が手順です。

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

WordPress一般ブロックのメニュー、画像アイコン

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

WordPress画像の挿入

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

WordPress画像にURLを設定

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

WordPress画像の位置を調整

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

画像にURLを指定して作ったボタン

 
 
運営メニューの記事一覧ページに移動するボタンです。

ダウンロードボタン

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

WordPressの機能です。

いくみ
いくみ

「お役に立てるブログ作り」に大切ですね!

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

ファイルをダウンロードするボタンの作り方

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

ファイルをダウンロードするボタンの作り方 ファイルを挿入

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

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

ダウンロードボタンの設定

ダウンロードボタンは、編集画面では有効になりません。

プレビュー画面で試します。

ファイル名リンクを残しておくと、ボタン位置の設定が「編集画面では」反映されないです。プレビューでは反映されるのですが、ファイル名とボタン名の長さによってはイマイチピッタリ真ん中にならないです★。

ダウンロードボタンの見た目

ボタンテキストの入力をすると、上にテキストを編集できるアイコンが出ますが、おススメはしません。(蛍光ペン効果や文字色、サイズや太字・斜体など。)ボタンテキストもCSSで設定するほうが良いのだと思います。

こちらにCSSでボタンテキストの色変更もまとめました。

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

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

上のように、「ボタン名」を長くすると、「携帯表示」見づらくなります。笑。直そうと思ったのですが、良くない例として一つはわざとそのままにしました。

画像ファイル(.jpg, .pngなど)をダウンロードできるようにしたい場合

そのままですと、おそらくダウンロードが促されません。

以下のコードを該当記事の編集画面の一番下、カスタムJavaScript設定欄に貼り付けると解決しました。(フォーラムでロコさんより教えていただきました。)

(function($){baguetteBox.run(".entry-content", {ignoreClass: 'wp-block-file__button'})})(jQuery);

もしくは、[Cocoon設定]の[画像]タブにある[画像の拡大効果]の設定を[なし]にするという方法もできます。ただ、その画像設定は変えたくない場合のが多いかなと思うので、上のコードがおススメです。

この[画像の拡大効果]の設定の説明は以下のわいひらさんのページにあります。

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

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

いくみ
いくみ

本当にきれいです。

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

トップへ戻るボタン

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

いくみ
いくみ

ブログを始めてからこの存在に気が付いて、便利で感動しました。

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

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

1.[Cocoon設定]をクリック。

Cocoon設定

2.[ボタン]タブをクリック。

Cocoon設定、ボタンタブ

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

[Cocoon] トップへ戻るボタン設定

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

シェア・フォローボタン

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

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

ボックスメニューボタン

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

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

いくみ
いくみ

「ショートコード」になっていると、記事内のどこにでも、自由自在に出せるので、とても便利・・・!

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

いくみ
いくみ

ウィジェットにもなっているので、サイドバーやフッターに表示させるのも簡単!

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

テーマのバージョンを更新する方法:

[ダッシュボード]メニューの[更新]をクリック。

[テーマ]でCocoonを選択してから、[テーマを更新]ボタンをクリックです。

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

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

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

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

『icooon mono』のおススメポイント
  • 無料。
  • 登録不要。
  • 商用利用可。
  • 種類が豊富!( まさか、「タンポポの種」と「洋梨」が見つかるとは思っていなかった♪。 )
  • ダウンロードする前に、自分で色を指定できます!最高に便利・・・!
  • 画像の種類でPNGを選べば、透過にできます!手間いらず!
いくみ
いくみ

このサイトは、ファビコン作りにも最適だと思います!

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

いくみ
いくみ

ただ、私的には「ボックスメニュー」用のアイコンは、FontAwesomeをおススメします。なぜかというと、「色」を変えるのが簡単だからです。自前画像の場合、色を変えたかったら、画像を作り直すところから始まります。FontAwesomeの場合は、チョコっと設定するだけで色変更ができますよ!

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

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

[Cocoon]FBバルーンウィジェット、いいねボタンサンプル
わいひらさんサイト「Cocoonデフォルトのウィジェット機能まとめ」よりキャプチャ

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

いくみ
いくみ

FBアカウントがあったら、ぜひ利用したいですね~。

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

[Cocoon]FBボックスウィジェット、いいねボタンサンプル
わいひらさんサイト「Cocoonデフォルトのウィジェット機能まとめ」よりキャプチャ

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

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

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

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

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

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

試す価値ありですね♪。

SNSフォローボタン

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

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

1.[外観]>[ウィジェット]を選択。

ウィジェットの追加手順

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

[Cocoon] SNSフォローボタンウィジェット設定方法

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

[Cocoon] SNSフォローボタンウィジェット設定方法、位置の選択

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

[Cocoon] SNSフォローボタンウィジェット設定項目

CTAボタン

CTAとは、Call To Actionの略で、読者の方の行動を促す、という意味だそうです。

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

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

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

いくみ
いくみ

とても目立ちますし、見た目がかっこいいですね♪。行動を促せるページが無い場合も、「絶対に読んでほしい記事一覧ページ」や「渾身の一押し記事」のURLを入れても良いと思います。

おわりに

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

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

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

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

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

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

[Cocoon] ボタン特集
LeoNeoBoyによるPixabayからの画像

コメント

タイトルとURLをコピーしました