今回は、アメブロで
「横幅の大きな画像をはみ出さないように表示する」
方法を説明します。
このように横幅をピッタリに表示できます。
アメブロで画像を投稿する場合、
意外とサイズの調整が難しいと思います。
今回のカスタマイズを行えば、
大きなサイズを自動で縮小表示してくれるので、
いちいちサイズを変更せずにブログへ投稿できます。
設定の仕方はいくつかありますが、今回は
１、CSSの設定で横幅の最大値を決めて表示する
２、フリープラグインの設定で横幅の最大値を決めて表示する
の、合わせ技を紹介します。
2つを組み合わせることによって、
IEなどのバージョンの違いによる不具合を調整できますので、
難しく考えず、わからない方はそのまま手順通り設定してください。
※それでも、表示の不具合が発生する場合はご質問下さい。
１、CSSの設定で横幅の最大値を決めて表示する
まずは、CSSの設定です。
小さい画像はそのままの大きさで表示し、大きい画像のみ縮小して記事枠に合わせた横幅で表示させる方法です。
ユーザーCSSの末尾に以下のように記述します。
--ここから--
.articleText .detailOn img, .entry .detailOn img {
max-width: 400px;
height: auto !important;
}
--ここまで--
「400」の部分には、画像を表示させる横幅の最大値を指定してください。
２、フリープラグインの設定で横幅の最大値を決めて表示する
次は、フリープラグインを利用して、大きい画像を縮小し、記事枠に合わせた横幅で表示する方法です。
以下のコードをフリープラグインに記述します。
--ここから--
<script src="http://www.google.com/jsapi"></script>
<script>google.load('jquery','1')</script>
<script>(function(j){j(function(){$=jQuery=j})})($)</script>
<script src="http://p.wazameba.com/njs/fitimgw.js"></script>
<script>
$(function(){
$('.articleText .detailOn img, .entry .detailOn img').fitImgWidth(400);
});
</script>
--ここまで--
「400」の部分には、画像を表示させる横幅の最大値を指定してください。
以上で、「横幅の大きな画像をはみ出さないように表示する」の説明を終わります。
北海大家でした。
少しでもタメになった方、興味を示してくれた方は、ぜひメルマガに登録しておいてくださいね
(^^♪