ブログ管理

Rinker(リンカー)プラグインのデザインをCSSでカスタマイズ(スマホ表示も)

投稿日:2018-11-05 更新日:

Rinker(リンカー)をCSSでカスタマイズ

WordPressのプラグイン「Rinker(リンカー)」はAmazon、楽天市場、Yahooショッピングの商品リンクを簡単に作ることができます。

商品の検索から追加、追加した商品リンクの管理までWordPressの管理ページ内で完結できるとても優秀なプラグインです。

Rinker(リンカー)の商品リンクは初期デザインでも十分ですが、スマホで見た時などのデザインをカスタマイズしたので、その内容を紹介していきます。

Rinker(リンカー)を使用する前に忘れずにAmazonのアソシエイトのトラッキングID、楽天アフィリエイトIDやYahooショッピング(バリューコマース)IDの設定をしてください。

Rinker(リンカー)の初期デザインからカスタマイズしたいこと

カスタマイズしたいこと

  • 【両方】ボタンの高さを増やしたい
  • 【PC】すべてのボタンの幅が同じ幅にしたい
  • 【スマホ】左右(2カラム)のレイアウトを解除したい
  • 【スマホ】ボタンの文字がはみ出るのを修正(レイアウト変更で対応)

Rinker初期デザインPC

PCから見たRinker(リンカー)の初期デザインのボタンの幅はボタンの文字数で幅が決まるように作られています。

ボタンの幅が同じ方が見栄えがいいと感じるので統一していきたいです。

また、もう少し高さがある方がクリックやタップしやすいと思ったので高さもカスタマイズしていきます。

Rinker初期デザインスマホ

そして、スマホから見た場合でも画像と商品名やボタンが左右に分かれた2カラムのレイアウトになっています。

2カラムのレイアウトだとiPhone SEなどで見ると画像が小さくなって見づらいので、スマホやタブレットから見た時には1カラムで表示するようにカスタマイズしていきます。

1カラムにすることでボタンの幅は広くなるので表示できる文字数も増え「文字がはみ出る」といった問題も解決できると思います。

 

ボタンの文言を変更する方法

Rinker(リンカー)の初期ボタンの文言は「Amazon」「楽天市場」「Yahooショッピング」ですが、「Amazonで探す」などにボタンの文言の追加や変更ができます。

Rinker(リンカー)のショートコードに「alabel="Amazonボタンの文言" rlabel="楽天市場ボタンの文言" ylabel="Yahoo!ショッピングボタンの文言"」を追加するとボタンの文言を変更できます。

文言の文字数によってはボタンから文字がはみ出すこともあるので気をつけてください。

公式サイト商品リンク管理プラグインRinker(リンカー)「おやこそだて」

 

Rinker(リンカー)をカスタマイズしたCSS

カスタマイズ後の見た目はこんな感じです。

Rinker(リンカー)をCSSでカスタマイズ後PC

Rinker(リンカー)をCSSでカスタマイズ後マウスオーバー

Rinker(リンカー)をCSSでカスタマイズ後スマホ

 

ボタンの幅と高さの調整」と「スマホからの閲覧時に1カラム表示」を中心に修正しました。

スマホサイズの時に1カラムにしたことで「Yahoo!ショッピングで探す」の文言がボタン内におさまるようになりました。

ほかは、枠線やボタン(マウスオーバーで色が変わったり)の色などを少しカスタマイズしています。

 

カスタマイズしたCSSはこんな感じです。

一応、Windows10のパソコンのMicrosoft Edge, Chrome, Fire Fox と iPhone SEのSafariで表示確認しています。

また、このブログのテーマはWING(AFFINGER5)を利用していて、記事本文のエリアの幅は694pxになっています。

お使いのテーマ、記事本文のエリアの幅によってはパソコンから見た時でも楽天市場のボタンが段落ちするかもしれません。

その時は以下の部分の「width:46%; 」の数値を下げてください。

 

子テーマのstyle.cssにコピペしていただいて構いませんが、CSSをガリガリ書く人じゃないならプラグイン「Simple Custom CSS and JS」を利用してCSSを管理した方が楽ですよ。

参考Simple Custom CSS and JSの使い方

 

まとめ

Amazon、楽天市場、Yahooショッピングの商品リンクを作成するものでは「カエレバ・ヨメレバ」が有名らしいですがRinker(リンカー)の方が断然使いやすいです。

  • WordPressの管理ページですべてが完結
  • 書き出されるショートコードが1行なのできれい

私の場合は「カエレバ・ヨメレバ」を知って間もなくRinker(リンカー)を知ったので上記の理由からすぐに切り替えました。

商品リンク作成のプラグインなどは途中でほかのプラグインに変更すると直すのが大変だったりするので最初からRinker(リンカー)を使うことをおすすめします。

公式サイト商品リンク管理プラグインRinker(リンカー)「おやこそだて」

 

このブログのテーマはWING(AFFINGER5)です。

WING(AFFINGER5)はSEO対策に強いと言われているWordPressのテーマです。

有料のテーマだけど1度購入すると使いまわせるので2つ目以降のブログでは無料で使えます

複数のブログを持っていたり、計画がある人にはとってもお得です。

ビジュアルエディターだけで文字に色やマーカーをつけたり、枠で囲んだり、会話風のふきだしも簡単にできちゃいます!

WordPressテーマ 「WING(AFFINGER5)」

 

-ブログ管理
-, ,

Copyright© シエロ・しんふぃん , 2018 All Rights Reserved.