FC2ブログ 写真の大きさを縮小して表示させたい。

ＦＣ2ブログのテンプレートSoutherly（http://fc2information.blog.fc2.com/?share=45312& …）を使用しています。

トップページ記事写真やスライド写真のスペース内に写真が表示されています。
記事写真の写真は、現在70％（padding-top: 70%;）で写真が切れて表示されます。

①各記事写真は、表示スペースは変更しないで同じサイズの枠内に
　写真を縮小させて表示させたい。
　縮小度合い％を自由に設定できたら嬉しいです。

②スライド写真は、各写真の区画（表示サイズ）を小さくしたい。
　その自分で設定したスペース内に縮小％を自由に設定して表示させたい。
　小さくした分写真数を多く表示させたい。

方法を教えてください。宜しくお願いします！

No.1 ベストアンサー 回答者： de_viant 回答日時： 2017/08/13 17:11

まず最初に断っておきますが、

たぶん、個別に画像の表示サイズを変更することはできないと思います。
その上での回答となります。

１．については、
現在は画像の比率を保ったまま表示領域に表示するようになっています。
なので、見切れる部分が出てくると思います。（2．についても同じ）
希望されているように枠内に縮小して画像を配置するとあずき色？の背景がでます。

HTML編集で、以下のようなコードのところがあります。
<div class="inner-image-parent2">
<a href="<%topentry_link>">
<div class="imgLiquidFill2" style="background: url(<!--body_img--><%topentry_image_url><!--/body_img--><!--body_img_none-->//blog-imgs-93.fc2.com/v/a/n/vanillaice000/southnoimage.jpg<!--/body_img_none-->) center center /cover no-repeat;"></div>

このコード中の、cover の代わりに縮小したいサイズ、例えば、50% とかにすれば縮小されます。

２．については、
ブラウザの画面サイズに応じて、一画面に表示される画像数を決めています。
ブラウザの幅を狭めたり、拡げてみるとそれがわかると思います。

HTML編集で、以下のようなコードのところがあります。
<!-- 注)カルーセル不要の方ここから削除 3/3 -->
<!--not_permanent_area--><!--not_edit_area--><!--not_titlelist_area--><!--not_search_area--><!--not_date_area-->
<script src="//blog-imgs-80.fc2.com/v/a/n/vanillaice000/owl_carouselmin.js"></script>
<script>$(function(){$('.owl-carousel').owlCarousel({loop:true,autoplay:true,autoplayHoverPause:true,autoplaySpeed:500,margin:12,nav:true,navText:['<div id="nav-left"><span>&lsaquo;</span></div>','<div id="nav-right"><span>&rsaquo;</span></div>'],dots:false,responsive:true,responsive:{0:{items:1},480:{items:2},768:{items:3},1024:{items:4},1400:{items:5}}})});</script>
<!--/not_date_area--><!--/not_search_area--><!--/not_titlelist_area--><!--/not_edit_area--><!--/not_permanent_area-->
<!-- 注)カルーセル不要の方ここまで削除 3/3 -->

ここの、items:xの部分で表示数を変更します。
responsive:{0:{items:1},480:{items:2},768:{items:3},1024:{items:4},1400:{items:5}
例えば、
1024:{items:4}　を　1024:{items:6}　に変更すれば、表示数が増えた分だけ画像の表示サイズが小さくなります。

画像の表示自体は、１．と同じ考え方で表示されています。
ここも表示サイズを変えたい場合は、

HTML編集で、以下のようなコードのところがあります。
<div class="inner-image-parent">
<a href="<%topentry_link>">
<div class="imgLiquidFill" style="background: url(<%topentry_image_url>) center center /cover no-repeat;"></div>

このコード中の、cover の代わりに縮小したいサイズ、例えば、50% とかにすれば縮小されます。

ただ、こちらは背景色が設定されていないので、設定する場合は、

スタイルシート編集で、以下のようなコードのところがあります。
.inner-image-parent2 {
background: rgb(115,46,53); /* 注)トップページ記事ホバー時背景色 (approx)Merlot */
}

ここを、
.inner-image-parent2, .inner-image-parent {
background: rgb(115,46,53); /* 注)トップページ記事ホバー時背景色 (approx)Merlot */
}
にすれば背景色がつきます。

希望されているような形ではないかもしれませんが、参考まで。

この回答へのお礼

ありがとうございます。
大変助かります。
早速試してみます。

お礼日時：2017/08/13 18:06