ポチップカスタマイズ／インラインボタンの色個別設定、リンクの並び替えなど

Pochipp（以下、ポチップ）は商品リンクを作成できるプラグイン。

この記事では、ポチップを導入して見た目にこだわりがある向けに、外観デザイン（ボタン、背景）、リンクボタンの並び順といった少し細かい部分についてご紹介します。

便利機能が充実していてとても便利ですが、使っているうちに「ここをこうしたいな」と思うことはないでしょうか。この記事のカスタマイズをおこなうと外観が整うほか、アピールしたいボタンを先頭にすることによりクリック率（売上）アップが期待できます。

ひとつずつ解説しますのでご覧ください。

ポチップのデザインを整えるカスタマイズ

まず、ポチップのデザインを整える外観カスタマイズについてご紹介します。

ポチップのリンクボタンの色を変える（管理画面で設定）

まずはじめにリンクボタンの色を変える方法をご紹介。

Pochipp（ポチップ）のリンクボタンの色は管理画面→ポチップ設定→各ボタンの色で誰でも簡単に変更できます。

色の変更方法は２通り

• #に続く6桁のカラーコードを入力する
• カラーピッカーを動かして選ぶ

ポチップの商品リンクの背景色、影を調整（CSS使用）

1. ポチップまわりを囲っている薄い影があるので消します
2. 記事とポチップの背景色を合わせます

ポチップのデフォルトの背景色が白（カラーコード#ffffff）になっているので、記事部分の背景色を白以外に設定しているサイト向け。

CSS（コピペOK）

/*ポチップ*/
.pochipp-box {
	background-color: initial!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);
}

/*メルカリ*/
.pochipp-box[data-btn-style=dflt] .-mercari>.pochipp-box__btn:hover {
	background-color: #fff;
	color:var(--pchpp-color-mercari)!important;
	border-color:var(--pchpp-color-mercari);
}

リンクボタンの内側と外側の影が気になる場合はこちらも追加してください。

/*影を消す*/
.pochipp-box[data-btn-style=dflt] .pochipp-box__btn::before {
	background:none!important;
}

.pochipp-box[data-btn-style=dflt] .pochipp-box__btn {
	box-shadow:none!important;
}

CSSの補足

コピペで反映するはずですが、補足を書いておきます。

ポチップのインラインボタンの色を個別に設定する

ポチップでは通常の商品リンクの他に、インラインボタンを置くことも簡単ですね。

表などに便利！ポチップではインライン機能が使える

インラインボタンは、すべて同じ色で統一されます。

これを、例えば次の図のように、Amazon、楽天、Yahooのインラインボタンを並べたときに、それぞれ個別に色を変えたいという場合。

こちらも同様にCSSで可能です！

子テーマのスタイルシートにコピペしてくださいね。

/* ポチップ／インラインボタン色個別設定----------------------------------------------*/

.-amazon.pochipp-inline__btnwrap>.pochipp-inline__btn{
	 background-color:var(--pchpp-color-amazon)!important;
}

.-rakuten.pochipp-inline__btnwrap>.pochipp-inline__btn{
	background-color:var(--pchpp-color-rakuten)!important;
}

.-yahoo.pochipp-inline__btnwrap>.pochipp-inline__btn{
	background-color:var(--pchpp-color-yahoo)!important;
}

CSS カスタムプロパティ（変数）を使っているため、ポチップ設定で指定した色が自動的に反映されます。

ポチップのリンクボタンを並び替える方法

次にリンクボタンを並び替える方法についてご紹介します。

ポチップのリンクボタンの並び順の仕組み

まず、ポチップ（プラグイン）をインストールして三大通販サイトであるAmazon、楽天、Yahoo!ショッピングを設定すると、ボタンの並び順はこのようになっています。

ポチップにセール情報を入れると優先される

しかし、楽天お買い物マラソン開催中に確認すると楽天が先頭にきてしまいました。

ポチップのボタン並び順にはCSSのプロパティFlexが使われている

ポチップの商品リンクの並び順にはCSSのプロパティdisplay: flexが使われています。

ここで参考にさせていただいたのが、最近ご縁がありX（Twitter）で繋がったクロード鰥夫（ヤモヲ）さんの記事。

セール情報が設定された基本ボタンにはorder：-1が定義された-on-saleクラスが付与されていますので、自動的に先頭になるような仕様になっています。

「セール情報」表示中のボタンは「-1」となるので、それよりも小さい数値を指定すれば、常に先頭に配置されます。

引用元：ポチップTIPS – 自己満足カスタマイズ 小ネタ集（あったらいいな編）

つまりポチップのCSSはこのようになっています。

/*ボタンを横並びにする*/
.pochipp-box .pochipp-box__btns {
	display: flex;
	flex-wrap: wrap;
}

/*セール時に優先させる*/
.pochipp-box__btnwrap.-on-sale {
	order: -1;
}

並び順を変更するにはCSSを追加します

リンクボタンの並び順を変えるにはCSSにコードをひとつ追加するだけ。

管理画面の「外観」から「テーマファイルエディター」をクリック。｢スタイルシート (style.css)｣のページが開くので元から書いているコード（テーマ情報）は消さずにCSSを記述します。

ポチップのAmazonを先頭にするには

Amazonのボタンには -amazon クラスが付いているので、セール時に付与されるorder: -1より小さな値のorder: -2 を指定します。

/*ポチップのAmazonを先頭にする*/
.pochipp-box__btnwrap.-amazon{
	order: -2;
}

すると、楽天にセール情報を表示していてもAmazonが先頭になり無事に反映されます！（パチパチ）

ポチップのカスタムボタンを先頭にするには

Amazonを先頭にして、さらに自作したカスカムボタンを配置し先頭にしたいことがあるのではないでしょうか。

1. カスタムボタン
2. Amazon
3. 楽天　または　Yahoo!ショッピング

/*ポチップのカスタムボタンを先頭にする*/
.pochipp-box__btnwrap.-custom {
	order: -3;
}

ポチップの楽天ボタンを先頭にするには

同様に、orderで調整することで楽天の並び順も変更できます。

/*ポチップの楽天ボタンを先頭にする*/
.pochipp-box__btnwrap.-rakuten{
	order: -2;
}

ポチップのYahoo!ショッピングボタンを先頭にするには

同様に、セレクタ部分のクラス名を変更しorderで調整することによってYahoo!ショッピングの並び順もお好みで変更できます。

/*ポチップのYahoo!ショッピングボタンを先頭にする*/
.pochipp-box__btnwrap.-yahoo{
	order: -2;
}

セール情報の他に強調したいボタンを先頭にすることで、クリックしてもらう可能性をアップさせることができます。

使いたいときにCSSを追加し、並び順を元に戻したいときは追加したコードを削除すれば元に戻ります。

まとめ／ポチップを使いこなそう

以上について解説しました。

標準設定にない細かい部分でも自分でカスタマイズできることがありますので、上手にポチップを使いこなしてブログを運営していきましょう！

当サイトでは他にもポチップの設定や機能について紹介していますのでご覧ください。

ポチップの設定、インストール方法はこちら。

ポチップの使い方を知りたいときはこちら。

また、売上アップの工夫満載 Pochipp Proについて、機能、インストール、設定方法をより詳しくこちらの記事で解説しているのでご覧ください。