ワードプレスのアフリエイト広告掲載プラグインでとっても便利なポチップ。
ポチップを使うにあたり、アマゾン、楽天市場とかいろいろなところを使っている場合はいいのですが、アマゾンなど1つだけに絞り込んで掲載する場合、ボタンの位置が左寄せとなりその横が空白となってしまいます。その横の空白が気になっていたのでボタンの配置を少し調整しボタンが1つの時には横いっぱいになるように、2つ以上あるときはポチップ設定のまま複数表示されるようにしてみました。
ポチップでボタンを1つだけ表示するには
アマゾンや楽天等いろいろある中で、例えばアマゾンだけを表示させる場合は、投稿編集画面のポチップ設定より行うことになります。
投稿編集画面でポチップのブロックを選択し、右横にあるオプション画面より非表示にしたいボタンにチェックを入れるだけです。
CSSへ追記
ボタンが1つの場合に、横いっぱいにボタンを広げるには、下記コードをCSSに追記するだけです。
/* ボタンが1つのときだけ横幅いっぱいにする */
.pochipp-box__btns[data-maxclmn-pc="fit"]
.pochipp-box__btnwrap:only-child {
flex: 1 1 100% !important;
max-width: 100% !important;
}CSSに追記すると下記のようになります。
※ ボタンはポチップ設定で”ボタンの丸み”を丸めに設定しています。
Bluetooth テンキーボード ワイヤレス 22キー 無線 ブルートゥース 多機種対応 Tabキー付き PC/Laptopなどに対応
¥2,499 （2026/02/27 13:02時点 | Amazon調べ）
ポチップ
ボタンの幅を狭くし中央寄せ
ボタンを横幅いっぱいではなく少し小さめとかにしたい場合は黄色の上記のCSSコードの網掛け部分を下記のように変更すれば、ボタンの幅を調整できます。
flex: 0 0 80% !important;
max-width: 80% !important;
margin: 0 auto !important;ボタンの幅を80%にしていいした場合が⇩です。
プレミアムキーボードカバープロテクター 超薄型キーボードスキン M2 M3 M4 MacBook Air 15インチ・13.6インチ、2025-2021 MacBook Pro 14インチ・16インチ M5 M4 M3 M2 M1 チップ Pro/Max対応- 日本語配列
¥1,390 （2026/02/27 08:34時点 | Amazon調べ）
ポチップ
余談ですが、flex: について
grow → 1（余白があれば伸びる）→ 0（伸びない）
shrink → 1（狭ければ縮む）→ 0（縮まない）
basis → 100%（最初は100%）
だそうです。
ボタンが、2つ以上ある場合にはポチップ設定に合わせた配置となります。⇩
【革新的・極コンパクト】 SODI ノートパソコンスタンド PCスタンド 折りたたみ式 安定感 超軽量 角度調整 姿勢改善 おしゃれ laptop stand パソコン台 卓上 持ち運び 外出 自宅 10-16インチ 収納ポーチ 日本語取扱説明書
¥2,207 （2026/03/03 07:21時点 | Amazon調べ）
ポチップ
さいごに
カスタムというほどの物ではないのですが、ボタンが1つしかないときに右横にスペースが出来るのが気になったのでちょっと調整をしてみました。
コメント