働く若者
働く若者
働く若者
ロゴマーク

CLS の改善

以下の CSS を追加してスライダーの高さを確保している。

@media (min-width: 641px) {
.swiper-container-3 { height: calc( 100vw * ( 800 / 2000 ) ); }
}
@media (max-width: 640px) {
.swiper-container-3 { height: calc( 100vw * ( 373 / 640 ) ); }
}

画像の出し分け

img タグに width/height を追加している。

スライドのHTMLソースを以下のように記述して画面幅によって画像を出し分けている。

<picture>
  <source type="image/webp" media="(min-width: 641px)" srcset="https://lightning-g3.hp1.work/wp-content/uploads/2021/04/1-w.webp">
  <source type="image/webp" media="(min-width: 401px)" srcset="https://lightning-g3.hp1.work/wp-content/uploads/2021/04/1s.webp">
  <source type="image/webp" srcset="https://lightning-g3.hp1.work/wp-content/uploads/2021/04/1ss.webp">
  <source type="image/jpeg" media="(min-width: 641px)" srcset="https://lightning-g3.hp1.work/wp-content/uploads/2021/04/1-w.jpg">
  <source type="image/jpeg" media="(min-width: 401px)" srcset="https://lightning-g3.hp1.work/wp-content/uploads/2021/04/1s.jpg">
  <img src="https://lightning-g3.hp1.work/wp-content/uploads/2021/04/1ss.jpg" alt="働く若者" width="400" height="233">
</picture>

カルーセルのHTMLソースを以下のように記述して画面幅によって画像を出し分けている。

<picture>
  <source type="image/webp" media="(min-width: 401px)" srcset="https://lightning-g3.hp1.work/wp-content/uploads/2021/04/1s.webp">
  <source type="image/webp" srcset="https://lightning-g3.hp1.work/wp-content/uploads/2021/04/1ss.webp">
  <source type="image/jpeg" media="(min-width: 401px)" srcset="https://lightning-g3.hp1.work/wp-content/uploads/2021/04/1s.jpg">
  <img src="https://lightning-g3.hp1.work/wp-content/uploads/2021/04/1ss.jpg" alt="働く若者" width="400" height="233">
</picture>

新着情報

2022年5月10日VK Blocks Pro

アイコンメニュー 横並び・縦並び (VK パターンライブラリ)

2022年5月3日カスタマイズ

商品画像を使用したメガメニューのカスタマイズ事例③

2022年4月29日WordPress

画像とテキストを左右に並べてレイアウトするやり方の比較

2022年4月28日カスタマイズ

商品画像を使用したメガメニューのカスタマイズ事例②

2022年4月28日カスタマイズ

商品画像を使用したメガメニューのカスタマイズ事例①

2022年4月8日カスタマイズ

開催日を過ぎたイベントを自動的に削除するカスタマイズ

2022年4月4日VK Blocks Pro

グリッドカラムカードブロックで丸抜き画像に文字を重ねてみた

2022年4月3日VK Blocks Pro

【カスタマイズ例】スライダーで新着投稿をカルーセル表示

2022年3月30日VK Blocks Pro

丸抜き画像に文字を重ねたナビゲーションメニューの例 (カードブロック)

2022年3月26日VK Blocks Pro

[ 解決済 ] VK ボタン の Font Awesome のアイコンを大きくするとアイコンが消える

カルーセル

働く若者
働く若者
働く若者
働く若者
働く若者
働く若者