プラグインのインストール方法については、店長のこちらの記事を参照してください：Swiper Bar

美化の微調整を行う前に、ご自身のブログが Hexo フレームワークと Butterfly テーマを使用していることを確認してください。他のフレームワークやテーマでは適用できない場合があります。

スタイルコードの追加

カスタム CSS ファイルに以下のスタイルコードを追加してください：

/* 文章置顶滚动栏(店长) */
.blog-slider {
  height: 260px !important;
}

.blog-slider__img {
  width: 40% !important;
  height: 100% !important;
}

@media screen and (max-width: 600px) {
  .blog-slider {
    padding: 0 !important;
  }

  .blog-slider__img {
    width: 100% !important;
    height: 40% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

上記のコードは、PC 側の記事カバー画像を正方形から長方形に調整し、モバイル側では左右の枠いっぱいに覆うようにして、より見栄えよくするものです。

上記の既存要素の中から、あるいはご自身で F12 を押して 开发者工具 を使い、対応する要素の ID を探して、お好みのスタイルコードを追加していくことができます。

ビフォー・アフター

PC 側

调整前

调整后

モバイル側

调整前

调整后

謝辞

Akilarの糖果屋：SwiperBar