2018年08月06日

シーサーブログで、改変禁止の商品リンクコードの画像サイズを縮小して表示する方法

シーサーブログで、改変禁止の商品リンクコードの画像の大きさを縮小してはみ出さないようにする方法です。スタイルシート(CSS)ではなく、HTMLを変更することと商品リンクにタグを追加したらうまく表示できました。
パソコンの画像

シーサーブログを使っていて、リンクシェアさんやバリューコマースさんの商品リンクを貼ると、スマホでは自動的に画像の大きさを縮小して表示してくれます。

でも、PCのほうは、大きすぎてカラムからはみ出してしまうんです。

もしかしたら、新しいデザインなら自動的に縮小してくれるかもしれません。でも以前から使っているデザインテンプレートの上に、かなりカスタマイズもしているので変えたくないし。

それでCSSで指定してみました。なぜだかうまくいかず。

いろいろ試した結果、スタイルシートではなくHTMLに書き込むことで画像サイズの変更に成功しました。

やり方は、

PCのデザインページでHTMLを開きます。

<head>
</head>
の間に以下の文字を追加します。</head>の直前がいいと思います。

<style type="text/css">
p.resizeimage img { width: 100%; }
</style>

HTML見本

100%だとカラムの幅いっぱいに画像が表示されます。ちょっと小さく、ということなら80%など好きな値を設定できます。

パーセンテージでなく大きさを指定したければ100%の替わりにピクセルでサイズを入れることもできます。たとえば、画像の幅を350ピクセルにしたければ、350pxを100%の部分に入れます。

HTMLを変更した上で、

記事を投稿する時に、商品リンクを以下のタグではさみます。

<p class="resizeimage">
ここに商品リンクのコード
</p>


これで商品リンクのコードを変更せずに商品画像の大きさを買えることができました。

商品リンクコードは改変禁止だからずっと使えなくって困ってました。これでやっと使えます♪


スポンサーリンク



posted by みき at 16:33 | Comment(0) | 雑記 | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。