ブログで物販する際に商品リンクを作成できる便利ツール。
当サイトでも導入しました。
ポチップ今回はこの商品リンクのボタンの並び順を変えるカスタマイズについてご紹介します。
具体的にはAmazonを先頭にするよ
- ブログが好きな40代主婦
- CocoonサイトをCSSでフルカスタマイズ
- JavaScriptを勉強中
- ドメインパワー30
- ワードプレスで３サイトを運営しています
です
ポチップデフォルトの並び順
ポチップをインストールして三大通販サイトであるAmazon、楽天、Yahoo!ショッピングを設定するとボタンの並び順はこのようになっています。
- Amazon
- 楽天
- Yahoo!ショッピング
ポチップにセール情報を入れると優先される
しかし楽天お買い物マラソン開催中に確認すると楽天が先頭にきてしまいました。
セール情報があるリンクが優先されるんだね
うーん、セール情報優先は分かるけど個人的にAmazonは先頭のまま並び順は変えたくない。何とかできないかな？
ポチップのボタン並び順にはCSSのプロパティFlexが使われている
ここで参考にさせていただいたのが、最近ご縁がありTwitterで繋がったクロード鰥夫（ヤモヲ）さんの記事です。
セール情報が設定された基本ボタンには
order：-1が定義された-on-saleクラスが付与されていますので、自動的に先頭になるような仕様になっています。「セール情報」表示中のボタンは「-1」となるので、それよりも小さい数値を指定すれば、常に先頭に配置されます。
引用元：ポチップTIPS – 自己満足カスタマイズ 小ネタ集（あったらいいな編）
ポチップの商品リンクの並び順にはCSSのプロパティdisplay: flexが使われています。
CSSで使われる、スタイルを指定するプロパティのひとつ。
「display:flex」と定義するだけで要素を横並びにすることができ、並び順も細かく設定することが可能です。
ふむふむ、セール情報よりAmazonリンクに小さい数値を指定すればCSSでいけそうね！
ポチップでAmazonを先頭にするにはCSSを追加
CSSにコードをひとつ追加するだけ。
Amazonのボタンには -amazon クラスが付いているので-1より小さな値のorder: -2; を指定。
/*Amazonを先頭にする*/
.pochipp-box__btnwrap.-amazon{
order: -2;
}すると楽天にセール情報を表示していてもAmazonが先頭になり、無事に反映されました！（パチパチ）
ポチップのカスタムボタンを先頭にするには
さらにカスカムボタンを配置し先頭にしたいこともありますよね。
公式サイトなど料率が高いリンクをカスタムボタンに設定して目立たせたい
- カスタムボタン
- Amazon
- 楽天 または Yahoo!ショッピング
/*カスタムボタンを先頭にする*/
.pochipp-box__btnwrap.-custom {
order: -3;
}同様に、セレクタ部分のクラス名を変更しorderで調整することによって楽天やYahoo!ショッピングの並び順もお好みで変更することができます。固定させたいときに便利ですね。
ポチップのカスタマイズをご紹介しています
この記事ではポチップのボタンの並び順をAmazon先頭にする方法をご紹介しました。
他にも当ブログではポチップでできることをご紹介していますのでぜひご覧になってください！
Comment