CSSを使って、大きい画像を記事幅に合わせて縮小表示する方法 | ちょっとした「Webお役立ち情報」とかを主に書いてます。

ちょっとした「Webお役立ち情報」とかを主に書いてます。

ネットで調べて、「わかったこと」を備忘録の代わりのメモ帳のようにして使ってます。


テーマ:
ワンタン麺ではなくて、ただのワンタンです。(笑)

こんばんは。

CSSを使って、大きい画像を記事幅に合わせて縮小表示する方法


※CSS編集用デザインを採用されている方向けです。

自分、以前から思ってました。

アメブロさんにも「画像の自動縮小表示機能があればいいのになー!」なんて・・(他のいくつかのブログサービスでは自動縮小表示されるみたいです)。

アメブロの場合は、サイズの大きい画像は横幅が800pxに縮小されて、なおかつ、記事幅より大きい部分(右側)が切れてしまいます。

これは、個別に記事欄でHTMLに縮小するコードを入れてやった場合です。⇓




入れないと、このように右側が切れてしまいます。⇓


 


で、いろいろ調べてみたんですが、今回CSSを使って、大きい画像を記事幅に合わせて縮小表示する方法をご紹介したいと思います。


CSSの末尾に以下の設定を追記して下さい。


/*画像を記事幅に合わせて縮小*/
.articleText .detailOn img, .entry .detailOn img {
max-width: 400px;
height: auto !important;
}


赤字の数字の箇所は、ご自身のブログの記事幅に合わせて調整してみて下さい。

自分は今まで、大きい画像を表示する時は「ブログを書く」で、画像のコードに、その都度

width: 600px


を追記してました(自分の記事幅が600px位なので)。

この設定をCSSにしておけば、個別に設定しなくて済むと思います。
(※CSSで「保存」をクリックした後にF5キーを押すなどして、最新の状態に更新する事を忘れない様にして下さい。)

他にも、フリープラグインを使う方法もあるようですが、今回はCSSを使う方法をご紹介してみました。 


参考になると、うれしいのですが・・(^∇^)


☆ブィブィ  ('-^*)/

ワンタンさんをフォロー

ブログの更新情報が受け取れて、アクセスが簡単になります

Ameba人気のブログ

Amebaトピックス