RINKERってご存知ですか？
買い物リンクをはるためのWordpressプラグインです。
↓これです。
もうすっごく便利！
コードは1行だけだし、一覧管理もできて、値段もでます。
今まではカエレバとヨメレバを使っていましたが、コードがめちゃめちゃ長いのが欠点でした。
[sc name="ma"]でもこのRINKER、少し気になる点がありまして…[sc name="ma_close"]
[sc name="ma"]画像が小さいです。[sc name="ma_close"]
大きい画像が大好きな私は、少しカスタマイズすることにしました。
大きくなったのがこちら↓
[itemlink post_id="1493" size="L"]
スポンサーリンク
アクセス解析＆広告効果測定システム「ムーブアクセス」
カスタマイズ方法
※以下の記事はRINKERをすでに導入しているのが前提です。
また画像サイズが変わるので、PCで読むことを推奨します。
① ショートコードに[ size="L"]をつける
普通のRINKERのショートコードはこれです。
[itemlink post_id="〇〇〇〇"]
これだと、小さい画像サイズになってしまうので、後ろに[sc name="ma"] size="L" と書き足します。[sc name="ma_close"]
[itemlink post_id="〇〇〇〇" size="L"]
こうしただけで、大きくなりましたね！
これでLサイズの画像が呼び出されることになりました。
ちなみに、Lの代わりにSと書くとこうなります。↓
[itemlink post_id="〇〇〇〇" size="S"]
[itemlink post_id="1482" size="S"]
Lの代わりにMと書くとこうです。↓
[itemlink post_id="〇〇〇〇" size="M"]
[itemlink post_id="1482" size="M"]
いつもこのサイズにしたい場合は、ぜひご活用ください。
もーーっと大きくしたい方は続きを見てください。↓↓↓
② CSSを書き足す
私と同じように大きなサイズにしたい方は、[sc name="ma"]このコードをコピペして、CSS編集に張り付けてください。[sc name="ma_close"]
/*------------------------------------
リンカー画像大きく
------------------------------------*/
div.yyi-rinker-contents div.yyi-rinker-image {
max-width: 400px;
width: 100%;
min-width: 175px;
justify-content: flex-start;
}
@media all and (max-width: 420px) {
div.yyi-rinker-contents div.yyi-rinker-image {
max-width: 200px;
width: 100%;
min-width: 100px;
}
}
ただ張り付けるだけです。
[sc name="ma"]アフィンガーやスティンガーを使っている方は、外観＞CSS編集 を開いてください。[sc name="ma_close"]
他のテーマの方は、[sc name="ma"]子テーマに書くか、CSS編集プラグインを使うといいらしいです。[sc name="ma_close"]
画像サイズはここで調整してね。↓
max-width: 400px; width: 100%; min-width: 175px;
簡単に解説します。
コードの解説です
① 画像サイズを100％に
width: 100%;
[sc name="ma"]↑Lサイズの写真を画像サイズ100％の大きさで表示します。[sc name="ma_close"]
これでデフォルトで一番最大サイズになります。
※大きすぎるというあなたは、ここは数値を入れることもできます。
例
width: 300px;
② 枠からはみ出さないように
ただし枠からはみ出ると困るので、最大サイズと最小サイズを指定しています。
max-width: ←最大サイズ
min-width: ←最小サイズ
max-width: 400px; min-width: 175px;
※widthの数値を指定する場合は、ここは要りません。
③ 画像を左寄せに
また、[sc name="ma"]デフォルトでは中央揃えの画像を左に寄せています。↓[sc name="ma_close"]
justify-content: flex-start;
④ タブレットやスマホ用のサイズ
さらに、ここから下は画面サイズ[sc name="ma"]横幅420px以下のタブレットやスマホの設定です。[sc name="ma_close"]
@media all and (max-width: 420px) {
内容は上と同じですね。
max-width: 200px;
width: 100%;
min-width: 100px;
こうして最大サイズと最小サイズを設定しておくと、タブレットやスマホで回転したときなどに、大きいサイズで表示できますよ。
[sc name="ma"]コードを張りつけて、何か不具合が出たらすぐに戻してくださいね。[sc name="ma_close"]
あくまで自己責任でお願いします。
ついでにYahooショッピングのボタンも直そう
もう1点RINKERで気になった点があります。
「Yahooショッピング」のボタンですが、文字数が長いため2行になることがあります。
その時、下にボタンがあると文字が重なってしまうのです。
下のKindleのボタンと重なっています。
ここもついでに直します。
画像サイズの時と同様に、CSS編集に下のコードをはりつけます。
/*リンカーボタン高さ */
div.yyi-rinker-contents ul.yyi-rinker-links li a {
width: 100%;
height: 100%;
}
もともとは
height: 30px;
だったのを
height: 100%;
に変えました。
これで文字が重ならなくなりました。
容量無制限フォトストレージ 30days Album PRO
まとめ
今回は、便利なRINKERをカスタマイズしてきました。
画像サイズを変えたいあなた、ぜひ参考にしてみてください。
WEBデザインについてもっと勉強したいあなたはこちら↓
[sc name="ma"]WebCampでWEBデザイナーになろう[sc name="ma_close"]
[sc name="ma"]オンラインで完結するスクールですから、家にいながら1か月で、WEBデザイン、コーディングの技術を習得できますよ。[sc name="ma_close"]
まずは無料カウンセリングを受けてみましょう。