About this Blog & About me(はじめに)

【Cocoon】アフィリリンクをボタンで表示する方法・ボタンと囲みボタンとの使い分け【初心者向け】

ブログ運営

WordPress・Cocoonでブログを書く時に、アフィリエイトのリンクをボタンで表示したいけれど、どうしたら良いか分からない。
また、ボタンの作り方は分かるけれど、「ボタン」と「囲みボタン」の違いや使い分け方が分からない。

そんな方向けに、ボタン表示の使い方を分かりやすくご説明します。

\まだブログを開設していない方へ/
スポンサーリンク

ボタンとは

ここで言う「ボタン」とは、簡単に言えばリンクの表示方法のひとつです。

こんなやつ↓

※このボタンは見本のため、クリックすると当サイトのトップページへ飛ぶように設定しています。

上のリンクボタンと、リンクを貼っただけの下の文字を、見比べてみてください。

ぐるりのそらブログへ

全く同じリンク先に飛ぶ設定ですが、見栄えが変わりませんか?

もちろん、文字リンクも使い方によっては便利で必要なものなので、リンクボタンと併用して使えると良いですよね。

ボタンの追加方法

URLのみを指定する場合は「ボタン」

リンク先のURLのみを指定してボタンを作る場合は、「ボタン」を使います。
リンクボタンを作る手順は以下のとおりです。

ブロックの追加(「+」のマーク)→ Cocoonブロック → ボタン、の順にクリックします。

編集画面の画像
記事編集画面

 ↓ ↓

次に、ブロック設定で、URL・リンクの開き方・サイズ・色設定、などを設定します。

編集画面の画像2
説明に必要な部分以外(画面真ん中辺り)は切っています

URL:リンク先URLを入力します。

リンクの開き方:「現在のタブで開く」(同窓)と、「新しいタブで開く」(別窓)から選びます。好きな方を選んでください。

サイズ:小・中・大 の三つのサイズから選んでください。見本は「中」サイズです。

色指定:下の方にスクロールして、色を選んでください。見本は「青色」です。

ソラ
ソラ

基本的な操作は、以上です。
色を変えたり、円形にしたりなど、自由にカスタマイズしてくださいね。

アフィリリンクは「囲みボタン」

アフィリエイトのリンクを貼る時には、リンク先のURLだけではなく、他にもたくさんのタグが組み込まれたhtmlコードを使いますよね。

そんな時は、ボタンではなく「囲みボタン」を使います。

囲みボタンを使う手順は、以下のとおりです。

ブロックの追加(「+」のマーク)→ Cocoonブロック → 囲みボタン、の順にクリックします。

ボタンを出す時と同じ流れで、「囲みボタン」の方をクリックします。
すると、以下のような画面になります。

編集画面の画像
説明に必要な部分以外(画面真ん中辺り)は切っています

ボタンの時にはURLを指定するのみでしたが、囲みボタンの場合は、「リンクタグ・ショートコード」の欄にアフィリエイトのリンクコードを入力(コピペ)します。

その他、ボタンの時と同じように、サイズや色などを指定してください。

ソラ
ソラ

編集画面では完成イメージとは違って見えますが、プレビュー画面ではきちんとリンクボタンが表示されます。

アフィリエイトリンクをボタンで表示する方法・まとめ

  • リンク先のURLのみ指定するときは、ボタン。
  • アフィリリンク等、URL以外のコードも指定するときは、囲みボタン。

と、使い分けましょう。

Cocoonなら、リンクボタンを作るのもすごく簡単にできます。ぜひお試しください(^^)/

当サイトでも利用しているASP(アフィリエイト)の詳細→アフィリエイト初心者でもブログで稼げる!おすすめASPサイト7選

ブログ運営
スポンサーリンク
\シェアしてもらえたら嬉しいです/
ソラのSNSはこちら↓Follow me(^^)/
ソラ

30代。1児の母。FP2級。古のおたく。『日々をたのしく、健康に美しく』を目標に。

このブログでは《美容系多めのおすすめ厳選グッズ》×《オタクの惚れた作品紹介》、その他、子育てのことなど多岐にわたって書いています。

Twitter・note・楽天ROOMなどのフォローもお気軽にどうぞ~!

ソラのSNSはこちら↓Follow me(^^)/
ぐるりのそら

コメント

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