CSSコピペでOK!Rinker(リンカー)プラグインのデザインをカスタマイズ

cssコピペでRinkerのデザインをカスタマイズ

WordPress向け商品管理プラグイン「Rinker(リンカー)」は、Amazon、楽天、Yahooショッピングの商品リンクを簡単に作ることのできる便利なプラグイン。

過去に当サイトでも紹介している「カエレバ・ヨメレバ」や「amazlet」と違い、検索から追加までWordPress上で完結できることが特徴です。

本日はこの「Rinker(リンカー)」のデザインをカスタマイズしたので紹介します。レスポンシブデザインですのでパソコン・タブレット・スマホなど各画面サイズに対応していることはもちろん、CSSをコピペして頂ければ作業完了しますので、どうぞお試しください。

※2018年8月 コードを一部修正しました。

スポンサーリンク

CSSコピペでRinker(リンカー)のデザインをカスタマイズ

デフォルトデザインを確認

カスタマイズしたものをご覧いただく前に、まずはRinkerデフォルトのデザインをあらためて確認しておきましょう。

cssコピペでRinkerのデザインをカスタマイズ

シンプルなデザイン、各ショップへのリンクがボタン風のデザインになっていることが特徴。デフォルトのままでも十分素敵なデザインなので、もちろんこのままご利用いただいてもOKです。

しかし注目を集めているプラグインですので、利用者が増えると他のブログと差別化したいと思う方もいらっしゃるでしょう。

そんな時は以下を参考にCSSをコピペしてください。

カスタマイズ後のデザイン(PC)

cssコピペでRinkerのデザインをカスタマイズ

僕自身シンプルなデザインが好みなので、カスタマイズとはいっても大幅な変更はしていません。基本的には「CSSコピペでOK!カエレバ・ヨメレバ・トマレバをまとめてカスタマイズ[ver2]」で紹介しているカエレバのデザインをベースに、必要以上の装飾は控え各サイトへのテキストリンクをサイトカラーのボタンにしています。

cssコピペでRinkerのデザインをカスタマイズ

各ショップへのリンクは、ショップのテーマカラーを用いたボタン風のデザインへ。マウスオーバー時はテキストや背景色が変化します。

カスタマイズ後のデザイン(タブレットやスマホ)

レスポンシブデザインのため、画面横幅の狭いタブレットやスマホで表示した場合も基本的なデザインは変わりません。

cssコピペでRinkerのデザインをカスタマイズ
タブレット(ここでは768px以下)で表示したデザインがこちら。PC表示で横並びだったサムネイル画像と各ショップへのリンクを、中央寄せの縦並びへ変更。各サイトへのボタンは横並びで表示されます。
cssコピペでRinkerのデザインをカスタマイズ
スマホ(ここでは480px以下)の表示したデザインがこちら。基本はタブレットと同様ですが、画面横幅が狭いので各ショップへのリンクを横並び→縦並びへ変更。
スポンサーリンク

カスタマイズは「style.css」へCSSコピペで完了!

RinkerのデザインカスタマイズはCSSを修正するだけ。style.cssファイル(小テーマ推奨)に以下のコードをコピペしてください。

それでは今回紹介したデザインのCSSを紹介します。

上記をコピペしていただくだけで作業は完了。

商品タイトルのテキストリンクや各サイトへのボタンなど、カラーを調整する場合は、コード内に挿入しているコメントを参考に位置を特定してカスタマイズしてください。

Rinkerカスタマイズまとめ

いかがでしたか?

カスタマイズはCSSをコピペして頂ければOKですが、サイト(使用されているWordPressテーマ等)によってはCSSをコピペしてもうまく反映されない部分があるかもしれません。

そのためカスタマイズは自己責任にてお願いします。事前のバックアップも忘れずに!

本カスタマイズをご利用される際や、万が一おかしな点がありましたら、SNSへのシェアやコメントでご連絡いただけると嬉しいです。

今後も商品管理プラグイン「Rinker(リンカー)」のデザインをアレンジしながら使い続けると思います。また新たなデザインに変更する際は当サイト内でご紹介しますので、よろしければまたご覧ください。

HTMLやCSS初心者でしたらまずは書籍で基本をおさえておきましょう。

カエレバ・ヨメレバ・トマレバのデザインカスタマイズでしたら以下の記事をご覧ください

スポンサーリンク
\この記事が少しでも役に立ったらシェアお願いします/
cssコピペでRinkerのデザインをカスタマイズ

4 件のコメント

  • こんにちは。
    CSSデザインを使わせていただいております。
    さて、スマホでのRinker(リンカー)の表示の右側が一部見切れてしまいます。
    修正するには、どこを修正すればよいでしょうか。
    お手数ですが、よろしくお願いいたします。

    • > ミーム様

      はじめまして。
      さっそくですが、コード内
      div.yyi-rinker-contents ul.yyi-rinker-links li a」に
      box-sizing: border-box;」を追加してみてはいかがでしょうか。

  • すいません。
    自分でいじって解決したので大丈夫です。
    一番下のwidth: 99%;の数字を変更すればよかったみたいです。
    お騒がせしました。

  • コメントを残す

    メールアドレスが公開されることはありません。

    このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください