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

CLS の改善

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

@media (max-width: 1200px) {
.swiper-container-1 { height: calc( 100vw * ( 233 / 400 ) ); }
}
@media (min-width: 1201px) {
.swiper-container-1 { height: calc( ( 100vw - 10px ) / 1.5 * ( 746 / 1280 ) ); }
}

画像の出し分け

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

<picture>
  <source type="image/webp" media="(min-width: 641px)" srcset="https://lightning-g3.hp1.work/wp-content/uploads/2021/04/1.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.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="働く若者">
</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="働く若者">
</picture>

新着情報

2022年11月23日VK Blocks Pro

VK Blocks Pro 1.46.0 の便利な新機能「カスタム CSS」New!!

2022年11月9日VK Blocks Pro

VK Blocks Pro 投稿リストの「テキスト1カラム風」カスタマイズ例

2022年11月8日VK Blocks Pro

投稿タイトルの前に新着表示したカスタマイズ例 (テキスト1カラム)

2022年11月5日VK Blocks Pro

投稿タイトルの前に新着表示したカスタマイズ例 (VK Blocks Pro・カード)

2022年11月5日VK Blocks Pro

全幅の Outer ブロック・カバーブロックの最大幅を指定する

2022年10月23日Lightning G3

スクロールに追従するフローティングバナー(半固定バナー)の実装例

カルーセル

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