ポチップ変更の個人的なメモ。
詳しくない人間が見よう見まねでやってみたもの。
色やサイズの数値は適当。
うまくいかないかもしれない。
RinkerとPochipp併用の注意
物販用プラグインにはRinkerやPochippなどがあります。
何が良いかは人によると思いますが、併用するときには注意があります。
Pochippを有効化しているとRinkerは有効化できないのです。
逆にRinkerを有効化した状態でPochippを有効化することはできます。
Pochippを先に利用している場合には一度無効化してからRinkerを有効化し、Pochippを有効化し直せば問題はありません。
無効化しても設定などは保持されます。
Amazon検索での注意
ポチップはAmazon検索にAmazonから提供されているProduct Advertising API (PA-API) という機能を利用しています。
これは利用し続けるにはPA-API経由の売上実績（発送済み商品売上）が必要になります。
1日の検索上限も過去30日間の発送済み商品売上により決まります。
検索エラーが出た場合には自分の過去の売上なども確認したほうが良いかもしれません。
ページごとの変更と個別の変更
ページごと変更
そのページだけ変更する方法はテーマによる
こういう機能はテーマによってある場合とない場合がある
テーマによってはコードを<style></style>で囲む
プラグインで入れたり自分で作ったりもできるらしい
プレビューで見てもすぐには変わらないことが多い
個別に変更
個別に変更する場合はボックスの「追加CSSクラス」にクラス名をつける
ポチップブロックの「追加CSSクラス」にクラス名を入れ、そのクラス名のブロックのみ色が変わるようCSSを記載する
例：クラス名「mozi」でボタンの色を変更
↓ ポチップブロックの「追加CSSクラス」
mozi↓ 「追加CSS」など。
.mozi.pochipp-box[data-btn-style=dflt] .-amazon>.pochipp-box__btn {
background: #333333;/*Amazon*/
}SANGOの場合はデフォルトのブロックは個別にCSSが設定できるので、ポチップブロックをグループ化してグループの方のカスタムCSSを利用するとCSSクラスをつけなくても個別に設定できます。
↓ Amazonボタンの色と文字を個別に変えたもの。
ポチップ↓ 通常
ポチップポチップの外側の枠を変更
.pochipp-box{
border:4px double #CCC;/*二重枠線*/
box-shadow: none;/*影を削除*/
}ボタンの変更
ボタンのスタイルが「標準」か「アウトライン」かで変わるものもある
- 「標準」のとき：[data-btn-style=dflt]
- 「アウトライン」のとき：[data-btn-style=outline]
ボタンの文字のサイズなど変更
.pochipp-box__btn {
font-weight: bold;/*太字*/
font-size: 15px!important;/*サイズ*/
}ボタンの角の丸みを変更
標準
.pochipp-box[data-btn-style=dflt] .pochipp-box__btn {
border-radius: 3px;
}アウトライン
.pochipp-box[data-btn-style=outline] .pochipp-box__btn{
border-radius: 3px;
}ボタンの順番変更
楽天やYahoo!のセール時でも順番が変わらないようにする。
アイテムを並べる順序の「order」がセール時は「order: -1」になるようなので、それより小さい値を設定すると前になる。
.pochipp-box__btnwrap.-amazon {
order: -3;/*Amazonを先頭*/
}
.pochipp-box__btnwrap.-rakuten {
order: -2;
}ボタンの色変更
すべてのポチップに反映させる場合は管理画面で変更。
商品に合わせた色にしたい場合などはそのページだけやブロック個別に変更。
ボタンのスタイルが「標準」
「標準」のときは[data-btn-style=dflt]
.pochipp-box[data-btn-style=dflt] .-amazon>.pochipp-box__btn {
background: #F5980D;/*Amazon*/
}
.pochipp-box[data-btn-style=dflt] .-rakuten>.pochipp-box__btn {
background: #E0453F;/*楽天*/
}
.pochipp-box[data-btn-style=dflt] .-yahoo>.pochipp-box__btn {
background: #4C93E9;/*Yahooショッピング*/
}.pochipp-box[data-btn-style=dflt] .-custom>.pochipp-box__btn {
background: #517D99;/*カスタムボタン*/
}
.pochipp-box[data-btn-style=dflt] .-custom_2>.pochipp-box__btn {
background: #517D99;/*カスタムボタン2*/
}ボタンのスタイル「アウトライン」
「アウトライン」のときは[data-btn-style=outline]
「amazon」の部分をそれぞれ変える(上の「標準」参照)
.pochipp-box[data-btn-style=outline] .-amazon>.pochipp-box__btn { color: #F5980D;
}ボタンのテキストを変更
基本的に管理画面で変更。
そのページだけやボックス個別に変更する場合。
元の文字を透明にして別の言葉を重ねる方法なので、ボタンの幅などは変わらない。
長いと2行になるので文字の大きさなど変えたほうが良いかもしれない(フォントサイズを擬似要素の方に入れる)。
「アウトライン」の場合は試してない。
例）Amazonボタンの文言を「Amazon Kindle」
.pochipp-box[data-btn-style=dflt] .-amazon>.pochipp-box__btn {
color: transparent!important;/*ボタンの文字色透明*/
position: relative;
}
.pochipp-box[data-btn-style=dflt] .-amazon>.pochipp-box__btn::after {/*擬似要素*/
content: "Amazon Kindle";/*かぶせる文言*/
color: white;/*文字の色*/
position: absolute;
}セール情報をなくす
.pochipp-box__saleInfo {
display: none;
}ロゴを見えなくする
悪目立ちするわけでもないのであえて消す必要はないかもしれませんが。
.pochipp-box__logo {
display: none;
}ラベルを付ける
.pochipp-box::before {
content: '\f521 \00a0おすすめ';
font-family: "Font Awesome 5 Free";
position: absolute;
border-radius: 4px;
top: -1.3em;
left:.5em;
background-color:#FFB500;
padding: .1em 1em;
font-weight: bold;
color: #fff;
font-size: .9em;
z-index: 1;
}
.pochipp-box:after{
content: '';
position: absolute;
margin-left: -10px;
border: 10px solid transparent;
border-top: 10px solid #FFB500;
top: .6em;
left: 2.2em;
right: inherit;
padding: 0;
margin-right: 0;
}
ポチップ.pochipp-box:before {
content: '\f521 \00a0おすすめ';
font-family: "Font Awesome 5 Free";
position: absolute;
top: -1.4em;
left: .4em;
background-color: #fff;
padding: .4em;
font-weight: bold;
color: #999;
font-size:1em;
z-index: 1;
}
.pochipp-box{
border:2px solid #dcdcdc;
box-shadow: none;/*影を削除*/
border-radius: 3px!important;
z-index:0;
}その他
Amazonの画像リンクがなくなった時に試しに作ってみたポチップの画像以外を非表示にしたもの。
ポチップの機能でボタンを全部非表示にすると画像のリンクが自分のブログに戻るようになってしまうので、CSSで消す必要があります。
参考
CSS編集するときに使うクラス名。
管理画面などで操作できるものも多いですが、一括で操作したり個別に操作したりしたい時用に。
.pochipp-box /*ブロック全体*/
.pochipp-box__title /*タイトル*/
.pochipp-box__image /*画像*/
.pochipp-box__price /*金額*/
.pochipp-box__review /*レビュー（proのみ）*/
.pochipp-box__logo /*ロゴ*/
.pochipp-box__saleInfo /*セール情報*/Pochipp ProはSANGOのコンテンツブロックとは相性が悪いようでエラーになります。
利用するときだけProを無効にすれば使うことはできますが、計測はできないようです。
