ワードプレスでアフィリエイトリンクをボタン化

アフィリエイリンクをシンプルにカッコよく

別ブログでアフィリエイ記事書いていますが、最後のアフィリエイリンクバナーがどうも広告ぽくって、もう少しシンプルにカッコよくさせたい
物販のアフィリエイされているサイトでよく見かける、「ボタン化」させたアフィリエイリンクを真似してみたいと思った。

上級者の皆さんのサイトを巡回して試してみよかな？と思った方法が二つ

一つはエディターの囲みボタン機能を利用しての装飾
もう一つはスタイルシートでボタンを作成する方法

先ずは囲みボタン機能を利用する方法、これは簡単エディター内にあるスタイルの機能、「囲みボタン」を利用するだけでできるみたい

と言っても私の場合エディターにはその肝心な「スタイル」が見当たらなかった＞＜；
私と同じく「スタイルが見当たらない・・・」という方は一つ遠回り

【設定】からプラグインの『TinyMCE Advanced』を選択

下の追加機能一覧から「スタイル」を選択して自分のエディターに持ってきてカスタマイズ
これでスタイルが利用可能、後はいつものアフィリエイリンク（テキストリンク）を作成

通常、いつものテキストリンク

装飾する範囲を選択して「スタイル機能」を選択
その中で更に「囲みボタン」、好みの大きさ、色を選択して完了のポチ

レッドの大を選択、一手間加えるだけでボタン風の装飾が完了

参考にさせて頂いたのはこちらのサイト

こちらの方は本当にいわゆる「ボタン」

参考にさせて頂いたサイトはこちら

https://affiliate150.com/link-button

指定されたコードをCSSに張りつける
カスタマイズする場所は「外観」からテーマの編集「theme　Editor」を選択して
「Cocoon Child: スタイルシート (style.css)」へ

準備はこれで完了との事

アフィリエイのテキストリンクを記述内に入れればこれで完了

<div class=”red-btn”>ココにテキストリンク</div>

シンプルで広告ぽくなくて良い感じ♪
ちなみに横並び二つボタンのタイプも紹介記事にあった。

毎度コード引っ張るの面倒だな・・・と思ったら「AddQuicktag」というプラグインの紹介があった、いわゆる「定型文」なのかな？
これが簡単につかえれば、二つのタイプを上手く使い分けていければ良いかな？

上の方は自分の次の記事に案内したりするのにも使えそうだと思った。