MENU
チロ猫
こんにちは、チロ猫です。

ネットショップと趣味のブログをいくつか運営しています。
永久無料ドメイン付き!超高速サーバーConoHa Wing! 詳細

「ボタン」と「囲みボタン」の使い方|ブロックエディタ Cocoon編

Cocoonには ボタン囲みボタン があるけど、どう違うの?

Cocoonにはボタンが2つありますが、これらの使い分けをご存じですか?

ボタン」は通常のリンク「囲みボタン」はアフィリエイトリンクになります。

ボタンの使い方について詳しく解説します!

目次

「ボタン」と「囲みボタン」の違い|Cocoon

ボタンと囲みボタンのサンプル

Cocoonには「ボタン」ブロックと「囲みボタン」ブロックという、2つのボタンブロックがあります。

「ボタン」は通常のリンクの作成用「囲みボタン」はアフィリエイトリンク作成用、のように分類できます。

ボタン

通常のURLリンクを設定

囲みボタン

アフィリエイトタグのリンクを設定

以下で違いを詳しく解説します。

「ボタン」ブロック

ボタンブロックのリンク先としては、以下のようなものが挿入可能です

  • https://abc.com/page1/ などの通常のURL(内部・外部)
  • profilearticle1、などのスラッグ名(内部リンク用)

「囲みボタン」ブロック

囲みボタンには、以下のようなコードを入力することができます(アフィリエイトコード例)。

<a href="https://px.xxx.com/svt/ejp?a8mat=ABCDE333+CC5EU2+50+ABCDE333" rel="nofollow">国内最速・高安定の高性能レンタルサーバー【〇〇サーバー】</a>
<img border="0" width="1" height="1" src="https://www14.xxx.com/0.gif?a8mat=ABCDE333+CC5EU2+50+ABCDE333" alt="">

アフィリエイトコートを改変しないでそのまま貼れるため、ASPの規約に違反せずにボタンを作成することができます。

ボタンの挿入

まずは通常の「ボタン」ブロックの挿入方法を解説します。

STEP

ブロックエディタで + をクリックし、すべて表示 をクリックします。

STEP

ボタン をクリックします。

ブロックエディタで、ボタンをクリック
STEP

ボタンを中央に配置するには 中央揃え を選択します。

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

ボタンのサイズは、小、中、大のうちから選べます。

ボタンの角を丸くすることができます。

ボタンの設定

STEP

文字列を変更するには、文字列部分を直接選択して再入力します。

ボタンの背景、文字色、枠の色を選択できます。

ボタンの色と文字を設定
STEP

実際に表示すると、以下の画像のようになります。

ボタンが表示された

囲みボタンの挿入

次は、囲みボタンの挿入方法を説明します。

STEP

ブロックエディタで + をクリックし、すべて表示 をクリックします。

STEP

囲みボタン をクリックします。

囲みボタンを選択
STEP

囲みボタンのブロックが表示されました。

歯車マークをクリックして、右メニューを表示します。

囲みボタンが表示された
STEP

ボタンを中央に配置するには 中央揃え を選択します。

リンクタグ・ショートコード」には、アフィリエイトのテキストリンク用タグをコピペします

ボタンのサイズは、小、中、大のうちから選べます。

ボタンの角を丸くすることができます。

囲みボタンを設定する
STEP

さらに、ボタンの背景色、文字色、枠の色を選択できます。

囲みボタンの背景色を設定する
STEP

実際の表示を確認してみましょう。以下のようになります。

囲みボタンが表示された

引き続きブロックエディタを学ぼう!

次の記事では、画像を並べることができる「カラム」や、記事を画像付きで配置できる「ブログカード」のブロックについて説明します。

次は「記事の書き方 7

よかったらシェアしてね!
目次
閉じる