ライブドアブログのスマホ画面で外部リンク画像をリサイズする方法

外部リンクの画像を幅指定し、スマホ画面でもリサイズする方法を紹介します。

アフィリエイトなどで使う画像は外部リンクだったりしますが、CSSを直接用いてもPC画面ではリサイズできてもスマホ画面だと幅が変更されていなくて絶望した方は私以外にもいると思います。

そこで、簡単にライブドアブログにて外部リンクの画像をスマホ画面でリサイズする方法を2点あげていきます。

湊あくあ 1/7スケール PVC製 塗装済み完成品フィギュア

壽屋(KOTOBUKIYA)

Amazon.co.jpで詳細を見る

CSSに!importantを付ける

画像タグに直接CSSで幅指定してもスマホ画面では適応されません。その場合、!importantを付ける必要があります。
例えばこのような感じ。

ダメな例
&ltimg src=”aa.jpg” style=”width:200px;”&gt
画像タグ内にstyle要素を用いて直接CSSを指定できますが、上記のままではダメです。

良い例
&ltimg src=”aa.jpg” style=”width:200px!important;”&gt
このようにすることで、直接指定したCSSがスマホ画面でも適応されます。スマホ画面だけCSSが反映されていないことが度々あるので、その場合は!importantを使ってみましょう。

簡単に解決できましたが、当時CSSがスマホ画面で反映されない悩みをライブドアブログに問い合わせても解決策が出てこなかったため、結構大変でした。
次にもう一つの方法を紹介します。

ブログ内に画像をアップロードする

画像/ファイル画面より画像をアップロードします。

次に「編集」から、画像サイズを指定することで、スマホ画面、PC画面で同じサイズで表示されるようになります。

こちらはわざわざブログ内に画像をアップロードする必要があるのでめんどくさい方法ですね。外部リンクのまま画像サイズを指定したい方は!importantを試してみてください。