WordPressを使ってブログを運営している方の多くが『Rinker』のお世話になっていることと思います。
ショートコードで簡単に商品リンクを作成できるので、とても便利ですよね!
この記事では、WordPressテーマ『SWELL』のRinkerデザインをより見やすくカスタマイズするCSSコードをご紹介させていただきます。
この記事でご紹介するコードは、SWELL公式サイトの「SWELLでRinker(リンカー)の表示を整える方法」で紹介されているコードをちょっぴり改変したものです。
この記事の内容
デザインの変化
デフォルトの状態
デフォルトの状態では、このようなデザインになります。
PC
スマホ
このままでも機能的には問題はありませんが、視覚的にやや窮屈に感じます。(特にスマホ表示)
クリック率に影響があるのかは分かりませんが、デザインを改良することはユーザビリティの向上にも繋がりますので、一工夫していきましょう!
コードを追加した後
SWELL公式コードを追加することで、余白を整え、スマホ表示を縦並びにすることができます。
それだけでも十分すぎるほど見やすくなるんですけど、個人的なこだわりからちょっぴり改変させていただきました。
実際にそのコードを追加した商品リンクがこちら。
SWELL公式verと見比べてみましょう。
SWELL公式
PAPILOG
SWELL公式
PAPILOG
papi
ほとんど違いが分からないかもしれませんが、一応、微妙に変わっていますw
- 商品画像右の要素を縦に揃える(PC)
- 商品タイトルを含む文字列を中央寄せ(スマホ)
- 商品タイトルをマウスオーバーした時にリンクカラー+アンダーラインを表示
- ブランド名や価格部分の文字色をテキストカラーと統一
- 外枠をブログカードのタイプ3と同じになるように変更
個人的な推しポイントは③です!
デフォルトやSWELL公式コードでは、商品タイトルをマウスオーバーしても変化がないので、リンクであることが分かりづらいような気がします。(気のせい)
もちろん、マウスカーソルの変化や、経験則からそれがリンクであることは明らかなのですが、もっと視覚的に明確に分かった方がいいと思い、変更することにしました。
とはいえ、始めからリンクカラーにするとやや大袈裟なので、マウスオーバーするとリンクカラー+アンダーラインが表示されるようにしました。(実際にマウスオーバーしてみて下さい!)
これならテキストリンクであることが明確ですし、変化があった方がクリックしてくれそうな気がしませんか?w
また、④については、デフォルトとSWELL公式verの外枠は、ブログカードのタイプ1・2と同じ枠になっているので、タイプ3を使っている私は、同じになるように変更しました。
ほんと細かいんですけど、できればこういうの揃えたいんですよねw
このように揃っていた方が、やっぱりキレイだと思いませんか?
逆に、タイプ1・2をお使いの方は、ここは変えない方がいいと思うので、その方法もご紹介しますね。
なお、クレジット(created by Rinker)の削除は、Rinker開発者のやよいさんの有料note(500円)に記載されている方法を取っています。
ボタンの文字を変更(Amazon→Amazonで探す等)する方法等も記載されていますので、必要に合わせて購入されてみてはいかがでしょうか。
note(ノート)Rinkerへのご支援とカスタマイズ方法の表示|やよい|note RinkerはWordpressの無料のプラグインです。Rinkerを利用すると商品リンクがあっという間に作成できます。2018/6/6にリリースをし、1週間で500人以上の方がダウンロードを...
CSSコード
カスタマイズは自己責任でお願い致します!
SWELL公式コード
SWELL公式コード
/* Rinker */
div.yyi-rinker-contents div.yyi-rinker-box {
padding: 16px;
}
.content_wrap div.yyi-rinker-contents {
margin: 2.5em 0;
}
.content_wrap div.yyi-rinker-contents ul.yyi-rinker-links li a{
padding: 0 2em;
letter-spacing: 1px;
}
.yyi-rinker-title p{
line-height: 1.6;
}
div.yyi-rinker-contents img {
width: 100%;
}
.yyi-rinker-box .luminous{
display: none;
}
div.yyi-rinker-contents div.yyi-rinker-detail{
padding: 4px 8px;
}
/* スマホ用 */
@media (max-width: 420px){
.yyi-rinker-links li{
margin: 4px !important;
}
.yyi-rinker-links li a {
text-align: center;
padding: 0 !important;
height: auto !important;
line-height: 3.5 !important;
}
.yyi-rinker-detail {
padding: .5px !important;
}
.yyi-rinker-box{
display: block !important;
}
.yyi-rinker-image,
.yyi-rinker-info{
width: 100% !important;
}
.yyi-rinker-info{
padding-top: 1em;
}
}
PAPILOGコード
PAPILOGコード
/*Rinker*/
div.yyi-rinker-contents {/*外枠*/
border: 0px;
box-shadow: 0 1px 3px 1px rgba(0,0,0,.08);
}
div.yyi-rinker-contents div.yyi-rinker-box {
padding: 16px;
}
div.yyi-rinker-image {
margin-right: 16px;
}
div.yyi-rinker-contents div.yyi-rinker-title a:hover {/*商品タイトルのホバーエフェクト*/
color: #3fa3ff;/*リンクカラー*/
text-decoration: underline;
}
div.yyi-rinker-contents div.yyi-rinker-detail {/*クレジット、ブランド部分*/
padding: 4px 0;
color: #333;/*テキストカラー*/
}
span.price {/*価格部分*/
color: #333;/*テキストカラー*/
}
.price-box span:nth-child(n+2) {/*価格取得日時部分*/
color: #333;/*テキストカラー*/
}
div.yyi-rinker-contents ul.yyi-rinker-links li {
margin: 8px 8px 0 0;
}
@media (max-width: 767px) {
.yyi-rinker-links li {
margin: 4px !important;
border-radius: 2px;
}
.yyi-rinker-links li a {
text-align: center;
padding: 0;
height: auto !important;
line-height: 3.5 !important;
}
div.price-box span.price {
display: block;
}
.yyi-rinker-detail {
padding: .5px;
}
.yyi-rinker-box {
display: block !important;
text-align: center;
}
.yyi-rinker-image, .yyi-rinker-info {
width: 100% !important;
}
.yyi-rinker-info {
padding-top: 1em;
}}
テキストカラーやリンクカラー等は、サイトのカラー設定に応じて変える等、お好みで適宜変更して下さい!
その際、該当箇所が分かりやすいようにコメントを付けておきました。
外枠を変えたくない場合は、最初のこの部分をまるまる削除すればOKです!
div.yyi-rinker-contents {/*外枠*/
border: 0px;
box-shadow: 0 1px 3px 1px rgba(0,0,0,.08);
}
変更が反映されない場合は、キャッシュをクリアしてみて下さい。
また、Rinker設定>デザイン設定内のデザインは、ノーマルを選択して下さい。
その他の設定を選択した状態でコードを反映させると、デザインが崩れてしまいますのでご注意を!
まとめ
以上が、SWELLのRinkerデザインをより見やすくカスタマイズするCSSコードのご紹介でした。
SWELLのカスタマイズに関するコードは、まだあまり出回っていないみたいなので、今後も共有できることがあれば、ちょくちょくしていこうと思います!