【コピペ可】Rinkerの見た目をシンプルにカスタマイズしました!

Amazonや楽天などの商品を紹介する際、「カエレバ」や「ヨメレバ」というツールを使っていたのですが、先月の途中から「Rinker(リンカー)」というWordPressプラグインに切り替えました。

「Rinker」は特にCSSをいじらずとも見た目が整っている優れモノ。デフォルトでも十分にキレイなのですが、より当ブログの雰囲気に合わせたものにしたいと思い、カスタマイズしてみました。

なお、当ブログはWordPressテーマ「Snow Monkey」を使用しており、それに合わせた設計となっています。他テーマで全く同じ見た目にするには、テーマ独自のCSSの関係で微調整が必要になるかと思われます。

カスタマイズ後はこんな感じ

後述するコードをコピペすることで、商品リンクの見た目がだいたい次の画像のようになります。なお、Rinkerの設定で商品の価格は表示しないようにしています。

画面幅が320~599pxの場合

Rinker商品リンク(スマホ想定時)

画面幅が600~1279pxの場合

Rinker商品リンク(タブレット想定時)

画面幅が1280px以上の場合

Rinker商品リンク(パソコン想定時)

デザインを変更した箇所

ざっくりとまとめてみました。

  • 全体的に影をなくす
  • 画像サイズの調整
  • 文字サイズと文字色の調整
  • 余白の調整
  • 各ショップへのリンクを背景ベタ塗りから薄いグレーのグラデーションがかかったボタンに変更

箇条書き最後の変更点が今回のカスタマイズにおけるキモです。

ショップを連想させる色で塗りつぶしたものも目立ってグッド(今度始めようとしている他ブログではそのようなボタンにする予定)なのですが、このブログ全体の印象からすると浮いているように感じてしまったため、今回のようなボタンに変更しました。

Rinkerのカスタマイズ記事でこのようなボタンにしているのはあまり見かけなかったので、地味というかシンプルというか、そのようなものがお好みの方は参考にしてみてください。

なお、先述したように当ブログ用にCSSを書いているので、デザインが切り替わる画面幅については、好みに合わせて後述の@media部分の数値を変えてください。

コードの紹介

それでは今回適用したコードを紹介します…とその前に、プラグイン「Rinker」自体の仕様や注意点、ダウンロードは公式サイトをご覧ください。

また、コードを紹介する前に注意点を書いておきます。

  • 上に掲載した完成サンプル画像はbodyline-height: 1.86957;が適用されており、また画面幅600px以上のものはletter-spacing: .05em;が適用されているものになります。
  • 当ブログ内の実際の商品リンクでは、ショップ名のあとに一律で「で探す」の文言を入れていますが、ボタンの文言を一括で変更するカスタマイズ方法につきましては、作者の方が有料のRinker支援用note内に掲載されているようなので、ここでは紹介を自重いたします。
  • また、本を紹介する際にはボタンの順序を変更しているのですが、これも月額制のRinker開発支援Fanboxにてカスタマイズ方法を掲載されているようなので、紹介を自重いたします。
  • 以下のコードを追記するにあたり、直接CSSファイルを編集する場合は、バックアップをとっておくことをおすすめします。万一表示が大きく崩れた場合に元に戻すことができます。

それではコードを掲載します!

div.yyi-rinker-contents {
    margin: 0;
    border: 1px solid #ddd;
    background-color: #fff;
    box-shadow: none;
    border-radius: 4px;
}

div.yyi-rinker-contents div.yyi-rinker-box {
    display: -webkit-flex;
    display: flex;
    padding: 16px;
}

div.yyi-rinker-contents div.yyi-rinker-image {
    vertical-align: top;
    align-items: flex-start;
    margin-right: 16px;
}

.yyi-rinker-img-s .yyi-rinker-image,
.yyi-rinker-img-m .yyi-rinker-image,
.yyi-rinker-img-l div.yyi-rinker-image {
    width: 80px;
    min-width: 80px;
}

div.yyi-rinker-contents.yyi-rinker-img-s div.yyi-rinker-info,
div.yyi-rinker-contents div.yyi-rinker-info,
div.yyi-rinker-contents.yyi-rinker-img-l div.yyi-rinker-info {
    width: calc(100% - 80px);
}

div.yyi-rinker-contents div.yyi-rinker-title a {
    font-weight: bold;
    color: #111;
}

div.yyi-rinker-contents div.yyi-rinker-title p {
    margin: 0;
}

div.yyi-rinker-contents div.yyi-rinker-detail {
    font-size: 12px;
    color: #999;
    padding-left: 0;
    line-height: 1.5;
}

div.yyi-rinker-contents div.yyi-rinker-detail a {
   text-decoration: none;
   color: #999;
}

div.yyi-rinker-detail .credit {
    font-size: 12px;
    margin: 4px 0 3px;
}

div.yyi-rinker-contents div.yyi-rinker-detail .price-box,
div.yyi-rinker-contents div.yyi-rinker-detail .free-text {
    color: #999;
}

div.yyi-rinker-contents ul.yyi-rinker-links {
    margin: 12px 0 4px;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: column;
    flex-direction: column;
}

div.yyi-rinker-contents ul.yyi-rinker-links li {
    margin: 0;
    padding: 0;
    border-radius: 4px;
    box-shadow: none;
    border: 1px solid #e2e2e2;
    background: linear-gradient(to bottom, #fefefe 5%, #f5f5f5 100%) !important;
}

div.yyi-rinker-contents ul.yyi-rinker-links li:not(:last-child) {
    margin-bottom: 6px;
} 

div.yyi-rinker-contents ul.yyi-rinker-links li:hover {
    box-shadow: none;
    background: linear-gradient(to bottom, #f7f7f7 5%, #eee 100%) !important;
}

div.yyi-rinker-contents ul.yyi-rinker-links li a {
    font-size: 12px;
    padding: 0;
    border-radius: 4px;
    height: 30px;
    line-height: 30px;
    text-align: center;
}

div.yyi-rinker-contents ul.yyi-rinker-links li a:hover {
    opacity: 1;
}

div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink a {
    color: #f34801;
}

div.yyi-rinker-contents ul.yyi-rinker-links li.amazonkindlelink a {
    color: #267dc2;
}

div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink a {
    color: #de3c37;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink a {
    color: #f53563;
}

div.yyi-rinker-contents div.yyi-rinker-image:hover,
div.yyi-rinker-contents div.yyi-rinker-title a:hover,
div.yyi-rinker-contents div.yyi-rinker-detail a:hover {
    opacity: .8;
}


/* 画面幅360px以上 */
@media all and (min-width: 360px) {
    
.yyi-rinker-img-s .yyi-rinker-image,
.yyi-rinker-img-m .yyi-rinker-image,
.yyi-rinker-img-l div.yyi-rinker-image{
    width: 100px;
    min-width: 100px;
}

div.yyi-rinker-contents.yyi-rinker-img-s div.yyi-rinker-info,
div.yyi-rinker-contents div.yyi-rinker-info,
div.yyi-rinker-contents.yyi-rinker-img-l div.yyi-rinker-info {
    width: calc(100% - 100px);
}

}


/* 画面幅400px以上 */
@media all and (min-width: 400px) {
    
.yyi-rinker-img-s .yyi-rinker-image,
.yyi-rinker-img-m .yyi-rinker-image,
.yyi-rinker-img-l div.yyi-rinker-image {
    width: 112px;
    min-width: 112px;
}

div.yyi-rinker-contents.yyi-rinker-img-s div.yyi-rinker-info,
div.yyi-rinker-contents div.yyi-rinker-info,
div.yyi-rinker-contents.yyi-rinker-img-l div.yyi-rinker-info {
    width: calc(100% - 112px);
}

}


/* 画面幅600px以上 */
@media all and (min-width: 600px) {

div.yyi-rinker-contents div.yyi-rinker-image {
    vertical-align: middle;
    align-items: center;
}

div.yyi-rinker-contents div.yyi-rinker-detail,
div.yyi-rinker-contents div.yyi-rinker-detail a,
div.yyi-rinker-contents div.yyi-rinker-detail .price-box,
div.yyi-rinker-contents div.yyi-rinker-detail .free-text {
    color: #666;
}

div.yyi-rinker-detail .credit {
    margin: 8px 0 4px;
}

div.yyi-rinker-contents ul.yyi-rinker-links {
    margin: 16px -7px 0 0; /* 好みであえて-7pxにしています */
    width: auto;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-direction: row;
    flex-direction: row;
}

div.yyi-rinker-contents ul.yyi-rinker-links li {
    width: calc(50% - 8px);
    margin-right: 8px;
}

div.yyi-rinker-contents ul.yyi-rinker-links li {
    margin-bottom: 5px !important;
}

}


/* 画面幅1280px以上 */
@media all and (min-width: 1280px) {
    
div.yyi-rinker-contents ul.yyi-rinker-links li {
    width: auto;
}

div.yyi-rinker-contents ul.yyi-rinker-links li a {
    padding: 0 16px;
}

}

以上です。

追加する場所はテーマによるかと思いますが、子テーマの「style.css」かカスタマイザー(外観→カスタマイズ)内にある「追加CSS」が多い感じでしょうかね。

最後に、画像ではなく実際の商品リンクを載せて終わりたいと思います。注意点として述べたように、有料公開されているカスタマイズは上記コード内には含まれておりませんので、ご了承ください。