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

2020 10/24

2020.10.16 2020.10.24

URL Copied!

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

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

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

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

この記事の内容

デザインの変化

デフォルトの状態

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

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

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

コードを追加した後

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

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

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

沈黙のWebライティング —Webマーケッターボーンの激闘—〈SEOのためのライティング教本〉

松尾茂起 (著), 上野高史 (イラスト)

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

papi

間違い探しかな・・・？

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

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

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

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

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

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

20歳の自分に受けさせたい文章講義 (星海社新書)

古賀史健

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

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

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

いますぐ書け、の文章法 (ちくま新書)

堀井憲一郎

CSSコード

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

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コード

/*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 {
    font-size: 1em;
}
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;
    font-size: .8em;
	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のカスタマイズに関するコードは、まだあまり出回っていないみたいなので、今後も共有できることがあれば、ちょくちょくしていこうと思います！

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

URL Copied!