MENU
Category
papi
ブログ運営者
興味深い。笑える。あるいは為になる。
読み物として面白いブログでありたい。
そんなことを常に考えています。
 

SWELLのRinkerデザインをより見やすくカスタマイズするCSSコード

     

WordPressを使ってブログを運営している方の多くが『Rinker』のお世話になっていることと思います。

ショートコードで簡単に商品リンクを作成できるので、とても便利ですよね!

この記事では、WordPressテーマ『SWELL』のRinkerデザインをより見やすくカスタマイズするCSSコードをご紹介させていただきます。

この記事でご紹介するコードは、SWELL公式サイトの「SWELLでRinker(リンカー)の表示を整える方法」で紹介されているコードをちょっぴり改変したものです。

SWELL
SWELLでRinker(リンカー)の表示を整える方法 | WordPressテーマ SWELL
SWELLでRinker(リンカー)の表示を整える方法 | WordPressテーマ SWELLここでは、Amazonや楽天などの商品リンクを簡単に作成できる人気プラグイン『Rinker』の表示をSWELLで整えるCSSコードをご紹介します。SWELLでRinkerを使用した時のデフォ...
この記事の内容

デザインの変化

デフォルトの状態

デフォルトの状態では、このようなデザインになります。

PC
スマホ

このままでも機能的には問題はありませんが、視覚的にやや窮屈に感じます。(特にスマホ表示)

クリック率に影響があるのかは分かりませんが、デザインを改良することはユーザビリティの向上にも繋がりますので、一工夫していきましょう!

コードを追加した後

SWELL公式コードを追加することで、余白を整え、スマホ表示を縦並びにすることができます。

それだけでも十分すぎるほど見やすくなるんですけど、個人的なこだわりからちょっぴり改変させていただきました。

実際にそのコードを追加した商品リンクがこちら。

SWELL公式verと見比べてみましょう。

SWELL公式
PAPILOG
SWELL公式
PAPILOG
papiのアイコン画像papi

間違い探しかな・・・?

ほとんど違いが分からないかもしれませんが、一応、微妙に変わっていますw

  1. 商品画像右の要素を縦に揃える(PC)
  2. 商品タイトルを含む文字列を中央寄せ(スマホ)
  3. 商品タイトルをマウスオーバーした時にリンクカラー+アンダーラインを表示
  4. ブランド名や価格部分の文字色をテキストカラーと統一
  5. 外枠をブログカードのタイプ3と同じになるように変更

個人的な推しポイントは③です!

デフォルトやSWELL公式コードでは、商品タイトルをマウスオーバーしても変化がないので、リンクであることが分かりづらいような気がします。(気のせい)

もちろん、マウスカーソルの変化や、経験則からそれがリンクであることは明らかなのですが、もっと視覚的に明確に分かった方がいいと思い、変更することにしました。

とはいえ、始めからリンクカラーにするとやや大袈裟なので、マウスオーバーするとリンクカラー+アンダーラインが表示されるようにしました。(実際にマウスオーバーしてみて下さい!)

これならテキストリンクであることが明確ですし、変化があった方がクリックしてくれそうな気がしませんか?w

また、④については、デフォルトとSWELL公式verの外枠は、ブログカードのタイプ1・2と同じ枠になっているので、タイプ3を使っている私は、同じになるように変更しました。

ほんと細かいんですけど、できればこういうの揃えたいんですよねw

この様に揃っていた方が、やっぱりキレイだと思いませんか?

逆に、タイプ1・2をお使いの方は、ここは変えない方がいいと思うので、その方法もご紹介しますね。

なお、クレジット(created by Rinker)の削除は、Rinker開発者のやよいさんの有料note(500円)に記載されている方法を取っています。

ボタンの文字を変更(Amazon→Amazonで探すなど)する方法なども記載されていますので、必要に合わせて購入されてみてはいかがでしょうか。

note(ノート)
Rinkerへのご支援とカスタマイズ方法の表示|やよい|note
Rinkerへのご支援とカスタマイズ方法の表示|やよい|note RinkerはWordpressの無料のプラグインです。Rinkerを利用すると商品リンクがあっという間に作成できます。2018/6/6にリリースをし、1週間で500人以上の方がダウンロードを...

CSSコード

カスタマイズは自己責任でお願い致します!

SWELL公式コード

PAPILOGコード

テキストカラーやリンクカラーなどは、サイトのカラー設定に応じて変える等、お好みで適宜変更して下さい!

その際、該当箇所が分かりやすい様にコメントを付けておきました。

外枠を変えたくない場合は、最初のこの部分をまるまる削除すればOKです!

div.yyi-rinker-contents {/*外枠*/
	  border: 0px;
    box-shadow: 0 1px 3px 1px rgba(0,0,0,.08);
}

変更が反映されない場合は、キャッシュをクリアしてみて下さい。

また、Rinker設定>デザイン設定内のデザインは、ノーマルを選択して下さい。

その他の設定を選択した状態でコードを反映させると、デザインが崩れてしまいますのでご注意を!

まとめ

以上が、SWELLのRinkerデザインをより見やすくカスタマイズするCSSコードのご紹介でした。

SWELLのカスタマイズに関するコードは、まだあまり出回っていないみたいなので、今後も共有できることがあれば、ちょくちょくしていこうと思います!

まじSWELLだいすき。Rinkerも愛してる。



ご意見やご感想などは、お問い合わせまたはTwitter (@osanpopapillon)にて承っております。

お気軽にご連絡くださいませ。

この記事の内容
閉じる