Bloggerに画像カルーセルを実装してみる

1. カルーセルのメリットとこのデザインの特徴

ウェブサイトで複数の画像や情報を効率よく見せるためには、限られたスペースを最大限に活用する工夫が必要です。カルーセルは、その代表的な手法のひとつです。

• 視覚的なインパクトが強い：ユーザーはスクロールせずとも次々と切り替わる画像や情報を見ることができ、サイト全体の印象をダイナミックに演出できます。
• コンテンツを整理して提示できる：複数の画像やテキストをひとつの枠内にまとめることで、ページがごちゃごちゃせず、ユーザーが必要な情報にスムーズにアクセスできます。
• レスポンシブ対応が容易：今回のサンプルは全幅表示に対応しており、スマホやタブレットでもカルーセルが最適化されて表示されます。画像が画面サイズに合わせてダイナミックに変化するため、ユーザー体験を損ないません。
• 導線を意識した設計が可能：トップページやギャラリーで注目してほしいコンテンツを順番に見せることで、クリックや詳細ページへの誘導を自然に行えます。
• 管理・更新も簡単：カルーセルの仕組みを導入すれば、新しい画像や情報を追加するだけで自動的にスライド表示されるため、更新作業の負担も軽減できます。

このページのサンプルカルーセルは、デザイン性と操作性を両立しており、どのコンテンツでもすぐに導入できるように構成しています。ユーザーが興味を持ちやすく、かつ情報を整理して提示できるため、サイトの見栄えと利便性を両方アップさせたい方には特におすすめです。

• 
• 
• 

2. HTML / CSS / JavaScript コード

HTML・CSS JavaScript

<div class="slider-container">
  <ul class="slider">
    <li><img src="画像URL"></li>
    <li><img src="画像URL"></li>
    <li><img src="画像URL"></li>
  </ul>
</div>

<style>
.slider-container {
  width: 100%;
  margin: 0 auto;
  /* ドットを下げた分、コンテナの下に余白を確保して記事本文と重ならないようにする */
  margin-bottom: 50px;
}

.slider {
  width: 100%;
  margin: 0;
  padding: 0;
}

.slider li {
  list-style: none;
}

.slider li img {
  width: 100%;
  height: auto;
  display: block;
}

/* dotsの中央揃えを維持しつつ、位置だけを下げる */
.slider .slick-dots {
  bottom: -40px !important; /* !importantでデフォルト値を上書き */
  left: 0;
  width: 100%;
  text-align: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

.slider .slick-dots li {
  display: inline-block;
  margin: 0 5px;
}
</style>
  

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

<script>
  $('.slider').slick({
    autoplay: true,
    dots: true,
    arrows: false,
    slidesToShow: 1,
    slidesToScroll: 1
  });
</script>