【2026年】Shopifyでブログスライダーを表示する方法は？おすすめアプリも紹介！

はじめに
記事の構成
Shopify でブログスライダーを表示できる？
ブログスライダーを表示するメリット・デメリット
- メリット
- デメリット
テーマのコード編集とアプリ導入の比較
おすすめ Shopify アプリ「シンプルお知らせスライダー｜お手軽ブログ一覧スライダー」紹介
- アプリの基本情報
- できること
アプリのインストール手順
アプリをテーマに追加（有効化）
- 方法 1：自動追加（おすすめ）
- 方法 2：手動追加
アプリの設定項目を理解する
すぐ使えるおすすめ設定例
関連施策との組み合わせ
テーマのコード編集で実装する場合のサンプルコード
運用のコツ
よくある質問
まとめ
参考記事

はじめに

Shopify でネットショップを運営していると、「ブログ記事やお知らせをもっと目立たせたい」と思ったことはありませんか？

トップページや商品ページにブログ一覧をスライダー形式で表示すれば、お客様の目に留まりやすくなり、ストア全体の回遊率アップにもつながります。新着情報やキャンペーン告知、商品の使い方記事などをスライダーでコンパクトに見せることで、ページの見栄えもぐっと良くなります。

しかし、Shopify の標準テーマにはブログスライダー機能が搭載されていないものが多く、「どうやって実現すればいいの？」と悩む方も多いでしょう。

この記事では、Shopify ストアにブログスライダーを表示する方法を、アプリ導入からコード実装まで徹底的に解説します。初心者の方でもすぐに実践できるよう、画像付きのステップバイステップガイドもご用意しました。

参考記事：

記事の構成

この記事は以下の流れで解説します。

Shopify でブログスライダーを表示できるのか？ — 実現方法の全体像を把握
ブログスライダーを表示するメリット・デメリット — 導入前に知っておきたいポイント
テーマのコード編集とアプリ導入の比較 — どちらが自分に合っているか判断
おすすめアプリの紹介 — 「シンプルお知らせスライダー｜お手軽ブログ一覧スライダー」を詳しく解説
アプリのインストール手順 — 画像付きでステップバイステップで説明
アプリの設定項目を理解する — 各設定を画像付きで詳しく解説
すぐ使えるおすすめ設定例 — コピペで使えるテンプレート付き
関連施策との組み合わせ — ブログスライダーの効果を最大化する方法
テーマのコード編集で実装する場合のサンプルコード — Liquid/CSS/JavaScript の実装例
運用のコツとよくある質問 — 長期的に成果を出すためのヒント

それでは、順番に見ていきましょう。

Shopify でブログスライダーを表示できる？

結論から言うと、Shopify でブログスライダーを表示することは十分に可能です。

実現する方法は大きく分けて 2 つあります。

方法 1：テーマのコード編集で実装する

Shopify テーマの Liquid テンプレートを直接編集し、HTML/CSS/JavaScript を使ってスライダーを自作する方法です。自由度は高いですが、プログラミングの知識が必要になります。

方法 2：Shopify アプリを導入する

Shopify アプリストアからブログスライダー用のアプリをインストールする方法です。コーディング不要で、テーマエディタから直感的にカスタマイズできます。初心者の方でもすぐに導入できるのが大きなメリットです。

どちらの方法にもメリット・デメリットがありますので、まずはブログスライダーを表示すること自体のメリット・デメリットを確認してから、自分に合った方法を選びましょう。

ブログスライダーを表示するメリット・デメリット

メリット

1. お客様の回遊率がアップする

ブログ記事をスライダーで目立つ位置に配置することで、お客様が自然と記事をクリックしてくれるようになります。1 人あたりの閲覧ページ数が増えれば、ストア全体の滞在時間も伸び、購買意欲の向上にもつながります。

特にトップページにブログスライダーを設置すると、初めて訪れたお客様にも「このお店は情報発信をしっかりしているな」という信頼感を与えることができます。

2. お知らせや新着情報を効率的に伝えられる

セールの告知、新商品の入荷情報、キャンペーンのお知らせなど、タイムリーな情報をスライダーでコンパクトに表示できます。ページの限られたスペースを有効活用しながら、複数の記事をお客様に届けることが可能です。

「お知らせ一覧ページに飛ばないと情報が見られない」という状況を解消し、お客様が最新情報を見逃すリスクを減らせます。

3. ストアの見た目がプロフェッショナルになる

スライダーはデザイン性の高い UI 要素です。単純なブログ一覧の縦並びよりも、横にスライドする動きのあるレイアウトの方が、お客様に「しっかり作り込まれたストアだ」と感じてもらえます。

ブランドイメージの向上にもつながり、他のストアとの差別化にも効果的です。

4. スマホでも快適に閲覧できる

スライダー形式であれば、スマートフォンの小さな画面でも横にスワイプするだけで複数の記事を閲覧できます。縦に長いページをスクロールし続ける必要がなく、お客様の操作負担を軽減できます。

特にスマホからの購入が多い Shopify ストアでは、モバイルフレンドリーな UI は非常に重要です。

5. ブログ記事の PV を増やしやすい

せっかく書いたブログ記事も、ブログページに直接アクセスしないと読んでもらえないケースが多いです。スライダーでトップページや商品ページに記事を表示すれば、普段ブログページを訪れないお客様にも記事を届けることができます。

SEO で集客した記事の効果を、ストア内の回遊にもつなげることが可能です。

デメリット

1. ページの読み込み速度に影響する可能性がある

スライダーには JavaScript や画像の読み込みが伴うため、実装方法によってはページの表示速度が遅くなることがあります。特に画像の最適化をしていない場合や、重い JavaScript ライブラリを使用している場合は注意が必要です。

ただし、最近のアプリは軽量に設計されているものが多く、適切なアプリを選べば速度への影響は最小限に抑えられます。

2. 記事の定期的な更新が必要

スライダーに古い記事ばかりが表示されていると、逆に「更新されていないストアだな」というネガティブな印象を与えてしまいます。ブログスライダーを設置する場合は、定期的にブログ記事を投稿する運用体制が求められます。

3. 設定やデザイン調整に時間がかかることがある

コード編集で実装する場合は、テーマとの相性やレスポンシブ対応など、調整に時間がかかることがあります。アプリを使う場合でも、ストアのデザインに合わせたカスタマイズにはある程度の試行錯誤が必要です。

テーマのコード編集とアプリ導入の比較

ブログスライダーの実現方法として、「テーマのコード編集」と「アプリ導入」の 2 つを紹介しました。それぞれの特徴を詳しく比較してみましょう。

テーマのコード編集で実装する方法

メリット：

完全な自由度：デザインや動作を 100%自分の思い通りに作れる
追加コストなし：月額料金が発生しない
外部依存なし：アプリのサポート終了やアップデートの影響を受けない

デメリット：

プログラミング知識が必須：Liquid、CSS、JavaScript の知識が必要
テーマアップデートで上書きされるリスク：テーマを更新すると、カスタムコードが消える可能性がある
メンテナンスの手間：不具合が発生した場合、自分で修正する必要がある
レスポンシブ対応が大変：PC・タブレット・スマホそれぞれに対応するコードを書く必要がある

アプリを導入する方法

メリット：

コーディング不要：テーマエディタから直感的に設定できる
すぐに導入できる：インストールからテーマへの追加まで数分で完了
レスポンシブ対応済み：PC・タブレット・スマホに自動で最適化される
アップデートで機能改善：開発元がアプリを改善・メンテナンスしてくれる
サポートが受けられる：困ったときに開発元に問い合わせできる

デメリット：

月額料金が発生する：アプリによっては月額費用がかかる
カスタマイズの自由度に限りがある場合がある：アプリが提供する設定項目の範囲内でのカスタマイズになる

結論：最初はアプリで小さく試すのがおすすめ

どちらを選ぶか迷ったら、まずはアプリで導入してみるのがおすすめです。

理由はシンプルで、アプリなら数分で導入でき、無料体験期間を使えばコストをかけずに効果を試せるからです。実際にスライダーを設置してみて、「やっぱり細かいカスタマイズがしたい」と感じたら、その時点でコード実装に切り替えても遅くありません。

また、コード実装はテーマとの相性問題や、テーマアップデート時のメンテナンスなど、運用面でのリスクも伴います。ストア運営の負担を最小限にしたいなら、アプリの活用が合理的です。

この記事では、おすすめのアプリとして「シンプルお知らせスライダー｜お手軽ブログ一覧スライダー」を紹介しつつ、後半ではコード実装のサンプルコードも掲載しています。

項目	内容
アプリ名	シンプルお知らせスライダー｜お手軽ブログ一覧スライダー
開発者	UnReact Inc.
価格	$6.99/月（7 日間無料体験あり）
年払い	$69.90/年（17%お得）
対応言語	20 言語
アプリストア	こちら
ご利用ガイド	こちら

アプリのインストール手順

ここからは、「シンプルお知らせスライダー｜お手軽ブログ一覧スライダー」のインストール手順を画像付きで解説します。

ステップ 1：Shopify 管理画面の「設定」をクリック

まず、Shopify の管理画面にログインし、左下にある「設定」をクリックします。

設定クリック

ステップ 2：「アプリと販売チャネル」を開く

設定画面の左メニューから「アプリと販売チャネル」をクリックします。

アプリと販売チャネル

ステップ 3：Shopify App Store で検索

「Shopify App Store」のリンクをクリックしてアプリストアに移動し、検索バーに「シンプルお知らせスライダー」または「UnReact」と入力して検索します。

検索結果

検索結果から「シンプルお知らせスライダー｜お手軽ブログ一覧スライダー」を見つけてクリックします。

または、以下のリンクから直接アプリページにアクセスすることもできます。

https://apps.shopify.com/sa-104-ur-blog-slider-app

ステップ 4：「インストール」ボタンをクリック

アプリのページが表示されたら、「インストール」ボタンをクリックします。

インストールボタン

ステップ 5：権限を確認してインストール

アプリがアクセスする権限の確認画面が表示されます。内容を確認し、「インストール」ボタンをクリックしてインストールを完了します。

権限確認

ステップ 6：アプリの管理画面を確認

インストールが完了すると、アプリの管理画面が表示されます。ここから「テーマに追加」をクリックして、ストアにスライダーを追加できます。

アプリ管理画面

以上でインストールは完了です。次のセクションで、テーマへの追加方法を説明します。

アプリをテーマに追加（有効化）

アプリをインストールしただけでは、まだストアにスライダーは表示されません。テーマにアプリブロックを追加して有効化する必要があります。

方法 1：自動追加（おすすめ）

アプリの管理画面にある「テーマに追加」ボタンをクリックするだけで、選択したテーマにスライダーが自動で追加されます。

テーマ追加ボタン

テーマエディタが開いたら、スライダーブロックが追加されていることを確認し、「保存」ボタンをクリックして変更を確定します。

テーマエディタ保存

方法 2：手動追加

テーマエディタから手動でアプリブロックを追加することもできます。

Shopify 管理画面から「オンラインストア」→「テーマ」を開く
使用中のテーマの「カスタマイズ」をクリック
テーマエディタの左サイドバーで「セクションを追加」をクリック
「アプリ」カテゴリから「シンプルお知らせスライダー｜お手軽ブログ一覧スライダー」を選択
「保存」をクリック

手動追加の場合は、セクションの表示位置をドラッグ＆ドロップで自由に変更できます。ヘッダーの直下やフッターの直上など、お好みの位置に配置してください。

アプリの設定項目を理解する

テーマエディタでスライダーブロックを選択すると、左サイドバーにさまざまな設定項目が表示されます。ここでは、各設定項目を詳しく解説します。

スタイルプリセット

スタイルプリセット設定

スタイルプリセットでは、スライダー全体のデザインテーマを選択できます。8 種類のプリセットが用意されており、選択するだけで文字サイズ、配色、レイアウトなどが一括で変更されます。

プリセット名	特徴	おすすめの用途
デフォルト	シンプルで使いやすい	どんなストアにも合う
ミニマル	余白を活かしたすっきりデザイン	シンプルなブランド向け
エレガント	洗練された上品な印象	ジュエリー・コスメ系
ボールド	力強く目を引くデザイン	スポーツ・アウトドア系
マガジン	雑誌のようなレイアウト	ニュース・メディア系
モダン	スタイリッシュで今っぽい	テック・デザイン系
クラシック	伝統的で落ち着いた印象	老舗ブランド向け
ソフト	柔らかく親しみやすい	ベビー・ナチュラル系

プリセットはデザインの出発点として使い、その後に個別の設定で微調整するのがおすすめです。

コンテンツ設定

コンテンツ設定では、スライダーに表示する内容を制御します。

ブログ選択：ストアに作成済みのブログから、表示するブログを選択します。「ニュース」「お知らせ」「スタッフブログ」など、複数のブログがある場合はここで切り替えます。
見出し：スライダーセクションの上部に表示されるタイトルテキストです。「お知らせ」「新着記事」「スタッフブログ」など、自由に設定できます。
一覧リンクの表示：「すべての記事を見る」などのリンクを表示するかどうかを設定します。
表示記事数：スライダーに表示する記事の最大数を設定します。
タグの表示：各記事カードにタグを表示するかどうかを設定します。

スライダー設定

スライダーの動作に関する設定です。

自動再生：スライダーを自動的にスクロールさせるかどうかを設定します。有効にすると、お客様が操作しなくても記事が切り替わります。
自動再生の間隔：自動再生時にスライドが切り替わる秒数を設定します。
矢印ナビゲーション：左右の矢印ボタンを表示するかどうかを設定します。
ドットインジケーター：スライダーの下部にドット（ページネーション）を表示するかどうかを設定します。
PC でのスライド数：パソコンで一度に表示するスライド数を設定します（例：4 枚）。
タブレットでのスライド数：タブレットで一度に表示するスライド数を設定します（例：2 枚）。
スマホでのスライド数：スマートフォンで一度に表示するスライド数を設定します（例：1 枚）。

カード設定

各記事カードの表示内容を設定します。

画像の縦横比：記事のサムネイル画像の比率を設定します。「16:9」「4:3」「1:1」「3:4」などから選択できます。
抜粋の表示：記事の冒頭部分（抜粋テキスト）を表示するかどうかを設定します。
「続きを読む」ボタン：記事カードに「続きを読む」ボタンを表示するかどうかを設定します。

文字設定

テキストの見た目を細かく調整できます。

見出しの文字サイズ：セクション見出し（「お知らせ」「新着記事」など）の文字サイズ
見出しの文字色：セクション見出しの色
タイトルの文字サイズ：各記事カードのタイトルの文字サイズ
タイトルの文字色：各記事カードのタイトルの色
日付の文字サイズ：記事の公開日の文字サイズ
日付の文字色：記事の公開日の色
抜粋の文字サイズ：抜粋テキストの文字サイズ
抜粋の文字色：抜粋テキストの色

レイアウト設定

スライダー全体のレイアウトに関する設定です。

スライド間の余白：各スライド（カード）の間のスペースを設定します。
カード背景色：各記事カードの背景色を設定します。
角丸：カードの角の丸みを設定します。値を大きくするほど、角が丸くなります。
影：カードに影（シャドウ）をつけるかどうかを設定します。影をつけると立体感が出ます。

追加の CSS

テーマエディタの設定項目だけでは実現できない細かなスタイル調整が必要な場合は、「追加の CSS」フィールドに CSS を直接記述できます。

たとえば、特定の要素のスタイルを変更したい場合は、以下のように記述します。

.blog-slider__title {
  font-weight: bold;
  text-decoration: underline;
}

CSS の知識がある方は、この機能を使ってさらに細かいカスタマイズが可能です。

すぐ使えるおすすめ設定例

ここでは、よくあるユースケースに合わせたおすすめの設定例を紹介します。そのまま真似するだけで、すぐに使えるスライダーが完成します。

お知らせセクション向け設定

ストアの最新ニュースやキャンペーン情報を伝えたい場合のおすすめ設定です。

設定項目	推奨値
スタイルプリセット	ミニマル
ブログ	「ニュース」または「お知らせ」
見出し	お知らせ
一覧リンク	表示する
表示記事数	6
自動再生	有効
自動再生の間隔	5 秒
矢印ナビゲーション	表示する
ドットインジケーター	表示する
PC でのスライド数	3
タブレットでのスライド数	2
スマホでのスライド数	1
画像の縦横比	16:9
抜粋の表示	表示しない
「続きを読む」ボタン	表示しない

お知らせセクションでは、タイトルと日付だけのシンプルな見せ方が効果的です。抜粋を非表示にすることで、コンパクトなカードになり、一度に多くの記事を表示できます。

設定項目	推奨値
スタイルプリセット	モダン
ブログ	「スタッフブログ」または任意のブログ
見出し	新着記事
一覧リンク	表示する
表示記事数	8
タグの表示	表示する
自動再生	無効
矢印ナビゲーション	表示する
ドットインジケーター	表示する
PC でのスライド数	4
タブレットでのスライド数	2
スマホでのスライド数	1
画像の縦横比	4:3
抜粋の表示	表示する
「続きを読む」ボタン	表示する

文言のテンプレ例

スライダーの見出しに使える文言のテンプレートです。ストアの雰囲気に合わせて選んでください。

お知らせ系：

「お知らせ」
「最新ニュース」
「インフォメーション」
「NEWS」
「What's New」

ブログ記事系：

「新着記事」
「スタッフブログ」
「読みもの」
「コラム」
「JOURNAL」
「BLOG」

商品関連系：

「使い方ガイド」
「スタイリング提案」
「お客様の声」
「HOW TO」

テーマのコード編集で実装する場合のサンプルコード

ここでは、テーマのコードを直接編集してブログスライダーを実装する方法を紹介します。プログラミングの知識がある方向けの内容です。

注意：コード編集を行う前に、必ずテーマのバックアップ（テーマの複製）を取ってください。

実装の流れ

テーマエディタで新しい Liquid セクションファイルを作成
CSS でスライダーのスタイルを定義
JavaScript でスライダーの動作を実装

Liquid テンプレートを追加

Shopify 管理画面から「オンラインストア」→「テーマ」→「コードを編集」を開き、sections フォルダに新しいファイル blog-slider.liquid を作成します。

{%- comment -%}
  ブログスライダーセクション
  ブログ記事をスライダー形式で表示するカスタムセクション
{%- endcomment -%}

{{ 'blog-slider.css' | asset_url | stylesheet_tag }}

<div class="blog-slider-section" id="blog-slider-{{ section.id }}">
  {% if section.settings.heading != blank %}
    <div class="blog-slider__header">
      <h2 class="blog-slider__heading">{{ section.settings.heading }}</h2>
      {% if section.settings.show_view_all %}
        <a href="{{ blogs[section.settings.blog].url }}" class="blog-slider__view-all">
          {{ section.settings.view_all_text }}
        </a>
      {% endif %}
    </div>
  {% endif %}

  <div class="blog-slider__container">
    <div class="blog-slider__track" id="slider-track-{{ section.id }}">
      {% assign blog = blogs[section.settings.blog] %}
      {% for article in blog.articles limit: section.settings.articles_count %}
        <div class="blog-slider__slide">
          <a href="{{ article.url }}" class="blog-slider__card">
            {% if article.image %}
              <div class="blog-slider__image-wrapper">
                <img
                  src="{{ article.image | image_url: width: 600 }}"
                  alt="{{ article.image.alt | escape }}"
                  class="blog-slider__image"
                  loading="lazy"
                  width="600"
                  height="{{ 600 | divided_by: article.image.aspect_ratio | round }}"
                >
              </div>
            {% endif %}
            <div class="blog-slider__content">
              <time class="blog-slider__date" datetime="{{ article.published_at | date: '%Y-%m-%d' }}">
                {{ article.published_at | date: '%Y/%m/%d' }}
              </time>
              <h3 class="blog-slider__title">{{ article.title }}</h3>
              {% if section.settings.show_excerpt and article.excerpt_or_content != blank %}
                <p class="blog-slider__excerpt">
                  {{ article.excerpt_or_content | strip_html | truncate: 80 }}
                </p>
              {% endif %}
              {% if section.settings.show_read_more %}
                <span class="blog-slider__read-more">{{ section.settings.read_more_text }}</span>
              {% endif %}
            </div>
          </a>
        </div>
      {% endfor %}
    </div>

    {% if section.settings.show_arrows %}
      <button class="blog-slider__arrow blog-slider__arrow--prev" aria-label="前へ" data-slider-prev="{{ section.id }}">
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
          <path d="M12.5 15L7.5 10L12.5 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </button>
      <button class="blog-slider__arrow blog-slider__arrow--next" aria-label="次へ" data-slider-next="{{ section.id }}">
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
          <path d="M7.5 15L12.5 10L7.5 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </button>
    {% endif %}
  </div>

  {% if section.settings.show_dots %}
    <div class="blog-slider__dots" id="slider-dots-{{ section.id }}"></div>
  {% endif %}
</div>

<script src="{{ 'blog-slider.js' | asset_url }}" defer></script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    new BlogSlider('{{ section.id }}', {
      autoplay: {{ section.settings.autoplay }},
      autoplayInterval: {{ section.settings.autoplay_interval }},
      slidesPerViewDesktop: {{ section.settings.slides_per_view_desktop }},
      slidesPerViewTablet: {{ section.settings.slides_per_view_tablet }},
      slidesPerViewMobile: {{ section.settings.slides_per_view_mobile }},
      showDots: {{ section.settings.show_dots }}
    });
  });
</script>

{% schema %}
{
  "name": "ブログスライダー",
  "settings": [
    {
      "type": "header",
      "content": "コンテンツ設定"
    },
    {
      "type": "blog",
      "id": "blog",
      "label": "ブログ"
    },
    {
      "type": "text",
      "id": "heading",
      "label": "見出し",
      "default": "新着記事"
    },
    {
      "type": "checkbox",
      "id": "show_view_all",
      "label": "「すべて見る」リンクを表示",
      "default": true
    },
    {
      "type": "text",
      "id": "view_all_text",
      "label": "「すべて見る」のテキスト",
      "default": "すべての記事を見る"
    },
    {
      "type": "range",
      "id": "articles_count",
      "label": "表示する記事数",
      "min": 3,
      "max": 12,
      "step": 1,
      "default": 6
    },
    {
      "type": "header",
      "content": "スライダー設定"
    },
    {
      "type": "checkbox",
      "id": "autoplay",
      "label": "自動再生",
      "default": false
    },
    {
      "type": "range",
      "id": "autoplay_interval",
      "label": "自動再生の間隔（秒）",
      "min": 2,
      "max": 10,
      "step": 1,
      "default": 5
    },
    {
      "type": "checkbox",
      "id": "show_arrows",
      "label": "矢印ナビゲーション",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_dots",
      "label": "ドットインジケーター",
      "default": true
    },
    {
      "type": "range",
      "id": "slides_per_view_desktop",
      "label": "PC でのスライド数",
      "min": 2,
      "max": 5,
      "step": 1,
      "default": 4
    },
    {
      "type": "range",
      "id": "slides_per_view_tablet",
      "label": "タブレットでのスライド数",
      "min": 1,
      "max": 3,
      "step": 1,
      "default": 2
    },
    {
      "type": "range",
      "id": "slides_per_view_mobile",
      "label": "スマホでのスライド数",
      "min": 1,
      "max": 2,
      "step": 1,
      "default": 1
    },
    {
      "type": "header",
      "content": "カード設定"
    },
    {
      "type": "checkbox",
      "id": "show_excerpt",
      "label": "抜粋を表示",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_read_more",
      "label": "「続きを読む」ボタンを表示",
      "default": true
    },
    {
      "type": "text",
      "id": "read_more_text",
      "label": "「続きを読む」のテキスト",
      "default": "続きを読む"
    }
  ],
  "presets": [
    {
      "name": "ブログスライダー"
    }
  ]
}
{% endschema %}

CSS を追加

assets フォルダに blog-slider.css を作成します。

/* ブログスライダー - 基本スタイル */
.blog-slider-section {
  padding: 40px 0;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

.blog-slider__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding: 0 16px;
}

.blog-slider__heading {
  font-size: 24px;
  font-weight: 600;
  margin: 0;
  color: #1a1a1a;
}

.blog-slider__view-all {
  font-size: 14px;
  color: #666;
  text-decoration: none;
  transition: color 0.2s ease;
}

.blog-slider__view-all:hover {
  color: #1a1a1a;
  text-decoration: underline;
}

/* スライダーコンテナ */
.blog-slider__container {
  position: relative;
  overflow: hidden;
  padding: 0 16px;
}

.blog-slider__track {
  display: flex;
  transition: transform 0.4s ease;
  gap: 16px;
}

.blog-slider__slide {
  flex: 0 0 calc(25% - 12px);
  min-width: 0;
}

/* 記事カード */
.blog-slider__card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.blog-slider__card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.blog-slider__image-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  overflow: hidden;
}

.blog-slider__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-slider__content {
  padding: 16px;
}

.blog-slider__date {
  display: block;
  font-size: 12px;
  color: #888;
  margin-bottom: 8px;
}

.blog-slider__title {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 8px;
  color: #1a1a1a;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-slider__excerpt {
  font-size: 13px;
  color: #666;
  margin: 0 0 12px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-slider__read-more {
  font-size: 13px;
  color: #1a1a1a;
  font-weight: 500;
  text-decoration: underline;
}

/* 矢印ナビゲーション */
.blog-slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #ddd;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.blog-slider__arrow:hover {
  background: #f5f5f5;
  border-color: #999;
}

.blog-slider__arrow--prev {
  left: 0;
}

.blog-slider__arrow--next {
  right: 0;
}

/* ドットインジケーター */
.blog-slider__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}

.blog-slider__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ddd;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease;
  padding: 0;
}

.blog-slider__dot.active {
  background: #1a1a1a;
}

/* レスポンシブ */
@media (max-width: 1024px) {
  .blog-slider__slide {
    flex: 0 0 calc(50% - 8px);
  }
}

@media (max-width: 768px) {
  .blog-slider-section {
    padding: 24px 0;
  }

  .blog-slider__heading {
    font-size: 20px;
  }

  .blog-slider__slide {
    flex: 0 0 100%;
  }

  .blog-slider__arrow {
    width: 32px;
    height: 32px;
  }
}

JavaScript を追加

assets フォルダに blog-slider.js を作成します。

/**
 * ブログスライダー
 * ブログ記事をスライダー形式で表示するためのクラス
 */
class BlogSlider {
  constructor(sectionId, options) {
    this.sectionId = sectionId;
    this.options = Object.assign(
      {
        autoplay: false,
        autoplayInterval: 5,
        slidesPerViewDesktop: 4,
        slidesPerViewTablet: 2,
        slidesPerViewMobile: 1,
        showDots: true,
      },
      options,
    );

    this.track = document.getElementById('slider-track-' + sectionId);
    this.dotsContainer = document.getElementById('slider-dots-' + sectionId);
    this.currentIndex = 0;
    this.autoplayTimer = null;

    if (!this.track) return;

    this.slides = this.track.querySelectorAll('.blog-slider__slide');
    this.totalSlides = this.slides.length;

    this.init();
  }

  /** スライダーを初期化する */
  init() {
    this.updateSlidesPerView();
    this.createDots();
    this.bindEvents();

    if (this.options.autoplay) {
      this.startAutoplay();
    }

    window.addEventListener('resize', this.handleResize.bind(this));
  }

  /** 画面幅に応じた表示数を取得する */
  updateSlidesPerView() {
    var width = window.innerWidth;
    if (width <= 768) {
      this.slidesPerView = this.options.slidesPerViewMobile;
    } else if (width <= 1024) {
      this.slidesPerView = this.options.slidesPerViewTablet;
    } else {
      this.slidesPerView = this.options.slidesPerViewDesktop;
    }
    this.maxIndex = Math.max(0, this.totalSlides - this.slidesPerView);
  }

  /** ドットインジケーターを生成する */
  createDots() {
    if (!this.dotsContainer || !this.options.showDots) return;

    this.dotsContainer.innerHTML = '';
    var dotCount = this.maxIndex + 1;

    for (var i = 0; i < dotCount; i++) {
      var dot = document.createElement('button');
      dot.className = 'blog-slider__dot' + (i === 0 ? ' active' : '');
      dot.setAttribute('aria-label', i + 1 + '番目のスライドへ');
      dot.dataset.index = i;
      this.dotsContainer.appendChild(dot);
    }
  }

  /** イベントリスナーを設定する */
  bindEvents() {
    var self = this;

    // 矢印ボタン
    var prevBtn = document.querySelector('[data-slider-prev="' + this.sectionId + '"]');
    var nextBtn = document.querySelector('[data-slider-next="' + this.sectionId + '"]');

    if (prevBtn) {
      prevBtn.addEventListener('click', function () {
        self.prev();
      });
    }
    if (nextBtn) {
      nextBtn.addEventListener('click', function () {
        self.next();
      });
    }

    // ドットインジケーター
    if (this.dotsContainer) {
      this.dotsContainer.addEventListener('click', function (e) {
        if (e.target.classList.contains('blog-slider__dot')) {
          var index = parseInt(e.target.dataset.index, 10);
          self.goTo(index);
        }
      });
    }

    // タッチ操作
    var startX = 0;
    var endX = 0;

    this.track.addEventListener(
      'touchstart',
      function (e) {
        startX = e.touches[0].clientX;
      },
      { passive: true },
    );

    this.track.addEventListener(
      'touchend',
      function (e) {
        endX = e.changedTouches[0].clientX;
        var diff = startX - endX;
        if (Math.abs(diff) > 50) {
          if (diff > 0) {
            self.next();
          } else {
            self.prev();
          }
        }
      },
      { passive: true },
    );
  }

  /** 前のスライドに移動する */
  prev() {
    if (this.currentIndex > 0) {
      this.goTo(this.currentIndex - 1);
    }
  }

  /** 次のスライドに移動する */
  next() {
    if (this.currentIndex < this.maxIndex) {
      this.goTo(this.currentIndex + 1);
    } else if (this.options.autoplay) {
      this.goTo(0);
    }
  }

  /** 指定したインデックスのスライドに移動する */
  goTo(index) {
    this.currentIndex = Math.min(Math.max(0, index), this.maxIndex);

    var slideWidth = this.slides[0].offsetWidth;
    var gap = 16;
    var offset = this.currentIndex * (slideWidth + gap);
    this.track.style.transform = 'translateX(-' + offset + 'px)';

    this.updateDots();

    if (this.options.autoplay) {
      this.stopAutoplay();
      this.startAutoplay();
    }
  }

  /** ドットの状態を更新する */
  updateDots() {
    if (!this.dotsContainer) return;

    var dots = this.dotsContainer.querySelectorAll('.blog-slider__dot');
    dots.forEach(
      function (dot, i) {
        dot.classList.toggle('active', i === this.currentIndex);
      }.bind(this),
    );
  }

  /** 自動再生を開始する */
  startAutoplay() {
    var self = this;
    this.autoplayTimer = setInterval(function () {
      self.next();
    }, this.options.autoplayInterval * 1000);
  }

  /** 自動再生を停止する */
  stopAutoplay() {
    if (this.autoplayTimer) {
      clearInterval(this.autoplayTimer);
      this.autoplayTimer = null;
    }
  }

  /** リサイズ時の処理 */
  handleResize() {
    this.updateSlidesPerView();
    this.createDots();
    this.goTo(Math.min(this.currentIndex, this.maxIndex));
  }
}

コード実装の注意点

テーマのコードを編集してブログスライダーを実装する場合は、以下の点に注意してください。

1. テーマのバックアップを必ず取る

コード編集を行う前に、テーマを複製してバックアップを作成してください。万が一、コードにエラーがあった場合でも、バックアップから復元できます。

2. テーマアップデート時のコード消失に注意

テーマをアップデートすると、カスタムで追加したファイルが上書きされる可能性があります。テーマアップデート後は、カスタムコードが残っているか必ず確認しましょう。

3. パフォーマンスに配慮する

画像は loading="lazy" 属性を付けて遅延読み込みにし、JavaScript は defer 属性で非同期に読み込むようにしています。ただし、大量の記事を表示する場合はページの読み込み速度に影響する可能性があるため、表示記事数は適切な範囲に設定してください。

4. アクセシビリティへの配慮

矢印ボタンやドットインジケーターには aria-label を設定し、スクリーンリーダーでも操作可能にしています。セマンティックな HTML を意識してマークアップしてください。

5. 他のスライダーライブラリとの競合

テーマやその他のアプリがスライダーライブラリ（Swiper、Flickity など）を使用している場合、CSS や JavaScript が競合する可能性があります。クラス名はプレフィックスを付けてスコープを限定してください。

運用のコツ

ブログスライダーを導入した後、長期的に成果を出すための運用のコツを紹介します。

定期的にブログ記事を更新する

ブログスライダーの効果を最大限に引き出すためには、定期的にブログ記事を投稿することが重要です。目安として、最低でも月に 2〜3 記事は投稿するようにしましょう。古い記事ばかりが表示されていると、お客様に「このストアは活発じゃないな」と思われてしまいます。

サムネイル画像にこだわる

スライダーで最初に目に入るのはサムネイル画像です。高品質で統一感のある画像を使用することで、スライダー全体の見栄えが大きく向上します。画像のサイズやアスペクト比を統一すると、さらに美しいスライダーになります。

記事タイトルを工夫する

スライダーでは限られたスペースに記事タイトルが表示されるため、短くてインパクトのあるタイトルをつけましょう。「【新商品】春の新作コレクションが入荷しました！」のように、カテゴリや季節を冒頭に入れると目を引きやすくなります。

表示位置を工夫する

ブログスライダーはトップページの中段〜下段に配置するのが一般的ですが、ストアの目的に応じて最適な位置を見つけましょう。お知らせ系のスライダーはファーストビューに近い位置に、ブログ記事系のスライダーはメインコンテンツの下に配置するのがおすすめです。

アナリティクスで効果を測定する

Google Analytics などのツールを使って、ブログスライダー経由のクリック数やブログ記事のページビュー数を計測しましょう。データをもとに、表示する記事の内容やスライダーの設定を改善していくことで、より効果的な運用が可能になります。

よくある質問

Q1. ブログスライダーを設置すると、ページの読み込み速度は遅くなりますか？

A. アプリを使用する場合、軽量に設計されているため、速度への影響は最小限です。コード実装の場合も、画像の遅延読み込みや JavaScript の非同期読み込みを適切に設定すれば、大きな速度低下は防げます。ただし、大量の記事を一度に表示する設定にすると、画像の読み込みが増えて速度に影響する場合があります。表示記事数は 6〜8 枚程度がおすすめです。

Q2. スライダーにはどのブログの記事を表示できますか？

A. Shopify に作成済みのすべてのブログの記事を表示できます。「ニュース」「お知らせ」「スタッフブログ」など、テーマエディタでブログを選択するだけで切り替えが可能です。ただし、1 つのスライダーで表示できるのは 1 つのブログの記事のみです。複数のブログの記事を表示したい場合は、スライダーのセクションを複数設置してください。

Q3. スマートフォンでもスライダーは正常に動作しますか？

A. はい、正常に動作します。「シンプルお知らせスライダー｜お手軽ブログ一覧スライダー」はレスポンシブ対応しており、PC・タブレット・スマホのそれぞれで最適な表示になるよう自動調整されます。スライド数もデバイスごとに個別設定できるので、スマホでは 1 枚表示にするなど柔軟な対応が可能です。

Q4. 無料体験期間中に解約した場合、料金は発生しますか？

A. いいえ、発生しません。7 日間の無料体験期間中に解約すれば、料金は一切かかりません。まずは無料で試してみて、ストアに合うかどうかを確認してから継続するかを決められます。

Q5. テーマを変更した場合、スライダーの設定はどうなりますか？

A. テーマを変更した場合、新しいテーマにアプリブロックを再度追加する必要があります。ただし、アプリ自体はインストールされたままなので、再インストールの必要はありません。アプリの管理画面から「テーマに追加」をクリックするだけで、新しいテーマにもスライダーを追加できます。

Q6. 1 つのページに複数のスライダーを設置できますか？

A. はい、可能です。テーマエディタでアプリブロックのセクションを複数追加すれば、1 つのページに複数のスライダーを設置できます。たとえば、ページ上部に「お知らせ」のスライダー、ページ下部に「スタッフブログ」のスライダーを配置するといった使い方ができます。