MENU
Amazon情報やゲーミングデバイスについてのレビューサイト
Amazonのキャンペーン一覧まとめ
  1. ホーム
  2. ブログ運営
  3. 商品リンク『Rinker』のCSSカスタマイズ【2選】

商品リンク『Rinker』のCSSカスタマイズ【2選】

PR
ブログ運営
WordPress ブログ関連
商品リンク『Rinker』のCSSカスタマイズ【2選】

こんにちは！ CSSカスタマイズを勉強中のネイネイです。

先日導入した、WordPressの商品リンク管理プラグイン「Rinker(リンカー)」のデザインを変更してみましたので、その内容をご紹介いたします。

CSSコードをコピペしていただければ、完了できるようになっております。

 

「Rinker(リンカー)」は、Amazon・楽天。Yahooショッピングの商品リンクをショートコードで簡単に素早く作成できるとても便利なプラグインです。

 

ちなみに、Rinker(リンカー)をまだ導入されていない方は、下記で紹介している記事をご覧ください。

あわせて読みたい
Rinkerの導入法と使い方を解説【もしもアフィリエイト編】

 

目次（タップできます）
記事内のリンクには広告が含まれる場合があります。

 

カスタマイズの内容

変更前のデザイン
変更前のデザイン

上記が、Rinker(リンカー)の変更前のデザイン画像になります。こちらをカスタマイズしていきます。

カスタマイズのデザインは２種類ありますので、そちらを確認いただいてお好みのデザインを１つ選んでください。

 

変更後のデザイン

デザインは、「おすすめデザイン」と「超シンプル デザイン」の２種類になります。

下記の画像が、その変更後の内容になります。

「おすすめデザイン」
おすすめデザイン
「超シンプル デザイン」
超シンプル デザイン

「おすすめ デザイン」は、パット見た目には変更前の内容に近いですが、マウスをボタンの上に乗せると背景がシンプルなデザインに変化します。

「超シンプル デザイン」は、おすすめデザインとは逆の内容で、見た目がシンプルで、マウスをボタンの上に乗せると背景が色づくデザインになっています。

 

Rinker(リンカー)のデザインをカスタマイズ

先ほど説明したデザインをCSSファイルにコピペしていきます。 CSSファイルへのコピペは下記のどちらか、お好みな方で編集ください。

  1. 子テーマの「style.css」を編集する。(外観/テーマ編集から変更できます)
  2. 追加CSSを編集する。(外観/CSS編集から変更できます)

 

それでは、準備が整いましたら下記の「おすすめ デザイン」もしくは、「超シンプル デザイン」のどちらか１つのCSSコードを選び、CSSファイルにコピペしてください。

 

おすすめ デザイン

スマホ表示時に「横デザイン」と「縦デザイン」がありますので、どちらか１つを選択してCSSコードをコピーしてください。

スマホ時「横デザイン」

「おすすめデザイン」スマホ横デザイン（PC）
PC表示　デザイン
「おすすめデザイン」スマホ横デザイン（スマホ）
スマホ表示　デザイン
スマホ時「横デザイン」のコードを表示
/* ------------------------------------- */
/*          Rinker カスタマイズ          */
/* ------------------------------------- */

/* --------- 外枠 --------- */
div.yyi-rinker-contents {
    /*border: solid 1px #dbdbdb;*/ /* １重線 */
    border:double #CCC; /* ２重線 */
}

/* ------- 画像 ------- */
div.yyi-rinker-contents div.yyi-rinker-image {
    width: 30%;
}

/* ------- 商品情報 全体 ------- */
div.yyi-rinker-contents div.yyi-rinker-box div.yyi-rinker-info {
    margin-top: 0; /* 上の余白 */
}

/* --- 商品リンク タイトル --- */
div.yyi-rinker-contents div.yyi-rinker-title a {
    color: #3296d2; /* 文字色 */
}

/* --- クレジット＆価格 --- */
div.yyi-rinker-contents div.yyi-rinker-detail {
    margin-top: 0; /* 上の余白 */
}

/* ------- クレジット ------- */
div.yyi-rinker-contents div.yyi-rinker-detail .credit {
    margin-bottom: 5px; /* 下スペース */
    color: #999; /* 文字色 */
}
div.yyi-rinker-contents div.yyi-rinker-detail .credit a{
    /*text-decoration: none;*/ /* リンクの下線 */
    color: #2581B3; /* リンクの文字色 */
}

/* ------- ブランド ------- */
div.yyi-rinker-contents div.yyi-rinker-detail .brand {
    margin-top: 0; /* 上の余白 */
}

/* ------- 商品価格 ------- */
div.yyi-rinker-contents div.yyi-rinker-detail .price-box {
    margin: 5px 0; /* 上下の余白 */
    color: #aaa; /* 文字色 */
}


/* --------- ボタン基本スタイル --------- */
div.yyi-rinker-contents ul.yyi-rinker-links li a {
    border-radius: 2px; /* ボタン 角の丸み */
    text-align: center;
    min-width:127px; /* ボタンの最小幅 */
    font-size: 0.9em;
    color: #fff; /* 文字色 */
}
div.yyi-rinker-contents ul.yyi-rinker-links li {
    margin: 5px;
    border-radius: 5px; /* ボタン外枠 角の丸み */
}

/* --------- ボタン色 --------- */
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonkindlelink { /* kindle */
    background: #666; /* 背景色 */
    border: 2px solid #666; /* 外枠 */
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink { /* Amazon */
    background: #f6a306; /* 背景色 */
    border: 2px solid #f6a306; /* 外枠 */
}
div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink { /* 楽天 */
    background: #cf4944; /* 背景色 */
    border: 2px solid #cf4944; /* 外枠 */
}
div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink { /* Yahoo */
    background: #51a7e8; /* 背景色 */
    border: 2px solid #51a7e8; /* 外枠 */
}
div.yyi-rinker-contents ul.yyi-rinker-links li.freelink1 { /* freelink1 */
    background: #4072b3; /* 背景色 */
    border: 2px solid #4072b3; /* 外枠 */
}
div.yyi-rinker-contents ul.yyi-rinker-links li.freelink2 { /* freelink2 */
    background: #4dc0b2; /* 背景色 */
    border: 2px solid #4dc0b2; /* 外枠 */
}

/* --- マウスオーバー時のボタン色 --- */
div.yyi-rinker-contents ul.yyi-rinker-links li a:hover {
    background: #fff; /* 背景色 */
    opacity: 1; /* 透明度(1.0=不透明 0.0=完全透明) */
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonkindlelink a:hover { /* kindle */
    color: #666; /* 文字色 */
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink a:hover { /* Amazon */
    color: #f6a306; /* 文字色 */
}
div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink a:hover { /* 楽天 */
    color: #cf4944; /* 文字色 */
}
div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink a:hover { /* Yahoo */
    color: #51a7e8; /* 文字色 */
}
div.yyi-rinker-contents ul.yyi-rinker-links li.freelink1 a:hover { /* freelink1 */
    color: #4072b3; /* 文字色 */
}
div.yyi-rinker-contents ul.yyi-rinker-links li.freelink2 a:hover { /* freelink2 */
    color: #4dc0b2; /* 文字色 */
}

/* --------- 外部リンク マーク削除 --------- */
div.yyi-rinker-contents div.yyi-rinker-title a[target="_blank"]::after{ /* 商品リンク タイトル */
    content: none;
}

div.yyi-rinker-contents div.yyi-rinker-detail .credit a[target="_blank"]::after{ /* クレジット */
    content: none;
}

div.yyi-rinker-contents ul.yyi-rinker-links li a[target="_blank"]::after{/* ボタン */
    content: none;
}

/* --------- レスポンシブ用 --------- */
@media screen and (max-width: 768px) { /* 画面幅768px以下の時 */
/* --- 商品リンク タイトル --- */
div.yyi-rinker-contents div.yyi-rinker-title a {
    font-weight: bold; /* 太字 */
}
/* --------- ボタン基本スタイル --------- */
div.yyi-rinker-contents ul.yyi-rinker-links li a {
    font-size: 0.8em;
}
}

@media screen and (max-width: 480px) { /* 画面幅480px以下の時 */
/* --- 商品リンク タイトル --- */
div.yyi-rinker-contents div.yyi-rinker-title a {
    font-weight: bold; /* 太字 */
    font-size: 1.05em;
}
/* --------- ボタン基本スタイル --------- */
div.yyi-rinker-contents ul.yyi-rinker-links li a {
    padding-left: 3.5px !important; /* ボタン文字 位置調整 */
    font-size: 0.8em;
}
}

 

スマホ時「縦デザイン」

「おすすめデザイン」スマホ縦デザイン（PC）
PC表示　デザイン
「おすすめデザイン」スマホ縦デザイン（スマホ）
スマホ表示　デザイン
スマホ時「縦デザイン」のコードを表示
/* ------------------------------------- */
/*          Rinker カスタマイズ          */
/* ------------------------------------- */

/* --------- 外枠 --------- */
div.yyi-rinker-contents {
    /*border: solid 1px #dbdbdb;*/ /* １重線 */
    border:double #CCC; /* ２重線 */
}

/* ------- 画像 ------- */
div.yyi-rinker-contents div.yyi-rinker-image {
    width: 30%;
}

/* ------- 商品情報 全体 ------- */
div.yyi-rinker-contents div.yyi-rinker-box div.yyi-rinker-info {
    margin-top: 0; /* 上の余白 */
}

/* --- 商品リンク タイトル --- */
div.yyi-rinker-contents div.yyi-rinker-title a {
    color: #3296d2; /* 文字色 */
}

/* --- クレジット＆価格 --- */
div.yyi-rinker-contents div.yyi-rinker-detail {
    margin-top: 0; /* 上の余白 */
}

/* ------- クレジット ------- */
div.yyi-rinker-contents div.yyi-rinker-detail .credit {
    margin-bottom: 5px; /* 下スペース */
    color: #999; /* 文字色 */
}
div.yyi-rinker-contents div.yyi-rinker-detail .credit a{
    /*text-decoration: none;*/ /* リンクの下線 */
    color: #2581B3; /* リンクの文字色 */
}

/* ------- ブランド ------- */
div.yyi-rinker-contents div.yyi-rinker-detail .brand {
    margin-top: 0; /* 上の余白 */
}

/* ------- 商品価格 ------- */
div.yyi-rinker-contents div.yyi-rinker-detail .price-box {
    margin: 5px 0; /* 上下の余白 */
    color: #aaa; /* 文字色 */
}


/* --------- ボタン基本スタイル --------- */
div.yyi-rinker-contents ul.yyi-rinker-links li a {
    border-radius: 2px; /* ボタン 角の丸み */
    text-align: center;
    min-width:127px; /* ボタンの最小幅 */
    font-size: 0.9em;
    color: #fff; /* 文字色 */
}
div.yyi-rinker-contents ul.yyi-rinker-links li {
    margin: 5px;
    border-radius: 5px; /* ボタン外枠 角の丸み */
}

/* --------- ボタン色 --------- */
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonkindlelink { /* kindle */
    background: #666; /* 背景色 */
    border: 2px solid #666; /* 外枠 */
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink { /* Amazon */
    background: #f6a306; /* 背景色 */
    border: 2px solid #f6a306; /* 外枠 */
}
div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink { /* 楽天 */
    background: #cf4944; /* 背景色 */
    border: 2px solid #cf4944; /* 外枠 */
}
div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink { /* Yahoo */
    background: #51a7e8; /* 背景色 */
    border: 2px solid #51a7e8; /* 外枠 */
}
div.yyi-rinker-contents ul.yyi-rinker-links li.freelink1 { /* freelink1 */
    background: #4dc0b2; /* 背景色 */
    border: 2px solid #4dc0b2; /* 外枠 */
}
div.yyi-rinker-contents ul.yyi-rinker-links li.freelink2 { /* freelink2 */
    background: #4dc0b2; /* 背景色 */
    border: 2px solid #4dc0b2; /* 外枠 */
}

/* --- マウスオーバー時のボタン色 --- */
div.yyi-rinker-contents ul.yyi-rinker-links li a:hover {
    background: #fff; /* 背景色 */
    opacity: 1; /* 透明度(1.0=不透明 0.0=完全透明) */
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonkindlelink a:hover { /* kindle */
    color: #666; /* 文字色 */
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink a:hover { /* Amazon文字色 */
    color: #f6a306;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink a:hover { /* 楽天文字色 */
    color: #cf4944;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink a:hover { /* Yahoo文字色 */
    color: #51a7e8;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.freelink1 a:hover { /* freelink1 */
    color: #4dc0b2;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.freelink2 a:hover { /* freelink2 */
    color: #4dc0b2;
}

/* --------- 外部リンク マーク削除 --------- */
div.yyi-rinker-contents div.yyi-rinker-title a[target="_blank"]::after{ /* 商品リンク タイトル */
    content: none;
}

div.yyi-rinker-contents div.yyi-rinker-detail .credit a[target="_blank"]::after{ /* クレジット */
    content: none;
}

div.yyi-rinker-contents ul.yyi-rinker-links li a[target="_blank"]::after{/* ボタン */
    content: none;
}

/* --------- レスポンシブ用 --------- */
@media screen and (max-width: 768px) { /* 画面幅768px以下の時 */
/* --- 商品リンク タイトル --- */
div.yyi-rinker-contents div.yyi-rinker-title a {
    font-weight: bold; /* 太字 */
}
/* --------- ボタン基本スタイル --------- */
div.yyi-rinker-contents ul.yyi-rinker-links li a {
    font-size: 0.8em;
}
}

@media screen and (max-width: 480px) { /* 画面幅480px以下の時 */
/* --------- 全体 --------- */
div.yyi-rinker-contents div.yyi-rinker-box {
    display: block; /* 縦表示に */
}

/* ------- 画像 ------- */
div.yyi-rinker-contents div.yyi-rinker-image {
    width: auto; /* 画像を中央寄せ */
}

/* ------- 商品情報 全体 ------- */
div.yyi-rinker-contents div.yyi-rinker-box div.yyi-rinker-info {
    margin: auto;   /* 中央寄せ */
    width: calc(100% - 10px); /* 横幅 */
    text-align: center;  /* テキスト中央寄せ */
}

/* --- 商品リンク タイトル --- */
div.yyi-rinker-contents div.yyi-rinker-title a {
    font-weight: bold; /* 太字 */
    font-size: 1.05em;
}

/* --------- ボタン基本スタイル --------- */
div.yyi-rinker-contents ul.yyi-rinker-links li {
    width: 100%;/* 横幅 */
    margin: .5em 0; /* 上下の余白 */
}
div.yyi-rinker-contents ul.yyi-rinker-links li a {
    padding-left: 3.5px !important; /* ボタン文字 位置調整 */
    font-size: 0.8em;
}
}

 

超シンプル デザイン

スマホ表示時に「横デザイン」と「縦デザイン」がありますので、どちらか１つを選択してCSSコードをコピーしてください。

スマホ時「横デザイン」

「超シンプルデザイン」スマホ横デザイン（PC）
PC表示　デザイン
「超シンプルデザイン」スマホ横デザイン（スマホ）
スマホ表示　デザイン
スマホ時「横デザイン」のコードを表示
/* ------------------------------------- */
/*          Rinker カスタマイズ          */
/* ------------------------------------- */

/* --------- 外枠 --------- */
div.yyi-rinker-contents {
    /*border: solid 1px #dbdbdb;*/ /* 1重線 */
    border:double #CCC; /* ２重線 */
}

/* ------- 画像 ------- */
div.yyi-rinker-contents div.yyi-rinker-image {
    width: 30%;
}

/* ------- 商品情報 全体 ------- */
div.yyi-rinker-contents div.yyi-rinker-box div.yyi-rinker-info {
    margin-top: 0; /* 上の余白 */
}

/* --- 商品リンク タイトル --- */
div.yyi-rinker-contents div.yyi-rinker-title a {
    color: #3296d2; /* 文字色 */
}

/* --- クレジット＆価格 --- */
div.yyi-rinker-contents div.yyi-rinker-detail {
    margin-top: 0; /* 上の余白 */
}

/* ------- クレジット ------- */
div.yyi-rinker-contents div.yyi-rinker-detail .credit {
    margin-bottom: 5px; /* 下スペース */
    color: #999; /* 文字色 */
}
div.yyi-rinker-contents div.yyi-rinker-detail .credit a{
    /*text-decoration: none;*/ /* リンクの下線 */
    color: #2581B3; /* リンクの文字色 */
}

/* ------- ブランド ------- */
div.yyi-rinker-contents div.yyi-rinker-detail .brand {
    margin-top: 0; /* 上の余白 */
}

/* ------- 商品価格 ------- */
div.yyi-rinker-contents div.yyi-rinker-detail .price-box {
    margin: 5px 0; /* 上下の余白 */
    color: #aaa; /* 文字色 */
}


/* --------- ボタン基本スタイル --------- */
div.yyi-rinker-contents ul.yyi-rinker-links li a {
    border-radius: 2px; /* ボタン 角の丸み */
    text-align: center;
    min-width:127px; /* ボタンの最小幅 */
    font-size: 0.9em;
}
div.yyi-rinker-contents ul.yyi-rinker-links li {
    margin: 5px;
    border-radius: 5px; /* ボタン外枠 角の丸み */
}

/* --------- ボタン色 --------- */
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonkindlelink { /* kindle */
    background: #fff; /* 背景色 */
    border: 2px solid #666; /* 外枠 */
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink { /* Amazon */
    background: #fff; /* 背景色 */
    border: 2px solid #f6a306; /* 外枠 */
}
div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink { /* 楽天 */
    background: #fff; /* 背景色 */
    border: 2px solid #cf4944; /* 外枠 */
}
div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink { /* Yahoo */
    background: #fff; /* 背景色 */
    border: 2px solid #51a7e8; /* 外枠 */
}
div.yyi-rinker-contents ul.yyi-rinker-links li.freelink1 { /* freelink1 */
    background: #fff; /* 背景色 */
    border: 2px solid #4072b3; /* 外枠 */
}
div.yyi-rinker-contents ul.yyi-rinker-links li.freelink2 { /* freelink2 */
    background: #fff; /* 背景色 */
    border: 2px solid #4dc0b2; /* 外枠 */
}

div.yyi-rinker-contents ul.yyi-rinker-links li.amazonkindlelink a{ /* kindle */
    color: #666; /* 文字色 */
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink a{ /* Amazon */
    color: #f6a306; /* 文字色 */
}
div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink a{ /* 楽天 */
    color: #cf4944; /* 文字色 */
}
div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink a{ /* Yahoo */
    color: #51a7e8; /* 文字色 */
}
div.yyi-rinker-contents ul.yyi-rinker-links li.freelink1 a{ /* freelink1 */
    color: #4072b3; /* 文字色 */
}
div.yyi-rinker-contents ul.yyi-rinker-links li.freelink2 a{ /* freelink2 */
    color: #4dc0b2; /* 文字色 */
}

/* --- マウスオーバー時のボタン色 --- */
div.yyi-rinker-contents ul.yyi-rinker-links li a:hover {
    opacity: 1; /* 透明度(1.0=不透明 0.0=完全透明) */
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonkindlelink a:hover { /* kindle */
    background: #666; /* 背景色 */
    color: #fff; /* 文字色 */
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink a:hover { /* Amazon */
    background: #f6a306; /* 背景色 */
    color: #fff; /* 文字色 */
}
div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink a:hover { /* 楽天 */
    background: #cf4944; /* 背景色 */
    color: #fff; /* 文字色 */
}
div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink a:hover { /* Yahoo */
    background: #51a7e8; /* 背景色 */
    color: #fff; /* 文字色 */
}
div.yyi-rinker-contents ul.yyi-rinker-links li.freelink1 a:hover { /* freelink1 */
    background: #4072b3; /* 背景色 */
    color: #fff; /* 文字色 */
}
div.yyi-rinker-contents ul.yyi-rinker-links li.freelink2 a:hover { /* freelink2 */
    background: #4dc0b2; /* 背景色 */
    color: #fff; /* 文字色 */
}

/* --------- 外部リンク マーク削除 --------- */
div.yyi-rinker-contents div.yyi-rinker-title a[target="_blank"]::after{ /* 商品リンク タイトル */
    content: none;
}

div.yyi-rinker-contents div.yyi-rinker-detail .credit a[target="_blank"]::after{ /* クレジット */
    content: none;
}

div.yyi-rinker-contents ul.yyi-rinker-links li a[target="_blank"]::after{/* ボタン */
    content: none;
}

/* --------- レスポンシブ用 --------- */
@media screen and (max-width: 768px) { /* 画面幅768px以下の時 */
/* --- 商品リンク タイトル --- */
div.yyi-rinker-contents div.yyi-rinker-title a {
    font-weight: bold; /* 太字 */
}
/* --------- ボタン基本スタイル --------- */
div.yyi-rinker-contents ul.yyi-rinker-links li a {
    font-size: 0.8em;
}
}

@media screen and (max-width: 480px) { /* 画面幅480px以下の時 */
/* --- 商品リンク タイトル --- */
div.yyi-rinker-contents div.yyi-rinker-title a {
    font-weight: bold; /* 太字 */
    font-size: 1.05em;
}
/* --------- ボタン基本スタイル --------- */
div.yyi-rinker-contents ul.yyi-rinker-links li a {
    padding-left: 3.5px !important; /* ボタン文字 位置調整 */
    font-size: 0.8em;
}
}

 

スマホ時「縦デザイン」

「超シンプルデザイン」スマホ縦デザイン（PC）
PC表示　デザイン
「超シンプルデザイン」スマホ縦デザイン（スマホ）
スマホ表示　デザイン
スマホ時「縦デザイン」のコードを表示
/* ------------------------------------- */
/*          Rinker カスタマイズ          */
/* ------------------------------------- */

/* --------- 外枠 --------- */
div.yyi-rinker-contents {
    /*border: solid 1px #dbdbdb;*/ /* 1重線 */
    border:double #CCC; /* ２重線 */
}

/* ------- 画像 ------- */
div.yyi-rinker-contents div.yyi-rinker-image {
    width: 30%;
}

/* ------- 商品情報 全体 ------- */
div.yyi-rinker-contents div.yyi-rinker-box div.yyi-rinker-info {
    margin-top: 0; /* 上の余白 */
}

/* --- 商品リンク タイトル --- */
div.yyi-rinker-contents div.yyi-rinker-title a {
    color: #3296d2; /* 文字色 */
}

/* --- クレジット＆価格 --- */
div.yyi-rinker-contents div.yyi-rinker-detail {
    margin-top: 0; /* 上の余白 */
}

/* ------- クレジット ------- */
div.yyi-rinker-contents div.yyi-rinker-detail .credit {
    margin-bottom: 5px; /* 下スペース */
    color: #999; /* 文字色 */
}
div.yyi-rinker-contents div.yyi-rinker-detail .credit a{
    /*text-decoration: none;*/ /* リンクの下線 */
    color: #2581B3; /* リンクの文字色 */
}

/* ------- ブランド ------- */
div.yyi-rinker-contents div.yyi-rinker-detail .brand {
    margin-top: 0; /* 上の余白 */
}

/* ------- 商品価格 ------- */
div.yyi-rinker-contents div.yyi-rinker-detail .price-box {
    margin: 5px 0; /* 上下の余白 */
    color: #aaa; /* 文字色 */
}


/* --------- ボタン基本スタイル --------- */
div.yyi-rinker-contents ul.yyi-rinker-links li a {
    border-radius: 2px; /* ボタン 角の丸み */
    text-align: center;
    min-width:127px; /* ボタンの最小幅 */
    font-size: 0.9em;
}
div.yyi-rinker-contents ul.yyi-rinker-links li {
    margin: 5px;
    border-radius: 5px; /* ボタン外枠 角の丸み */
}

/* --------- ボタン色 --------- */
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonkindlelink { /* kindle */
    background: #fff; /* 背景色 */
    border: 2px solid #666; /* 外枠 */
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink { /* Amazon */
    background: #fff; /* 背景色 */
    border: 2px solid #f6a306; /* 外枠 */
}
div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink { /* 楽天 */
    background: #fff; /* 背景色 */
    border: 2px solid #cf4944; /* 外枠 */
}
div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink { /* Yahoo */
    background: #fff; /* 背景色 */
    border: 2px solid #51a7e8; /* 外枠 */
}
div.yyi-rinker-contents ul.yyi-rinker-links li.freelink1 { /* freelink1 */
    background: #fff; /* 背景色 */
    border: 2px solid #4072b3; /* 外枠 */
}
div.yyi-rinker-contents ul.yyi-rinker-links li.freelink2 { /* freelink2 */
    background: #fff; /* 背景色 */
    border: 2px solid #4dc0b2; /* 外枠 */
}

div.yyi-rinker-contents ul.yyi-rinker-links li.amazonkindlelink a{ /* kindle */
    color: #666; /* 文字色 */
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink a{ /* Amazon */
    color: #f6a306; /* 文字色 */
}
div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink a{ /* 楽天 */
    color: #cf4944; /* 文字色 */
}
div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink a{ /* Yahoo */
    color: #51a7e8; /* 文字色 */
}
div.yyi-rinker-contents ul.yyi-rinker-links li.freelink1 a{ /* freelink1 */
    color: #4072b3; /* 文字色 */
}
div.yyi-rinker-contents ul.yyi-rinker-links li.freelink2 a{ /* freelink2 */
    color: #4dc0b2; /* 文字色 */
}

/* --- マウスオーバー時のボタン色 --- */
div.yyi-rinker-contents ul.yyi-rinker-links li a:hover {
    opacity: 1; /* 透明度(1.0=不透明 0.0=完全透明) */
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonkindlelink a:hover { /* kindle */
    background: #666; /* 背景色 */
    color: #fff; /* 文字色 */
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink a:hover { /* Amazon */
    background: #f6a306; /* 背景色 */
    color: #fff; /* 文字色 */
}
div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink a:hover { /* 楽天 */
    background: #cf4944; /* 背景色 */
    color: #fff; /* 文字色 */
}
div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink a:hover { /* Yahoo */
    background: #51a7e8; /* 背景色 */
    color: #fff; /* 文字色 */
}
div.yyi-rinker-contents ul.yyi-rinker-links li.freelink1 a:hover { /* freelink1 */
    background: #4072b3; /* 背景色 */
    color: #fff; /* 文字色 */
}
div.yyi-rinker-contents ul.yyi-rinker-links li.freelink2 a:hover { /* freelink2 */
    background: #4dc0b2; /* 背景色 */
    color: #fff; /* 文字色 */
}

/* --------- 外部リンク マーク削除 --------- */
div.yyi-rinker-contents div.yyi-rinker-title a[target="_blank"]::after{ /* 商品リンク タイトル */
    content: none;
}

div.yyi-rinker-contents div.yyi-rinker-detail .credit a[target="_blank"]::after{ /* クレジット */
    content: none;
}

div.yyi-rinker-contents ul.yyi-rinker-links li a[target="_blank"]::after{/* ボタン */
    content: none;
}

/* --------- レスポンシブ用 --------- */
@media screen and (max-width: 768px) { /* 画面幅768px以下の時 */
/* --- 商品リンク タイトル --- */
div.yyi-rinker-contents div.yyi-rinker-title a {
    font-weight: bold; /* 太字 */
}
/* --------- ボタン基本スタイル --------- */
div.yyi-rinker-contents ul.yyi-rinker-links li a {
    font-size: 0.8em;
}
}

@media screen and (max-width: 480px) { /* 画面幅480px以下の時 */
/* --------- 全体 --------- */
div.yyi-rinker-contents div.yyi-rinker-box {
    display: block; /* 縦表示に */
}

/* ------- 画像 ------- */
div.yyi-rinker-contents div.yyi-rinker-image {
    width: auto; /* 画像を中央寄せ */
}

/* ------- 商品情報 全体 ------- */
div.yyi-rinker-contents div.yyi-rinker-box div.yyi-rinker-info {
    margin: auto;   /* 中央寄せ */
    width: calc(100% - 10px); /* 横幅 */
    text-align: center;  /* テキスト中央寄せ */
}

/* --- 商品リンク タイトル --- */
div.yyi-rinker-contents div.yyi-rinker-title a {
    font-weight: bold; /* 太字 */
    font-size: 1.05em;
}

/* --------- ボタン基本スタイル --------- */
div.yyi-rinker-contents ul.yyi-rinker-links li {
    width: 100%;/* 横幅 */
    margin: .5em 0; /* 上下の余白 */
}
div.yyi-rinker-contents ul.yyi-rinker-links li a {
    padding-left: 3.5px !important; /* ボタン文字 位置調整 */
    font-size: 0.8em;
}
}

 

補足

色の変更

色の変更は、「 /* 背景色 */ 」「 /* 文字色 */ 」などの〇〇〇色とコメントがある行の#f6a306の #〇〇〇〇〇〇をお好きな色コードに変更してください。

色コードの参考には、下記のサイトがおすすめです。

色コードの参考サイト

 

まとめ

どうですか？　うまく設定することができましたか。

CSSファイルをカスタマイズする前には必ずバックアップを取ってからおこなってください。 また、WordPressのテーマによってうまく反映されない部分もあると思いますが、そのへんはご了承ください。

Rinker(リンカー)は、大変便利なプラグインなので今後もお世話になること間違いないですね！

それでは、まったです。　(‘◇’)ゞ

 

ブログ運営
WordPress ブログ関連
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

この記事を書いた人

ネイネイのアバター ネイネイ Blogger

30代の元開発エンジニア。本の書評多め(ミステリ、ファンタジー、気になった本を読む雑食系)。現在は、自由な働き方で生活していけるように、日々の『喜び・怒り・悲しみ・楽しみ』を書きつづっています。

この著者の記事一覧へ

関連記事

コメント

コメント一覧 （2件）

  • このCSSにアイコンを追加することはできませんか？
    できるのであれば、教えていだだきたいです。
    お願いします。

    返信

    • サハラさん、はじめまして！
      コメント頂き、ありがとうございます(‘◇’)ゞ

      アイコン追加ですが、下記のコードを追加CSSに入れてみてください。
      どうぞよろしくお願いいたします。

      /* ——— アイコン 追加 ——— */
      div.yyi-rinker-contents ul.yyi-rinker-links li a:after {
      position: absolute;
      right: 5px;
      font-family: “FontAwesome”;
      content: “\f105”!important; /* アイコン指定 */
      }

      返信

ネイネイ へ返信する コメントをキャンセル

コメントは日本語で入力してください。(スパム対策)

CAPTCHA

目次（タップできます）