実務で作っているサイトなので、実際の画像を見せることが難しくテキストベースになるのですが、
特定のセクション内の画像が急にぼやけて荒くなったり、ちょっとたつと高画質に戻ったりします。
該当エリアには「Swiper.js」というスライドショーのライブラリを使用しておりますが、その他のセクションも同じようにスライドショーが使われているにもかかわらず画像は綺麗な状態です。(該当のエリアのみです)
①読み込みに時間がかかっている
②コーディングがおかしい
③画像のサイズを2倍にしていない
③が濃厚かと思い対処しましたが、3倍以上のサイズにしているにもかかわらず依然として画質は荒いままでした。
となると①と②が濃厚になるのですが、如何せんこのようなケースに陥ったことがないので、
①はそうなると他のスライドショーのエリアもそうなるのではないかと思います。
②に関しては念の為Sassのコードを添付いたします。
皆様の知恵をお借りしたいと思います。
こういった現象が起こることはよくあるのでしょうか。
ちなみに該当エリアはWordPressのカスタムフィールドに入れた画像を出力されるような形式にしております。
(テーマフォルダ直下に入れている画像ではなく、WordPressのメディアライブラリに入っている画像ということです)
もし投稿内のカスタムフィールドに入れた画像があればそれを表示する、
なければ、アイキャッチ画像を表示する
それもなければnoimgを表示する
という記述にしているつもりです。
追記)今調査したもの
・スマホやタブレットは最初か高画質で表示される
・PCサイズのみ最初ガビガビしていて荒い → 更新すると画質が上がってガビガビが消える
または、高品質だったものが急にガビガビになる
・pngでもjpgでも同じようになってしまう。プログレッシブではない?
・画像サイズを2倍、3倍とあげても特に変換なし
このスタイルシートのimgが該当箇所になります、
// セクション | VOICE .Front-secVoice .voiceSlider-container padding-bottom: 8px position: relative overflow-x: hidden .swiper-wrapper .swiper-slide img width: 100% height: 265px object-fit: cover @media screen and (max-width: $pc-Width) height: 21vw div background-color: #fff width: 100% height: 180px letter-spacing: 0.03em padding: 8px 20px border-radius: 0 0 6px 6px box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16) .lessonCategory padding: 4px 8px display: inline-block font-size: 1rem line-height: 1 color: #fff background-color: $orange .courseCategory padding: 4px 8px display: inline-block font-size: 1rem line-height: 1 color: #fff background-color: $green .businessCategory padding: 4px 8px display: inline-block font-size: 1rem line-height: 1 color: #fff background-color: $blue .voicePostTitle margin: 8px 0 font-size: 1.4rem .continuation +f-Yugothic color: $gray font-weight: normal font-size: 1.2rem .swiper-button-prev +swiper-button-prev(50%,-1.5%) &::after position: relative right: -5px .swiper-button-next +swiper-button-next(50%,-1.5%) &::after position: relative left: -5px コード
<!-- VOICE | KonMari Method 体験者の声 --> <section class="Front-secVoice"> <div class="rowreverse-sp"> <h2 class="bold">VOICE</h2> <p>KonMari Method 体験者の声</p> </div> <!-- PC版スライドショー --> <div class="swiper-container voiceSlider-container"> <div class="swiper-wrapper"> <!-- 3種類のカスタム投稿をランダムで出力する --> <?php $postargs = array('lesson-voice','business-voice','procourse-voice'); $args = array( 'post_type' => $postargs, 'order' => 'DESC', 'posts_per_page' => -1, // 'orderby' => 'rand', ); $news_query = new WP_Query( $args ); if ( $news_query->have_posts() ): while ( $news_query->have_posts() ): $news_query->the_post(); $posttype = get_post_type(); ?> <!-- 3種類のカスタム投稿をランダムで出力する --> <!-- カスタム投稿のスライドショー --> <div class="swiper-slide"> <a href="<?php the_permalink(); ?>" class="<?php echo $posttype ;?>"> <?php if($posttype === 'lesson-voice'){ echo "<p class=\"lessonCategory spview\">LESSON</p>"; }else if($posttype === 'business-voice'){ echo "<p class=\"businessCategory spview\">For Business</p>"; }else if($posttype === 'procourse-voice'){ echo "<p class=\"courseCategory spview\">PRO COURSE</p>"; } ?> <?php $imagePost = get_field( 'postSquareTypeImage' ); if( $imagePost ) { echo wp_get_attachment_image( $imagePost ); } else if (has_post_thumbnail() ) { the_post_thumbnail(); } else { echo '<img src="' . esc_url(get_template_directory_uri()) . '/img/noimg.png" alt="">'; } ?> <div> <?php if($posttype === 'lesson-voice'){ echo "<p class=\"lessonCategory pcview\">LESSON</p>"; }else if($posttype === 'business-voice'){ echo "<p class=\"businessCategory pcview\">For Business</p>"; }else if($posttype === 'procourse-voice'){ echo "<p class=\"courseCategory pcview\">PRO COURSE</p>"; } ?> <p class="voicePostTitle bold"> <?php if(mb_strlen($post->post_title, 'UTF-8')>50){ $title= mb_substr($post->post_title, 0, 50, 'UTF-8'); echo $title.'<span class="continuation">... 続きを読む<span>'; }else{ echo $post->post_title; } ?> </p> </div> </a> </div> <?php endwhile; endif; wp_reset_postdata();?> <!-- カスタム投稿のスライドショー --> </div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> </section> <!-- VOICE | KonMari Method 体験者の声 --> コード






回答1件
あなたの回答
tips
プレビュー