商品リンクRinker(リンカー)のCSSカスタマイズ【2選】

商品リンクRinker(リンカー)のCSSカスタマイズ【2選】

こんにちは! CSSカスタマイズを勉強中のネイネイ(@NEYNEYx2)です。

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

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

 

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

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

商品リンク管理プラグインRinker(リンカー)の導入法【もしも編】

 

追加

ボタン色のカスタマイズに、kindle・freelink1・freelink2を追加しました。

(2018年4月14日)

空白などの調整。(主にWordPressテーマ「THE THOR(ザ・トール)」対策)

スマホ時、「縦表示」を追加。

(2019年7月6日)

 

カスタマイズの内容

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

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

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

 

変更後のデザイン

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

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

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

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

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

 

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

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

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

ご使用中のWordPressテーマがSTORK(ストーク)なら、コチラ( ↓ )の記事に子テーマの導入について説明がありますのでそちらをご覧ください。

関連記事

こんにちは! HTML&CSSの勉強中のネイネイ(@NEYNEYx2)です。 WordPressテーマのSTORK(ストーク)をインストールしたら、初めにしておいた方がいいのが「子テーマ」の導入です。 今回は、「子テーマ」を導入する仕方[…]

STORK(ストーク)をインストールしたら「子テーマ」を入れよう!

 

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

 

おすすめ デザイン

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

スマホ時「横デザイン」

「おすすめデザイン」スマホ横デザイン(PC)
PC表示 デザイン
「おすすめデザイン」スマホ横デザイン(スマホ)
スマホ表示 デザイン
     

CSS

/* ------------------------------------- */
/*          Rinker カスタマイズ          */
/* ------------------------------------- */

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

/* ------- 画像 ------- */
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:129px; /* ボタンの最小幅 */
    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表示 デザイン
「おすすめデザイン」スマホ縦デザイン(スマホ)
スマホ表示 デザイン
     

CSS

/* ------------------------------------- */
/*          Rinker カスタマイズ          */
/* ------------------------------------- */

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

/* ------- 画像 ------- */
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:129px; /* ボタンの最小幅 */
    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%;/* 横幅 */
}
div.yyi-rinker-contents ul.yyi-rinker-links li a {
    padding-left: 3.5px !important; /* ボタン文字 位置調整 */
    font-size: 0.8em;
}
}

 

超シンプル デザイン

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

スマホ時「横デザイン」

「超シンプルデザイン」スマホ横デザイン(PC)
PC表示 デザイン
「超シンプルデザイン」スマホ横デザイン(スマホ)
スマホ表示 デザイン
     

CSS

/* ------------------------------------- */
/*          Rinker カスタマイズ          */
/* ------------------------------------- */

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

/* ------- 画像 ------- */
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:129px; /* ボタンの最小幅 */
    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表示 デザイン
「超シンプルデザイン」スマホ縦デザイン(スマホ)
スマホ表示 デザイン
     

CSS

/* ------------------------------------- */
/*          Rinker カスタマイズ          */
/* ------------------------------------- */

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

/* ------- 画像 ------- */
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:129px; /* ボタンの最小幅 */
    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%;/* 横幅 */
}
div.yyi-rinker-contents ul.yyi-rinker-links li a {
    padding-left: 3.5px !important; /* ボタン文字 位置調整 */
    font-size: 0.8em;
}
}

 

補足

色の変更

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

色コードの参考には、コチラ(↓)のサイトがおすすめです。

色見本、配色を提案するWEB色見本のホームページ。選んだ色をキーカラーにして色の法則から多彩な配色と出会えます。漫画配色…

 

外部リンクのマーク削除

WordPressのテーマがSTORK(ストーク)だと、デフォルトでは「外部リンクのマーク」が下記の画像のように入ってしまいます。

外部リンクのマーク削除

これを消すために、a[target="_blank"]::after{content: none;}を記述しています。あえて、外部リンクのマークを残す場合やWordPressのテーマによって邪魔になる場合は、この行を消してください。

「外部リンク マーク削除」で検索すれば、すぐ見つかります。

 

まとめ

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

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

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

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

 

おすすめASP

 

ポチして頂くことで、ランキングの順位が上がります

人気ブログランキングへ
にほんブログ村 本ブログ 書評・レビューへ
Amazonでお得にお買い物
amazonギフト券

Amazonでお買い物するなら、Amazonギフト券の利用がおすすめ!

チャージするたびに、プライム会員なら最大2.5%分通常会員なら最大2.0%分のAmazonポイントが貯まる。

\ TRY NOW!! /

\ こちらも読まれています! /