Rinkerを使う際に特定のショッピングサイトのボタンのみ表示する方法

Amazon、楽天、Yahooの商品リンクを簡単に記事に挿入できるプラグイン「Rinker」を使っている際に、記事ごとに表示するボタンをAmzonだけとかにしたいときの方法について覚書。

スポンサーリンク

必要なプラグイン

表示したくないボタンをCSSでコントロールするので、まずは記事ごとにCSSを設定できるプラグインをインストールする必要があります。

その手のプラグインはいくつかありますが、とりあえず私は「Simple CSS」を使っています。

Simple CSS
Add CSS to your website through an admin editor, the Customizer or a metabox for page/post specific CSS.

「Simple CSS」でなくても構いません。

「Simple CSS」をインストールして有効化すると、記事の編集画面に以下のような「Simple CSS」という新しいボックスが表示されるようになるので、ここにCSSを記載します。

「Simple CSS」ボックスに記載したCSSは、その記事だけで有効になります。

ボタンを非表示にするCSS

ボタンを非表示にするCSSですが、「しょたすてーしょんさん」のサイトに詳細が記載されています。

Rinkerの特定のサイトリンクだけをCSSで非表示にする方法
特定のサイトのセール情報を&#3492 ...

詳細はそちらを見ていただければよいかと。

ただ、「しょたすてーしょんさん」の記事がなくなったりしたら困るので、控えで記載しておきます。

あくまで元は「しょたすてーしょんさん」の記事です。

以下に記載した非表示にしたいボタンのCSSを「Simple CSS」ボックスに記載すればOKです。

Amazonボタンを非表示

div.yyi-rinker-contents div.yyi-rinker-box ul.yyi-rinker-links li.amazonlink{
    display: none;
}

楽天ボタンを非表示

div.yyi-rinker-contents div.yyi-rinker-box ul.yyi-rinker-links li.rakutenlink{
    display: none;
}

Yahooショッピングボタンを非表示

div.yyi-rinker-contents div.yyi-rinker-box ul.yyi-rinker-links li.yahoolink{
    display: none;
}

補足

一つの記事にRinkerで複数の商品リンクを貼っていたとして、そのそれぞれの商品リンクに表示するボタンの表示/非表示をコントロールすることはできないです。

例えば、Amazonボタンだけを表示するようにした場合、他の商品リンクも全部Amazonボタンだけになってしまいます。

コメント

タイトルとURLをコピーしました