シーサーブログで、改変禁止の商品リンクコードの画像の大きさを縮小してはみ出さないようにする方法です。スタイルシート（CSS）ではなく、HTMLを変更することと商品リンクにタグを追加したらうまく表示できました。
シーサーブログを使っていて、リンクシェアさんやバリューコマースさんの商品リンクを貼ると、スマホでは自動的に画像の大きさを縮小して表示してくれます。
でも、PCのほうは、大きすぎてカラムからはみ出してしまうんです。
もしかしたら、新しいデザインなら自動的に縮小してくれるかもしれません。でも以前から使っているデザインテンプレートの上に、かなりカスタマイズもしているので変えたくないし。
それでCSSで指定してみました。なぜだかうまくいかず。
いろいろ試した結果、スタイルシートではなくHTMLに書き込むことで画像サイズの変更に成功しました。
やり方は、
PCのデザインページでHTMLを開きます。
<head>
</head>
の間に以下の文字を追加します。</head>の直前がいいと思います。
<style type=”text/css”>
p.resizeimage img { width: 100%; }
</style>
100%だとカラムの幅いっぱいに画像が表示されます。ちょっと小さく、ということなら80%など好きな値を設定できます。
パーセンテージでなく大きさを指定したければ100%の替わりにピクセルでサイズを入れることもできます。たとえば、画像の幅を350ピクセルにしたければ、350pxを100%の部分に入れます。
HTMLを変更した上で、
記事を投稿する時に、商品リンクを以下のタグではさみます。
<p class=”resizeimage”>
ここに商品リンクのコード
</p>
これで商品リンクのコードを変更せずに商品画像の大きさを買えることができました。
商品リンクコードは改変禁止だからずっと使えなくって困ってました。これでやっと使えます♪
スポンサーリンク
