Amazonや楽天市場などの商品紹介リンクを簡単に貼ることができるプラグイン、Rinler。
今までと同じように昨日Rinkerを使ってリンクを貼ってみたら商品画像がなんかおかしいんですよ。
全部で9つ貼ったリンクのうち、3つの画像がやたら大きくなってぼやけてる・・・
いくらググっても対応方法は全くわからなかったんですけど、2時間近く頑張った結果やっとなおりました(-_-;)
元の画像が正方形じゃないと縦に引き伸ばされてしまう
商品によってなぜかこんな風に画像が大きくなりすぎてしまってました。
「全部の商品リンクを同じように貼ってるのになんで・・・?」
って悩みましたけど、結局は元の画像のサイズが正方形じゃないとダメだったみたいです。
幅に対して高さがありすぎるのでこの画像はキャンバス自体が縦長の長方形なんですね。
このまま画像リンクを貼ってしまうと引き伸ばされて大きくなっちゃうみたいです。
商品画像を正方形にリサイズする方法
CSSがわかる人ならもっと簡単なやり方があるのかもしれませんが、私は初心者なんであんまりわからないです(;'∀')
Windows10に入っている「ペイント」というソフトだけ使ってなんとかしたので、ちょっとめんどくさいかもですが私と同じ初心者の方の参考になればうれしいです。
Rinkerで貼り付けたい商品画像の上で右クリックして「名前を付けて画像を保存」を選択します。
デスクトップ左下の【スタートボタン(Windowsのロゴアイコン)】 → 【Windowsアクセサリ】 → 【ペイント】の順にクリックします。
左上の【ファイル】 → 【プロパティ】の順にクリックします。
元の画像の高さが275ピクセルだったので、幅も高さも275ピクセル以上であればOKです。
今回は275×275の正方形にしています。
極端に大きくする必要はないですけど、どうせトリミングしてしまうので大きく設定する分にはそれほど問題はないです。
左上の【ファイル】 → 【貼り付け】 → 【ファイルから貼り付け】の順にクリックして、先ほど保存した画像を選択します。
貼り付けた画像を左クリックでドラッグして中央付近に移動させます。
【ファイル】 → 【選択】をクリックして、だいたい正方形になるように囲みます。
きっちり正方形じゃなくても大丈夫です。
【トリミング】すると高さ、幅が同じくらいの画像に切り取れました。
【ファイル】 → 【名前を付けて保存】 → 【JPEG画像】をクリックして、任意の名前でマイピクチャに画像を保存します。
すでに登録してある商品リンクのページを開きます。
※まだ商品リンクを作成していない場合は【新規追加】から作成してください。
【画像を選択】をクリックし、先ほどの画像のURLを貼り付けて更新すると・・・
商品タイトルとショップリンクの高さと同じ大きさにきちんと収まりました!