WordPress

WordPressテーマ「Cocoon」解説 『ボタン』ブロックの使い方

「ボタン」ブロックの使い方 説明記事表紙画像

今回はWordPressテーマ「Cocoon(コクーン)」の『ボタン』ブロックの使い方を説明したいと思います。

ボタンブロックとはボタンのリンクの事で、他のページやページ内の指定箇所へ移動することができるボタンの事です。

下記のボタンはクリックすると、当ブログのトップページに移動します。

本記事ではこのボタンブロックの作成方法から使い方を説明します。

『ボタン』と『囲みボタン』の違い

Cocoon仕様ボタンブロックは下記の2種類があります。

 「ボタン」:通常のリンク外部リンク、内部リンク
② 「囲みボタン」:アフィリエイトリンク

ボタンブロック配置画像

”Cocoonブロック”に「ボタン」「囲みボタン」があります。
※”デザイン”にも「ボタン」がありますが、こちらはWordPressデフォルトでCocoonブロックと比較してカスタマイズ性が低いので説明しません。

この2つは「リンクの内容」によって使い分けます。

『ボタン』ブロックの作り方

「ボタン」ブロックは、アフィリエイトリンク以外の内部リンク・外部リンクを貼るときに使用します。

「ボタン」ブロックを選択します。

ボタンブロック選択画像

「ボタン」ブロックの各設定(リンク先のURL入力や大きさ等)は右ツールバーブロックエリアで行います。

ボタンブロック設定画像
「ボタン」ブロックの各設定
  1. リンク先のURLを入力
  2. リンクの開き方:「現在のタブで開く」or「新しいタブで開く」
  3. サイズの設定:「小」、「中」、「大」から選定
  4. 「円形にする」、「光らせる」の設定
  5. 各色の設定:「背景色」、「文字色」、「ボーダー色」の3種類をそれぞれ設定

サイズも3種類あり、色も自由に作成できます。
あと角を丸くすることで柔らかみを付けたり、ボタンを光らせてアイキャッチ効果も狙えます。

当ブログの「IT用語集」の索引ページはボタンブロックで構成しています。
下のボタンをクリックしてご確認下さい。

「ボタン」URLにアフィリエイトリンクを貼ると、リンクは正しく機能しません。
アフィリエイトリンクは次に説明する「囲みボタン」で使用します。

『囲みボタン』ブロックの作り方

「囲みボタン」アフィリエイトリンクを貼る場合に使用します。
アフィリエイトリンクASPから取得してください。

「囲みボタン」ブロックを選択します。

囲みボタン選択画像

「囲みボタン」ブロックの各設定は「ボタン」ブロックと同様に右サイドバーで行います。
まずは①に「アフィリエイトリンク」を貼り付けてください

囲みボタン設定画像
「囲みボタン」ブロックの各設定
  1. アフィリエイトリンクを入力
    ※ASPのテキストリンクタグは<a href=~から始まるコードです。
  2. サイズの設定:「小」、「中」、「大」から選定
  3. 「円形にする」、「光らせる」の設定
  4. 各色の設定:「背景色」、「文字色」、「ボーダー色」の3種類をそれぞれ設定

実際に作った「囲みボタン」は下記の通りです。
エディタで表示されていた黄色枠は公開後は表示されませんのでご心配なく。

まとめ

以上でCocoon仕様のボタンブロックの「ボタン」「囲みボタン」の作成方法から使い方を説明いたしました。

当ブログでもボタンブロックのリンクは多用していますので、効果的に使っていきましょう。

あとアフィリエイトリンク「囲みボタン」で使用することを忘れないようにしてください。

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