SWELLでRinker(リンカー)の表示を整える方法

記事上のウィジェットエリア

ここでは、Amazonや楽天などの商品リンクを簡単に作成できる人気プラグイン『Rinker』の表示をSWELLで整えるCSSコードをご紹介します。

目次
目次前広告表示エリア

SWELLでRinkerを使用した時のデフォルト状態

SWELLでRinkerを使用した時、何もCSSコードを追加していなければデフォルトで以下のような表示になります。

Rinkerデフォルト(PC)
Rinkerデフォルト(PC)
Rinkerデフォルト(SP)
Rinkerデフォルト(SP)

Rinkerの表示を整えるCSSコード

ちょっとだけ余白感をSWELLに合わせて整えたり、スマホで縦並びに表示するCSSコードを紹介します。

CSSコードのペースト位置

「外観」>「カスタマイズ」>「追加CSS」からCSSを追加することができますので、ここにこれから紹介するCSSコードをコピペしてください。

追加CSS
追加CSS
了のアイコン画像

「追加CSS」はカスタマイザーの一番下にあります

CSSコードのペースト位置
CSSコードのペースト位置
了のアイコン画像

ここにコードをペーストし、「公開」ボタンをクリックして設定を保存してください。

追記するCSSコード

PC表示・スマホ表示でそれぞれ以下のような見た目にするためのCSSコードです。

PC表示

スマホ表示

/* 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;
    }
}
記事下のウィジェットエリア

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
目次
閉じる