どうも、やぎです！
今回は、RinkerのデザインをCSSでカスタマイズしたので紹介したいと思います！
WordPressテーマの「JIN」で実施しております。
他のテーマでもできるかとは思いますが、不安な方は念の為バックアップを取るなどして実施してみてください！
Contents
RinkerデザインのBefore＆After
PC版：Before&After
Before👇
After👇
スマホ版：Before&After
Before👇
After👇
ボタンの仕様：Before&After
Before👇
After👇
変更点
・枠のデザイン変更（１本枠→2本枠）
・ボタンデザイン変更（縁の色を追加・カーソルを当てた時の仕様変更）
・スマホ表示の変更（画像と文字が縦に並ぶように）
・Amazon・Kindle・楽天のみ表示するように変更（参考画像は商品が書籍でないのでKindleは表示されていません）
変更方法を解説！
では変更の方法を解説していきます！
WordPress管理画面＞外観＞カスタマイズ＞style.css＞下記コードをコピペ
編集するテーマは、jin-child（JINの子テーマ）で実施ください（エラーが起きた時に修正しやすい）
コードを解説
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
/* ------------------------------------- */ /* Rinker カスタマイズ */ /* ------------------------------------- */ /*全体の枠線*/ div.yyi-rinker-contents { border:double #CCC; } /*商品の画像縦中央*/ div.yyi-rinker-contents div.yyi-rinker-image { align-items: center; padding: 5px; } /*ボタンの幅を統一*/ div.yyi-rinker-contents ul.yyi-rinker-links li { width: 46%; padding: 0; margin: .4em;/*ボタンとボタンの隙間*/ } /*ボタンの高さとテキストを中央揃え*/ div.yyi-rinker-contents ul.yyi-rinker-links li a { height: 2.8em;/*ボタンの高さ*/ line-height: 2.8em;/*テキストを縦中央揃え（heightと同じ値に）*/ padding: 0; text-align: center;/*テキストを横中央揃え*/ } /*ボタンの枠線*/ div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink {border:solid 2px #ffb92e;border-radius: 2px;} div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink {border:solid 2px #fb7979;border-radius: 2px;} div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink {display: block; margin:0;} /*マウスオーバー時薄くしない*/ div.yyi-rinker-contents ul.yyi-rinker-links li a:hover {opacity: 1;} /*マウスオーバー時ボタンの色と枠線*/ div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink:hover {background:#fff;border:solid 2px #f6a306;} div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink:hover {background:#fff;border:solid 2px #cf4944;} div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink:hover {background:#fff;border:solid 2px #51a7e8;} /*マウスオーバー時ボタンの文言色*/ div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink a:hover {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 {color:#51a7e8;} /*値段*/ div.yyi-rinker-contents div.yyi-rinker-detail .price-box .price { font-size: 1.2em; letter-spacing: 0.05em; margin-right: .5em; } /*画面サイズ501-1070px*/ @media screen and (min-width: 501px) and (max-width: 1070px){ /*ボタンの幅調整*/ div.yyi-rinker-contents ul.yyi-rinker-links li {width: 100%;} } /*画面サイズ500px以下*/ @media screen and (max-width: 500px){ /*1カラムに変更*/ 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-info {width: calc(100% - 10px);} div.yyi-rinker-contents div.yyi-rinker-detail .price-box .price {display: block;} div.yyi-rinker-contents ul.yyi-rinker-links li {width: 100%;} body div.yyi-rinker-contents ul.yyi-rinker-links li a {padding: 0;} } |
こちらのコードは、「シエロ・しんふぃん」というブログの記事のコードを参考に、カスタマイズしたものとなっております。記事はこちらです👇
Rinker（リンカー）プラグインのデザインをCSSでカスタマイズ（スマホ表示も）
参考記事のデザインに加えて、カスタマイズした箇所を解説していきます。
枠のデザイン変更（１本枠→2本枠）
|
1 |
/*全体の枠線*/ div.yyi-rinker-contents { border:double #CCC; } |
枠線は、border:doubleで二重線に変更しました。
ボタンデザイン変更
|
1 2 3 4 |
/*ボタンの枠線*/ div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink {border:solid 2px #ffb92e;border-radius: 2px;} div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink {border:solid 2px #fb7979;border-radius: 2px;} div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink {display: block; margin:0;} |
ボタンのデザインを、角の丸みを減らし、少し角が尖った形に変更しました。
Yahooのリンクを削除
|
1 |
div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink {display: block; margin:0;} |
Yahooのリンクの削除は、僕自身がYahooでアフィリエイト登録をしていなかったので、必要なかったからです。
上記のコードと重複しますが、display:blockとし、margin:0とすると、消すことができます。
まとめ
Rinkerのデザインのカスタマイズ方法について解説してきました。
Rinkerは、Amazonや楽天のリンクを簡単に作ることができ、また、デザインのカスタマイズも比較的簡単なので、とても使いやすいです。
好みだけでなく、クリック率を上げるためにも、ぜひ色々カスタマイズしてみて、お気に入りのデザインを使ってみてください！
僕も、色々と思考錯誤中です。
不明点や質問などがございましたら、お問い合わせも受け付けておりますので、ぜひお気軽にご連絡ください！
それでは！
