本ページはプロモーションが含まれています

【簡単解説】必見!!Rinkerのショップボタンを消す方法<<全消去・一部消去>

rinker-how-to-delete-button-eye-catch WordPress
スポンサーリンク
スポンサーリンク

Rinkerの余計なショップボタンをどうやって消すかわからないって方、多いのではないでしょうか?

本記事では、「設定から消す方法」と「CSSで消す方法」の2パターンで説明しております。

特にCSSでボタンを消す方法は、以下のメリットがあります。

※Rinkerの設定でも同じことができますが、商品管理が大変になるため、「CSS」の対応をおすすめします。

「Rinkerってなに?」「CSSがわからない」って方でも簡単にできるように、図をたくさん使ってわかりやすく解説しております。

また、CSSの仕組みはわからずともコピペで対応可能ですので、気楽に見ていってください。

メルカリボタンを消す方法 (2024/7/4現在

メルカリボタンはRinkerの設定で消せず、CSSで対応する必要があります。こちらで解説しておりますので、ご活用ください。
※例はAmazonボタンで説明しているため、メルカリボタンに置き換えてお読みください。

このページでわかること
  • Rinkerってなに?
  • Rinkerの設定でボタンを消す方法
  • CSSでRinkerのボタンを消す方法

【PR】

スポンサーリンク

Rinkerについて

以下のようなリンクを見たことはないでしょうか?

created by Rinker
¥2,793 (2024/09/25 13:23:08時点 楽天市場調べ-詳細)
created by Rinker
¥2,998 (2024/09/25 13:23:09時点 楽天市場調べ-詳細)

Rinkerはこの商品リンクを簡単な操作で一発作成してくれる、超有名なWordPressプラグインです。

インストール方法や設定方法は下の公式ページに掲載されていますの、興味のある方はアクセスしてください。

便利すぎて、正直これがないと生きていけない体になりました。

スポンサーリンク

Rinkerの設定でショップボタンを消す方法

Rinkerの設定でショップボタンを消す方法は簡単ですが、カスタマイズ性は高くありません。記事別でボタンを消したい場合は、こちらのCSSでカスタマイズするほうが手っ取り早いです。

※本記事では「Amazonボタン」のみを消す設定を例に解説しています。他のボタンを消したい場合は、「楽天」や「Yahoo」などに置き換えてお読みください。

2024/7/4現在
メルカリボタンはこの設定では消えません。対処法はこちらに記載しています。
※例はAmazonボタンで説明しているため、メルカリボタンに置き換えてお読みください。

全記事の特定商品のショップボタンを消す

こちらがボタンを消す一般的な方法となります。

Rinkerでは、対応するショップの商品がない(URLがない)場合、ボタンを表示させない仕様になっています。

  • 1
    WordPress管理画面の「商品リンク」から、「編集」をクリック

    ボタンを消したい商品を選択してください。

  • 2
    消したいボタンのURLを削除する

    下にスクロールしていき、「〇〇ボタン用URL」の文字を削除してください。
    ※例はAmazonボタンを消すため、Amazonボタン用URLのみ削除しています。

  • 3
    商品リンクを更新する

    ページ右上の更新をクリックしてください。

    更新に成功すると、「投稿を更新しました。」と表示されます。

  • 4
    商品リンクを掲載している記事へアクセスする

    ページ右下の利用記事より、リンクをクリックしてください。※複数ある場合は、どれを選択しても問題ありません。

  • 5
    商品リンクのボタンが消えているか確認する

特定記事の特定商品のショップボタンを消す

この方法は商品リンクがいたずらに増えるため、おすすめしません。次に紹介するCSSでカスタマイズするほうが、スマートに対応できます。

「こういう方法もあるよ」という一例としてご紹介しますが、読み飛ばしても問題ございません。読み飛ばす方は、こちらをクリックしてください。

  • 1
    WordPress管理画面の「商品リンク」から、新規投稿を追加をクリックする
  • 2
    「商品a」と同じ内容の商品リンク、「商品a'」を作成する

    例であれば、「コカ・コーラ」の商品を作成します。

  • 3
    「商品a'」の消したいボタンのURLを削除する

    下にスクロールしていき、「〇〇ボタン用URL」の文字を削除してください。
    ※例はAmazonボタンを消すため、Amazonボタン用URLのみ削除しています。

  • 4
    「商品a'」の商品リンクを更新する

    ページ右上の更新ボタンをクリックしてください。

    更新に成功すると、「投稿を更新しました。」と表示されます。

    現在、商品リンクは以下の状態になっています。

  • 5
    記事①のみ、「商品a'」を掲載する

    記事①に商品a'を掲載することで、記事①のみ「Amazonボタン」を消えた商品リンクが掲載できます。

スポンサーリンク

CSSでRinkerのショップボタンを消す方法

CSSの設定は自由度が高く、特定記事の特定商品のボタンを消す作業が簡単です。本記事はコピペのみで対応可能なため、CSSを理解していなくても問題ございません。

全記事の全商品のショップボタンを消す

CSSコードの貼り付け先は、「カスタマイズの追加CSS」になります。

  • 1
    WordPress管理画面の「外観」から、「カスタマイズ」クリックする
  • 2
    「追加CSS」にCSSコードを貼り付ける

    消したいボタンのタブを選択し、CSSコードをコピーして追加CSSに貼り付けてください。

    • Amazon
    • 楽天
    • Yahoo
    • メルカリ
    • 全部
    • 自由URL1
    • 自由URL2
    • 自由URL3
    • 自由URL4
    /* Rinker 全商品のAmazonボタンを消す */
    .amazonlink{
    	display: none;
    }
    /* Rinker 全商品の楽天ボタンを消す */
    .rakutenlink{
    	display: none;
    }
    /* Rinker 全商品のYahooボタンを消す */
    .yahoolink{
    	display: none;
    }
    /* Rinker 全商品のメルカリボタンを消す */
    .mercarilink{
    	display: none;
    }
    /* Rinker 全商品の全ボタンを消す */
    .amazonlink, .rakutenlink, .yahoolink, .mercarilink,
     .freelink1, .freelink2, .freelink3, .freelink4{
    	display: none;
    }
    /* Rinker 全商品の自由URL1ボタンを消す */
    .freelink1{
    	display: none;
    }
    /* Rinker 全商品の自由URL2ボタンを消す */
    .freelink2{
    	display: none;
    }
    /* Rinker 全商品の自由URL3ボタンを消す */
    .freelink3{
    	display: none;
    }
    /* Rinker 全商品の自由URL4ボタンを消す */
    .freelink4{
    	display: none;
    }

    コード貼付け後、公開をクリックして保存してください。
    ※例はAmazonボタンを消すため、AmazonのCSSコードのみ貼り付けています。

  • 3
    商品リンクのボタンが消えているか確認する

全記事の特定商品のショップボタンを消す

CSSコードの貼り付け先は、「カスタマイズの追加CSS」になります。

  • 1
    WordPress管理画面の商品リンクの消したい商品のIDをメモに控える
  • 2
    「外観」から、「カスタマイズ」クリックする
  • 3
    「追加CSS」にCSSコードを貼り付ける

    消したいボタンのタブを選択し、CSSコードをコピーして追加CSSに貼り付けてください。
    ※rinkerid10600 ← ここを先程調べた商品IDに置き換えてください。

    • Amazon
    • 楽天
    • Yahoo
    • メルカリ
    • 全部
    • 自由URL1
    • 自由URL2
    • 自由URL3
    • 自由URL4
    /* Rinker 特定商品のAmazonボタンを消す */
    #rinkerid10600{ /*10600は消したい商品リンクIDに要置換*/
      .amazonlink{
    	  display: none;
      }
    }
    /* Rinker 特定商品の楽天ボタンを消す */
    #rinkerid10600{ /*10600は消したい商品リンクIDに要置換*/
      .rakutenlink{
    	  display: none;
      }
    }
    /* Rinker 特定商品のYahooボタンを消す */
    #rinkerid10600{ /*10600は消したい商品リンクIDに要置換*/
      .yahoolink{
    	  display: none;
      }
    }
    /* Rinker 特定商品のメルカリボタンを消す */
    #rinkerid10600{ /*10600は消したい商品リンクIDに要置換*/
      .mercarilink{
    	  display: none;
      }
    }
    /* Rinker 特定商品の全ボタンを消す */
    #rinkerid10600{ /*10600は消したい商品リンクIDに要置換*/
    	.amazonlink, .rakutenlink, .yahoolink, .mercarilink,
    	 .freelink1,.freelink2, .freelink3, .freelink4{
    	  display: none;
    	}
    }
    /* Rinker 特定商品の自由URL1ボタンを消す */
    #rinkerid10600{ /*10600は消したい商品リンクIDに要置換*/
      .freelink1{
    	  display: none;
      }
    }
    /* Rinker 特定商品の自由URL2ボタンを消す */
    #rinkerid10600{ /*10600は消したい商品リンクIDに要置換*/
      .freelink2{
    	  display: none;
      }
    }
    /* Rinker 特定商品の自由URL3ボタンを消す */
    #rinkerid10600{ /*10600は消したい商品リンクIDに要置換*/
      .freelink3{
    	  display: none;
      }
    }
    /* Rinker 特定商品の自由URL4ボタンを消す */
    #rinkerid10600{ /*10600は消したい商品リンクIDに要置換*/
      .freelink4{
    	  display: none;
      }
    }

    コード貼付け後、公開をクリックして保存してください。
    ※例はAmazonボタンを消すため、AmazonのCSSコードのみ貼り付けています。

  • 4
    特定の商品リンクのボタンが消えているか確認する

特定記事の全商品のショップボタンを消す

CSSコードの貼り付け先が、「カスタマイズの追加CSS」ではなく「記事内のカスタムCSS」になります。

  • 1
    WAFの設定をOFFにする

    レンタルサーバーが「ConoHa WING」の場合、図のように設定します。

    設定が正常に完了すると、図のように表示されます。

    WAF(Web Application Firewall)

    Webアプリケーションの脆弱性を狙った攻撃からWebサイトを守るためのセキュリティ対策。

    WAFの設定をOFFにしないとセキュリティが強すぎて、あとで説明する「カスタムCSS」の設定が保存できなくなります。

    ご契約されているレンタルサーバーによって設定方法が異なります。有名なレンタルサーバーの公式WAFページのリンク先をまとめましたので、ご参考にしてください。

    レンタルサーバー名 WAF
    (公式サイトの説明ページ)
    ConoHa Wing  
    エックスサーバー  
    シンレンタルサーバー  
    さくらのレンタルサーバ

     

  • 2
    WordPress管理画面の投稿から、商品リンクボタンを消したい記事にアクセス
  • 3
    一番下にスクロールしていき、カスタムCSSにコードを貼り付ける

    消したいボタンのタブを選択し、CSSコードをコピーしてカスタムCSSに貼り付けてください。

    • Amazon
    • 楽天
    • Yahoo
    • メルカリ
    • 全部
    • 自由URL1
    • 自由URL2
    • 自由URL3
    • 自由URL4
    /* Rinker 全商品のAmazonボタンを消す */
    .amazonlink{
    	display: none;
    }
    /* Rinker 全商品の楽天ボタンを消す */
    .rakutenlink{
    	display: none;
    }
    /* Rinker 全商品のYahooボタンを消す */
    .yahoolink{
    	display: none;
    }
    /* Rinker 全商品のメルカリボタンを消す */
    .mercarilink{
    	display: none;
    }
    /* Rinker 全商品の全ボタンを消す */
    .amazonlink, .rakutenlink, .yahoolink, .mercarilink,
     .freelink1, .freelink2, .freelink3, .freelink4{
    	display: none;
    }
    /* Rinker 全商品の自由URL1ボタンを消す */
    .freelink1{
    	display: none;
    }
    /* Rinker 全商品の自由URL2ボタンを消す */
    .freelink2{
    	display: none;
    }
    /* Rinker 全商品の自由URL3ボタンを消す */
    .freelink3{
    	display: none;
    }
    /* Rinker 全商品の自由URL4ボタンを消す */
    .freelink4{
    	display: none;
    }

    コード貼付け後、「下書き保存」か更新をクリックして保存してください。
    ※例はAmazonボタンを消すため、AmazonのCSSコードのみ貼り付けています。

  • 4
    特定記事のみ、商品リンクボタンが消えているか確認する
  • 5
    WAF設定をONにする

    WAFがOFFのままだとセキュリティが弱いため、忘れずにONにします。

    設定が正常に完了すると、図のように表示されます。

特定記事の特定商品のショップボタンを消す

CSSコードの貼り付け先が、「カスタマイズの追加CSS」ではなく「記事内のカスタムCSS」になります。

  • 1
    WAFの設定をOFFにする

    レンタルサーバーが「ConoHa WING」の場合、図のように設定します。

    設定が正常に完了すると、図のように表示されます。

    WAF(Web Application Firewall)

    Webアプリケーションの脆弱性を狙った攻撃からWebサイトを守るためのセキュリティ対策。

    WAFの設定をOFFにしないとセキュリティが強すぎて、あとで説明する「カスタムCSS」の設定が保存できなくなります。

    ご契約されているレンタルサーバーによって設定方法が異なります。有名なレンタルサーバーの公式WAFページのリンク先をまとめましたので、ご参考にしてください。

    レンタルサーバー名 WAF
    (公式サイトの説明ページ)
    ConoHa Wing  
    エックスサーバー  
    シンレンタルサーバー  
    さくらのレンタルサーバ

     

  • 2
    WordPress管理画面の投稿から、商品リンクボタンを消したい記事にアクセス
  • 3
    一番下にスクロールしていき、カスタムCSSにコードを貼り付ける

    消したいボタンのタブを選択し、CSSコードをコピーしてカスタムCSSに貼り付けてください。
    ※rinkerid10600 ← ここを先程調べた商品IDに置き換えてください。

    • Amazon
    • 楽天
    • Yahoo
    • メルカリ
    • 全部
    • 自由URL1
    • 自由URL2
    • 自由URL3
    • 自由URL4
    /* Rinker 特定商品のAmazonボタンを消す */
    #rinkerid10600{ /*10600は消したい商品リンクIDに要置換*/
      .amazonlink{
    	  display: none;
      }
    }
    /* Rinker 特定商品の楽天ボタンを消す */
    #rinkerid10600{ /*10600は消したい商品リンクIDに要置換*/
      .rakutenlink{
    	  display: none;
      }
    }
    /* Rinker 特定商品のYahooボタンを消す */
    #rinkerid10600{ /*10600は消したい商品リンクIDに要置換*/
      .yahoolink{
    	  display: none;
      }
    }
    /* Rinker 特定商品のメルカリボタンを消す */
    #rinkerid10600{ /*10600は消したい商品リンクIDに要置換*/
      .mercarilink{
    	  display: none;
      }
    }
    /* Rinker 特定商品の全ボタンを消す */
    #rinkerid10600{ /*10600は消したい商品リンクIDに要置換*/
    	.amazonlink, .rakutenlink, .yahoolink, .mercarilink,
    	 .freelink1,.freelink2, .freelink3, .freelink4{
    	  display: none;
    	}
    }
    /* Rinker 特定商品の自由URL1ボタンを消す */
    #rinkerid10600{ /*10600は消したい商品リンクIDに要置換*/
      .freelink1{
    	  display: none;
      }
    }
    /* Rinker 特定商品の自由URL2ボタンを消す */
    #rinkerid10600{ /*10600は消したい商品リンクIDに要置換*/
      .freelink2{
    	  display: none;
      }
    }
    /* Rinker 特定商品の自由URL3ボタンを消す */
    #rinkerid10600{ /*10600は消したい商品リンクIDに要置換*/
      .freelink3{
    	  display: none;
      }
    }
    /* Rinker 特定商品の自由URL4ボタンを消す */
    #rinkerid10600{ /*10600は消したい商品リンクIDに要置換*/
      .freelink4{
    	  display: none;
      }
    }

    コード貼付け後、「下書き保存」か更新をクリックして保存してください。
    ※例はAmazonボタンを消すため、AmazonのCSSコードのみ貼り付けています。

  • 4
    特定記事のみ、商品リンクボタンが消えているか確認する
  • 5
    WAF設定をONにする

    WAFがOFFのままだとセキュリティが弱いため、忘れずにONにします。

    設定が正常に完了すると、図のように表示されます。

【PR】

スポンサーリンク

まとめ

ここまで読んで頂き、ありがとうございます。

いかがでしたでしょうか。

今回はRinkerのショップボタンをCSSで削除する方法が、あまりネットになかったため記事にしました。

少しでも皆さんのお役にたてればうれしいです。

不明な点がございましたら、気軽にお問合せフォームよりご連絡をお願いします。できる限りサポートさせて頂きます。

それではまた会いましょう!

コメント

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