デザイナー歴20年 アラフォーママの雑記ブログ

RINKERで写真を大きく

スポンサーリンク

簡単!RINKER(リンカー)で画像を大きくカスタマイズする方法

更新日:

RINKERってご存知ですか?

買い物リンクをはるためのWordpressプラグインです。

↓これです。

 

もうすっごく便利!

コードは1行だけだし、一覧管理もできて、値段もでます。

今まではカエレバとヨメレバを使っていましたが、コードがめちゃめちゃ長いのが欠点でした。

 

でもこのRINKER、少し気になる点がありまして…

画像が小さいです。

大きい画像が大好きな私は、少しカスタマイズすることにしました。

 

大きくなったのがこちら↓

created by Rinker
¥1,706 (2018/09/23 16:15:24時点 Amazon調べ-詳細)
そんくん
でかすぎやん?
ぐりお
だって~文字組とかデザインをじっくり見たいんだもん

 

スポンサーリンク



アクセス解析&広告効果測定システム「ムーブアクセス」

カスタマイズ方法

※以下の記事はRINKERをすでに導入しているのが前提です。

また画像サイズが変わるので、PCで読むことを推奨します。

① ショートコードに[ size="L"]をつける

 

普通のRINKERのショートコードはこれです。

[itemlink post_id="〇〇〇〇"]

これだと、小さい画像サイズになってしまうので、後ろに size="L" と書き足します。

[itemlink post_id="〇〇〇〇" size="L"]

こうしただけで、大きくなりましたね!

これでLサイズの画像が呼び出されることになりました。

 

ちなみに、Lの代わりにSと書くとこうなります。↓

[itemlink post_id="〇〇〇〇" size="S"]

created by Rinker
バンダイビジュアル
¥12,851 (2018/09/23 08:34:56時点 Amazon調べ-詳細)

Lの代わりにMと書くとこうです。↓

[itemlink post_id="〇〇〇〇" size="M"]

created by Rinker
バンダイビジュアル
¥12,851 (2018/09/23 08:34:56時点 Amazon調べ-詳細)

いつもこのサイズにしたい場合は、ぜひご活用ください。

 

 

もーーっと大きくしたい方は続きを見てください。↓↓↓

 

 

② CSSを書き足す

 

私と同じように大きなサイズにしたい方は、 このコードをコピペして、CSS編集に張り付けてください。

 

 

ただ張り付けるだけです。

アフィンガーやスティンガーを使っている方は、外観>CSS編集 を開いてください。

他のテーマの方は、 子テーマに書くか、CSS編集プラグインを使うといいらしいです。

 

画像サイズはここで調整してね。↓

簡単に解説します。

 

スキルクラウド スキルや強みを出品しませんか?

 

コードの解説です

① 画像サイズを100%に

 

width: 100%;

↑Lサイズの写真を画像サイズ100%の大きさで表示します。

これでデフォルトで一番最大サイズになります。

 

※大きすぎるというあなたは、ここは数値を入れることもできます。

width: 300px;

 

② 枠からはみ出さないように

 

ただし枠からはみ出ると困るので、最大サイズと最小サイズを指定しています。

max-width: ←最大サイズ

min-width: ←最小サイズ

※widthの数値を指定する場合は、ここは要りません。

 

③ 画像を左寄せに

 

また、 デフォルトでは中央揃えの画像を左に寄せています。↓

justify-content: flex-start;

ぐりお
左寄せにしたほうが画像がきれいにおさまるよ

 

④ タブレットやスマホ用のサイズ

 

さらに、ここから下は画面サイズ 横幅420px以下のタブレットやスマホの設定です。

@media all and (max-width: 420px) {

内容は上と同じですね。

こうして最大サイズと最小サイズを設定しておくと、タブレットやスマホで回転したときなどに、大きいサイズで表示できますよ。

 

コードを張りつけて、何か不具合が出たらすぐに戻してくださいね。

あくまで自己責任でお願いします。

 

ぐりお
わたしも見た目いい感じになるようにやってるだけだからね
そんくん
テキトーや…

 

 

 

ついでにYahooショッピングのボタンも直そう

 

もう1点RINKERで気になった点があります。

「Yahooショッピング」のボタンですが、文字数が長いため2行になることがあります。

その時、下にボタンがあると文字が重なってしまうのです。

ぐりお
ガーン

下のKindleのボタンと重なっています。

ここもついでに直します。

画像サイズの時と同様に、CSS編集に下のコードをはりつけます。

もともとは

height: 30px;

だったのを

height: 100%;

に変えました。

これで文字が重ならなくなりました。

 

容量無制限フォトストレージ 30days Album PRO

 

まとめ

 

今回は、便利なRINKERをカスタマイズしてきました。

画像サイズを変えたいあなた、ぜひ参考にしてみてください。

 

WEBデザインについてもっと勉強したいあなたはこちら↓

WebCampでWEBデザイナーになろう

オンラインで完結するスクールですから、家にいながら1か月で、WEBデザイン、コーディングの技術を習得できますよ。
まずは無料カウンセリングを受けてみましょう。

 

-ブログ
-

Copyright© ぐりおブログ , 2018 All Rights Reserved.