【随時更新】コスパの高い注目ガジェットをAmazonタイムセールからピックアップ!詳しくはこちら
naenote.netへようこそ

naenote.netは、「捗る」がテーマのガジェット×テック系情報ブログです

シンプル・ミニマル・スピーディーがモットーの管理人が
「これは!」と感じた情報を厳選してお届けします

Cocoonでアフィリエイトタグを改変せずにリンクをボタン化するカスタマイズ

タグ改変なしでボタン化

無料WordPressテーマ「Cocoon」では、リンク(aタグ)をボタン化する機能がβ版として提供されています。

参考 記事作成に使える拡張スタイル。ボタン編。 | Cocoon

便利な機能なんですが、こちらaタグにclass属性を追加することでボタン化するしくみになっているため、タグ改変が規約で禁止されているアフィリエイトリンクには使えません

そこで、タグを改変せずにボタン化できるようにしてみたので、カスタマイズの方法を紹介します。

仕上がりイメージ

Cocoonに組み込まれているボタン(中)のスタイリングを利用しつつ、

  • ボタンのサイズ調整
  • 中央寄せ
  • 矢印マーク追加

しています。

カスタマイズの方法

HTMLの準備

<div class="aligncenter">
 <div class="btn btn-m btn-red">
  ここにタグ
 </div>
</div>

上記HTMLを、AddQuickTagに登録しておきます。

参考 AddQuicktag — WordPress プラグイン

今回は赤を使っているのでbtn-redクラスをつけていますが、他の色を使いたい場合は、下記記事を参考にクラス名を変えてください。(青ならbtn-blueなど)

参考 記事作成に使える拡張スタイル。ボタン編。 | Cocoon

CSSの準備

.aligncenter {
 text-align:center;
 margin:0 auto;
}
div.btn a {
 color:white;
 text-decoration:none;
}
div.btn:hover a,
div.btn a:hover{
 color:black;
 text-decoration:none;
 transition:all .5s ease;
}
div.btn p {
 margin:0;
}
div.btn-m {
 width:70%;
 min-width:250px;
 padding:14px 30px;
}
div.btn-m:after {
 content:"\f105";
 position:absolute;
 right:0;
 top:50%;
 margin-top:-.5em;
 font-size: 2em;
}

上記CSSを子テーマのstyle.cssに追記します。

実際の使い方

  1. AddQuickTagでボタンを挿入
  2. HTML挿入」でボタンの中にアフィリエイトタグを挿入
  3. もともとあった「ここにタグ」の文字を削除

こうすると最終的に

<div class="aligncenter">
 <div class="btn btn-m btn-red">
  <a href="XXX">XXX</a><img src="XXX">
 </div>
</div>

のような形になるので、アフィリエイトタグを改変しないままボタン化できます。

まとめ:ボタンのご利用は計画的に

以上、Cocoonのボタン機能を少しカスタマイズしてタグ改変禁止なアフィリエイトリンクをボタン化させてみました。

もちろん、ボタンだからといって必ずしもクリック率が上がるわけではありません。クリック解析などを通じて、定量的に判断すべきです。

とはいえ選択肢が多いに越したことはないので、ボタンが使いたい方はぜひカスタマイズしてみてください。

 

コメント

コメント以外のご意見・ご要望、管理人へのご連絡などは、お問い合わせからどうぞ