Pochipp(ポチップ)の外観をカスタマイズ

  • URLをコピーしました!

Pochipp(ポチップ)を以下の内容にcssでカスタマイズします。

  • ボタンを白黒で統一し、ホバーしたときにブランドカラーに変化させる
  • ボタンの右横にリンクアイコンを表示
  • 枠線をつけて角を丸く
  • ポチップのロゴを非表示に

Pochipp(ポチップ)とは

「ポチップ」はブロックエディタ特化のアフィリエイトリンク管理ツールです。無料で利用可能です。

Pochipp(ポチップ)の外観

Before

※画像

After

※画像

※実際のリンク(スマホで表示する場合ボタンが縦に配置されます)

※商品詳細

css

上述のBeforeをAfterにするcssは以下のとおりです。

/*ポチップの外枠*/
.pochipp-box{
 box-shadow:none;/*影を消す*/
 border:solid 1px var(--color_main);/*枠線をテーマのメインカラーに*/
 border-radius:8px!important;/*枠の角を丸く*/
}
/*ポチップのボタン*/
.pochipp-box .pochipp-box__btn{
 color:#333!important;/*文字色を黒に*/
 border:solid 1px var(--color_main);/*枠線をテーマのメインカラーに*/
 transition:.2s;/*ホバーのアクションを遅延*/
 box-shadow:none!important;/*影を消す*/
 border-radius:8px!important;/*枠の角を丸く*/
}
.pochipp-box .pochipp-box__btn:hover{
 color:#f7f7f7!important;/*ホバー時のボタンテキストカラー*/
}
.-amazon>.pochipp-box__btn:hover{
 background:#f99a0c!important;/*ホバー時背景色Amazon*/
}
.-rakuten>.pochipp-box__btn:hover{
 background:#e0423c!important;/*ホバー時背景色Rakuten*/
}
.-yahoo>.pochipp-box__btn:hover{
 background:#438ee8!important;/*ホバー時背景色Yahoo*/
}
/*ボタン右にリンクアイコンを固定*/
.pochipp-box .pochipp-box__btn::after {
  position: absolute;
  content: "\f35d";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  top: 50%;
  right: 1em;
  left: auto;
  bottom: auto;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
/*ポチップロゴ非表示*/
.pochipp-box .pochipp-box__logo span,.pochipp-box .pochipp-box__logo img{
 display:none;
}

S H A R E
  • URLをコピーしました!