Pochipp（ポチップ）の外観をカスタマイズ
Pochipp（ポチップ）を以下の内容にcssでカスタマイズします。
- ボタンを白黒で統一し、ホバーしたときにブランドカラーに変化させる
- ボタンの右横にリンクアイコンを表示
- 枠線をつけて角を丸く
- ポチップのロゴを非表示に
Pochipp（ポチップ）とは
「ポチップ」はブロックエディタ特化のアフィリエイトリンク管理ツールです。無料で利用可能です。
ポチップ
ポチップ | 商品のアフィリエイトリンクを手軽に管理！ブロックエディター対応の最新WordPressプラグイン
商品のアフィリエイトリンクを手軽に管理！ブロックエディター対応の最新WordPressプラグイン
Pochipp（ポチップ）の外観
Before
※画像
After
※画像
※実際のリンク（スマホで表示する場合ボタンが縦に配置されます）
¥2,000 （2023/12/14 16:14時点 | Amazon調べ）
ポチップ
※商品詳細
あわせて読みたい
Anker 610 Magnetic Phone Grip (MagGo) | マグネット式スマホリング
MagGoシリーズ マグネットでピタッとくっつくMagSafe対応iPhoneシリーズ専用アクセサリー「Anker MagGoシリーズ」。日常のあらゆる使用シーンに応じて使い分けができる…
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;
}
あわせて読みたい
Pochipp（ポチップ）のロゴを完全に消す、または肉球だけ残すcss
Pochipp（ポチップ）とは 「ポチップ」はブロックエディタ特化のアフィリエイトリンク管理ツールです。無料で利用可能です。 実際のPochipp（ポチップ）表示例 当サイト…
Follow / Contact
