![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?8acaa2e)
FC2ブログのテンプレートSoutherly(http://fc2information.blog.fc2.com/?share=45312& …)を使用しています。
トップページ記事写真やスライド写真のスペース内に写真が表示されています。
記事写真の写真は、現在70%(padding-top: 70%;)で写真が切れて表示されます。
①各記事写真は、表示スペースは変更しないで同じサイズの枠内に
写真を縮小させて表示させたい。
縮小度合い%を自由に設定できたら嬉しいです。
②スライド写真は、各写真の区画(表示サイズ)を小さくしたい。
その自分で設定したスペース内に縮小%を自由に設定して表示させたい。
小さくした分写真数を多く表示させたい。
方法を教えてください。宜しくお願いします!
No.1ベストアンサー
- 回答日時:
まず最初に断っておきますが、
たぶん、個別に画像の表示サイズを変更することはできないと思います。
その上での回答となります。
1.については、
現在は画像の比率を保ったまま表示領域に表示するようになっています。
なので、見切れる部分が出てくると思います。(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% とかにすれば縮小されます。
2.については、
ブラウザの画面サイズに応じて、一画面に表示される画像数を決めています。
ブラウザの幅を狭めたり、拡げてみるとそれがわかると思います。
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>‹</span></div>','<div id="nav-right"><span>›</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} に変更すれば、表示数が増えた分だけ画像の表示サイズが小さくなります。
画像の表示自体は、1.と同じ考え方で表示されています。
ここも表示サイズを変えたい場合は、
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 */
}
にすれば背景色がつきます。
希望されているような形ではないかもしれませんが、参考まで。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- WordPress(ワードプレス) WordpressのElementor のキャプション写真を次へ → で次を表示させるの設定 1 2022/12/19 16:48
- 写真・ビデオ スマホで撮影した写真(JPEG)をパソコン(Win10)で見ると、撮影した写真が添付のような表示にな 3 2022/04/29 14:46
- デジタルカメラ 画像のサイズについて 2 2022/07/14 15:40
- iPhone(アイフォーン) マイクロソフトOneDrive にiPhoneの写真がアップされない お世話になります マイクロソフ 3 2022/08/22 13:24
- その他(パソコン・スマホ・電化製品) 圧縮ファイル解像について 7 2023/07/31 08:42
- 写真・ビデオ iPhoneのプライバシーとセキュリティの写真の項目について 2 2023/06/24 23:11
- iPhone(アイフォーン) iPhoneのプライバシーとセキュリティの写真の項目について 1 2023/06/24 20:25
- その他(パソコン・スマホ・電化製品) スマホAndroidで、ヤフーメールアプリを利用してますが、画像2枚を添付して送信できません。添付す 1 2023/08/11 16:03
- Excel(エクセル) excelvbaでスライドショーを作りたい 2 2023/04/20 14:32
- その他(パソコン・スマホ・電化製品) スマホ写真の保存方法についてです。専門用語やスマホとパソコンの事が分からないのですが、教えてください 4 2023/04/09 15:34
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
写真が大きくならない
-
スクリーンショットをエクセル...
-
Blogger/アップロードの画像サ...
-
goo簡単HP。バナーのサイズつい...
-
ブログ記事に画像を入れた時の...
-
line
-
グーグルドライブ、勝手に共有...
-
JPG画像をDVDプレーヤー...
-
ビスタで2003の形式で保存って...
-
メールをwordに変換して保存したい
-
フォントと文字サイズを同時に...
-
Word2007で保存せずに保存の復活
-
パソコン版LINEのデータ保存先...
-
Microsoft IME 辞書の保存
-
スケブの管理方法。
-
SDカードに保存するような設定
-
【ExcelVBA】各セルをダブルク...
-
GoogleドライブOCR機能が使えな...
-
将来削除予定のホームページの...
-
FC2ブログのヘッダー画像の上に...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
スクリーンショットをエクセル...
-
FC2ブログ 写真の大きさを縮小...
-
ココナラにて「サムネイル」と...
-
画像のサイズとは? KBの数...
-
seesaaブログに画像が、思った...
-
Livedoorブログで写真、文章が...
-
goo簡単HP。バナーのサイズつい...
-
Excel2010マクロ/挿入した画像...
-
gooブログでのサムネイル画像サ...
-
wordpressのスライドにつきまして
-
Blogger/アップロードの画像サ...
-
ファインピクス撮った画像を小...
-
ワードプレス
-
画像リンクを別ウインドウでサ...
-
アメーバブログのアメンバー限...
-
写真が大きくならない
-
macbookairで複数写真のサイズ...
-
スマホ用ホームページのヘッダ...
-
GIFアニメ画像のサイズの変換
-
このアプリの質問に回答する時...
おすすめ情報