アフィリエイトリンクを作るのにしばらく『もしもアフィリエイト』を使っていたのですが、このたび当サイトにポチップを導入しました！
ポチップポチップはワードプレスのブロックエディタに特化した商品リンク作成プラグイン。
別サイトを開かなくてもワードプレス内で商品検索からリンク作成ができるので、活用しているブロガー、アフィリエイターの方は多いのではないでしょうか。
分かりやすい簡単な操作の他に、『せっかく審査に通過しているAmazonアソシエイトを使いたい』『セール情報のお知らせが表示できる』、これが決め手になり導入を決めました。
（物販が多いサイトではなく、最初の設定がやや面倒なので重い腰を上げました）
このシステムを開発した方はすごい！！
でもってカスタマイズ好きな私、デフォルトから少しだけ外観を変えています。
ポチップユーザーの方向けに、今回はその外観のカスタマイズをご紹介します。
- ボタンの色を変える方法
- 商品リンクの背景色を無効化する方法
- 商品リンクの背景の影を消す方法
- マウスホバーでボタンの色を反転する方法
- ポチップのロゴを消す方法
ボタンの色を変える
ボタンの色は管理画面→ポチップ設定→各ボタンの色で簡単に変更できます。
色の変更方法は２通り
- #に続く6桁のカラーコードを入力する
- カラーピッカーを動かして選ぶ
「色を選択」をクリックすると変更できるよ。
サイトの配色に合わせると統一感が出て馴染みやすくなります。
商品リンクの背景色、影を調整
ポチップのデフォルトの背景色が白になっていますが、このサイトはほんのりグレーっぽい白にしているので合わせたいのと、囲っている薄い影があるので消してみます。
背景と一体化していた方が浮かないように感じます。
ここからはCSSが必要！
CSS（コピペOK）
/*ポチップ*/
.pochipp-box {
background-color: unset!important;/*ポチップ背景色を無効にする*/
box-shadow: none!important;/*影を消す*/
}※スタイルを指定するプロパティの最後に!importnat;（このスタイルを最優先）をつけないと反映されませんでした。
背景色を無効に、影はbox-shadowが使われているのでnoneで非表示にしています。
以上、反映されているか確認しましょう。
ボタンの色をマウスホバーで反転させる
続いてマウスをボタンの上にのせたときに反転させて変化をつけたいとき。
こちらもCSSで可能です。
CSS（コピペOK）
/***ホバーすると反転***/
.pochipp-box[data-btn-style=dflt] .pochipp-box__btn {
border: 1px solid transparent;
}
/*アマゾン*/
.pochipp-box[data-btn-style=dflt] .-amazon>.pochipp-box__btn:hover {
background-color: #fff;
color:var(--pchpp-color-amazon)!important;
border-color:var(--pchpp-color-amazon);
}
/*楽天*/
.pochipp-box[data-btn-style=dflt] .-rakuten>.pochipp-box__btn:hover {
background-color: #fff;
color:var(--pchpp-color-rakuten)!important;
border-color:var(--pchpp-color-rakuten);
}
/*yahoo*/
.pochipp-box[data-btn-style=dflt] .-yahoo>.pochipp-box__btn:hover {
background-color: #fff;
color: var(--pchpp-color-yahoo)!important;
border-color:var(--pchpp-color-yahoo);
}CSSの補足
コピペで反映すると思いますが補足を書いておきます。
- :hover はマウスホバーした時の動作を表します
- background-color:#fff; /*ホバーしたときのボタンの色をカラーコードで入力（この場合は白）*/
- color:var(–pchpp-color-amazon)!important;/*ボタン内の文字色*/
- border: 1px solid transparent;/*枠線の太さ(1px)、種類(実線)、色(透明)*/
- border-color:枠線の色を各ボタンごとに指定
カラー部分に使われているvarから始まる文字はプロパティ変数というもので、ポチップ設定で指定したカラーが自動的に反映されます。
- var(–pchpp-color-amazon)：アマゾンのボタンに指定した色
- var(–pchpp-color-rakuten)：楽天のボタンに指定した色
- var(–pchpp-color-yahoo)：Yahoo!ショッピングのボタンに指定した色
ポチップのロゴを消す方法
右下に小さく表示されているロゴもCSSで非表示にすることができます。
.pochipp-box__logo span,
.pochipp-box__logo img{
display:none;
}ロゴについての見解
ロゴは商品であることを表しているものであり、システムを使わせてもらっているという開発者へのリスペクトの意味で簡単に消すものではないと考えています。
規約違反になる可能性もありますので自己責任でお願いいたします。
ポチップのロゴ、さりげなくて可愛い♪
まとめ
ポチップ商品リンクの外観カスタマイズについて書いてきました。
売上に反映する部分ではありませんのでお好みで試してみてくだいね。
快適なポチップライフを送りましょう。
読んでいただきありがとうございました。
Comment