2023.7.31 追記

Swiper のアップデート によりこのページのスライダーが正常動作しなくなっていますが、このページは2年以上前に行った検証の記録なので、スライダー動作の修正等を行っていません。

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

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>

新着情報

2024年1月24日カスタマイズ

タイトルを縦書きでブロックを左右交互にレイアウトした賃貸物件サイト例

2023年7月23日VK Blocks Pro

VK 投稿リストでカスタム分類のタームを親→子の順に表示した例

2023年6月20日ExUnit

VK 最近の投稿ウィジェットでクエリを改変するフィルターフック

2023年6月13日ExUnit

個々の記事ごとに Google 広告の表示・非表示を切り替えるカスタマイズ事例

2023年5月17日Lightning G3

グローバルナビのロゴ画像を中央に配置したカスタマイズ例

2023年5月2日WordPress

アーカイブページのカスタマイズ例いくつか (賃貸物件など)

2023年2月14日VK Blocks Pro

スライダーに丸抜き画像+テキストのメニューを重ねたカスタマイズ例

2023年1月30日VK Blocks Pro

投稿リスト(アーカイブページ)のカスタマイズ例 - VK Blocks Pro

2023年1月30日VK Blocks Pro

投稿リスト(アーカイブページ)のカスタマイズ前 - VK Blocks Pro

2023年1月25日VK Blocks Pro

VK Blocks Pro 1.49.0 の新機能「カスタムブロックスタイル設定」

カルーセル

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