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

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年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

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

2022年10月21日VK Blocks Pro

スクロールボックスに VK 投稿リストを入れてみた

2022年9月15日Lightning G3

ヘッダーにコーポレートサイトのロゴ画像を追加したカスタマイズ例

2022年8月28日Lightning G3

Lightning のグローバルナビのサブメニューの開き方をカスタマイズ

2022年8月24日VK Blocks Pro

VK Blocks Pro のカードブロックでリンクエリアをカード全体に拡張する

カルーセル

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