【2026年】Shopifyでブログスライダーを表示する方法は？おすすめアプリも紹介！
目次
- はじめに
- 記事の構成
- Shopify でブログスライダーを表示できる？
- ブログスライダーを表示するメリット・デメリット
- テーマのコード編集とアプリ導入の比較
- おすすめ Shopify アプリ「シンプルお知らせスライダー｜お手軽ブログ一覧スライダー」紹介
- アプリのインストール手順
- アプリをテーマに追加（有効化）
- アプリの設定項目を理解する
- すぐ使えるおすすめ設定例
- 関連施策との組み合わせ
- テーマのコード編集で実装する場合のサンプルコード
- 運用のコツ
- よくある質問
- まとめ
- 参考記事
はじめに
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・タブレット・スマホに自動で最適化される
- アップデートで機能改善：開発元がアプリを改善・メンテナンスしてくれる
- サポートが受けられる：困ったときに開発元に問い合わせできる
デメリット：
- 月額料金が発生する：アプリによっては月額費用がかかる
- カスタマイズの自由度に限りがある場合がある：アプリが提供する設定項目の範囲内でのカスタマイズになる
結論：最初はアプリで小さく試すのがおすすめ
どちらを選ぶか迷ったら、まずはアプリで導入してみるのがおすすめです。
理由はシンプルで、アプリなら数分で導入でき、無料体験期間を使えばコストをかけずに効果を試せるからです。実際にスライダーを設置してみて、「やっぱり細かいカスタマイズがしたい」と感じたら、その時点でコード実装に切り替えても遅くありません。
また、コード実装はテーマとの相性問題や、テーマアップデート時のメンテナンスなど、運用面でのリスクも伴います。ストア運営の負担を最小限にしたいなら、アプリの活用が合理的です。
この記事では、おすすめのアプリとして「シンプルお知らせスライダー｜お手軽ブログ一覧スライダー」を紹介しつつ、後半ではコード実装のサンプルコードも掲載しています。
おすすめ Shopify アプリ「シンプルお知らせスライダー｜お手軽ブログ一覧スライダー」紹介
「シンプルお知らせスライダー｜お手軽ブログ一覧スライダー」は、UnReact Inc. が開発した Shopify アプリです。ブログ記事をスライダー形式でストアに表示でき、コーディング不要でテーマエディタから簡単にカスタマイズできます。
アプリの基本情報
| 項目 | 内容 |
|---|---|
| アプリ名 | シンプルお知らせスライダー｜お手軽ブログ一覧スライダー |
| 開発者 | UnReact Inc. |
| 価格 | $3.99/月（7 日間無料体験あり） |
| 年払い | $39.99/年（17%お得） |
| 対応言語 | 20 言語 |
| アプリストア | こちら |
| ご利用ガイド | こちら |
できること
このアプリでできることを、画像付きで詳しく紹介します。
ブログ記事をスライダー形式で表示
ストアに公開しているブログ記事を、スライダー形式で横にスクロールしながら閲覧できるようにします。トップページ、商品ページ、コレクションページなど、テーマエディタで配置できるセクションであればどこにでも追加可能です。
自動再生機能を有効にすれば、お客様が操作しなくても記事が次々と切り替わり、目を引く動きのあるセクションを作れます。矢印ナビゲーションやドットインジケーターも表示できるので、お客様が自分のペースで記事を閲覧することも可能です。
8 種類のスタイルプリセット
デザインのベースとなるスタイルプリセットが 8 種類用意されています。
- デフォルト：シンプルで万能なスタイル
- ミニマル：余白を活かしたすっきりとしたデザイン
- エレガント：洗練された上品な印象のデザイン
- ボールド：力強く目を引くデザイン
- マガジン：雑誌のようなレイアウト
- モダン：今っぽいスタイリッシュなデザイン
- クラシック：伝統的で落ち着いた印象のデザイン
- ソフト：柔らかく親しみやすいデザイン
プリセットを選ぶだけでデザインが大きく変わるので、ストアの雰囲気に合ったスタイルを簡単に見つけることができます。もちろん、プリセットを選んだ後に個別の設定を微調整することも可能です。
豊富なカスタマイズ項目
テーマエディタから、以下のような項目をノーコードでカスタマイズできます。
- コンテンツ設定：表示するブログの選択、見出しテキスト、一覧リンクの表示、表示記事数、タグ表示の有無
- スライダー設定：自動再生、矢印ナビゲーション、ドットインジケーター、PC/タブレット/スマホごとのスライド表示数
- カード設定：画像の縦横比、抜粋の表示、「続きを読む」ボタンの表示
- 文字設定：見出し・タイトル・日付・抜粋の文字サイズと色
- レイアウト設定：スライド間の余白、カード背景色、角丸、影
- 追加の CSS：テーマエディタから直接 CSS を記述できる
デザインの細部まで調整できるので、どんなテーマにも馴染むスライダーを作ることができます。
ワンクリックでテーマに追加
アプリの管理画面にある「テーマに追加」ボタンをクリックするだけで、選択したテーマにスライダーブロックが自動で追加されます。テーマファイルを直接編集する必要がないので、初心者の方でも安心です。
デバイスごとのスライド数設定
PC・タブレット・スマートフォンのそれぞれで、一度に表示するスライド数を個別に設定できます。たとえば PC では 4 枚、タブレットでは 2 枚、スマホでは 1 枚というように、画面サイズに応じた最適な表示を実現できます。
20 言語対応
アプリの管理画面とテーマエディタの設定項目は、日本語・英語をはじめとする 20 言語に対応しています。越境 EC（海外向けストア）を運営している方にも安心してお使いいただけます。
アプリのインストール手順
ここからは、「シンプルお知らせスライダー｜お手軽ブログ一覧スライダー」のインストール手順を画像付きで解説します。
ステップ 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」
関連施策との組み合わせ
ブログスライダーは単体でも効果がありますが、他のマーケティング施策と組み合わせることで、さらに大きな成果を得られます。
メールマーケティングとの連携
ブログ記事を書いたら、メールマガジンやニュースレターでもその記事を紹介しましょう。メールからストアに訪れたお客様が、スライダーで他の記事にも興味を持ってくれれば、ストアの回遊率がアップします。
具体的な施策例：
- 新着記事をメールマガジンで配信し、記事ページからストアトップへ誘導
- メールで紹介した記事がスライダーにも表示されるようにして、一貫性のある情報発信を実現
- Shopify のメールマーケティングアプリ（Shopify Email など）と併用
SNS 連携
ブログ記事を SNS（Instagram、X、Facebook など）でシェアすることで、SNS からストアへの流入を増やせます。ストアに訪れたお客様がスライダーで他の記事を発見し、さらに興味を持ってくれる好循環が生まれます。
具体的な施策例：
- Instagram のストーリーズやフィードでブログ記事を紹介
- X（旧 Twitter）で記事のハイライトを投稿
- ブログ記事に SNS シェアボタンを設置
SEO 対策としてのブログ活用
ブログ記事は SEO（検索エンジン最適化）において非常に有効な施策です。ターゲットキーワードを含む質の高い記事を定期的に投稿することで、Google などの検索エンジンからの流入を増やせます。
スライダーで新着記事を目立たせることで、お客様に最新の記事を読んでもらいやすくなり、サイト全体の滞在時間やページビュー数の向上にもつながります。これらの指標は SEO にもプラスに働きます。
具体的な施策例：
- 商品に関連するキーワードでブログ記事を作成
- 記事内に関連商品へのリンクを設置
- 定期的に記事を更新して、検索エンジンからの評価を維持
- ロングテールキーワードを狙った記事を量産し、スライダーで最新記事をアピール
お知らせバナーとの併用
ストアに重要なお知らせ（セール情報、送料無料キャンペーンなど）がある場合は、ヘッダー付近のバナーとブログスライダーを併用すると効果的です。
バナーでは「今週末まで全品 10%OFF！」のような短いメッセージを表示し、スライダーでは詳細な記事（対象商品一覧、セールの詳細ルールなど）に誘導するという使い分けができます。
具体的な施策例：
- ヘッダーバナーで「新着情報あり！」と告知し、スライダーで詳細記事に誘導
- 季節のキャンペーン時にバナーとブログスライダーの両方を活用
- お知らせバナーアプリ（Shopify アプリストアで入手可能）と併用
テーマのコード編集で実装する場合のサンプルコード
ここでは、テーマのコードを直接編集してブログスライダーを実装する方法を紹介します。プログラミングの知識がある方向けの内容です。
注意：コード編集を行う前に、必ずテーマのバックアップ（テーマの複製）を取ってください。
実装の流れ
- テーマエディタで新しい 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 つのページに複数のスライダーを設置できます。たとえば、ページ上部に「お知らせ」のスライダー、ページ下部に「スタッフブログ」のスライダーを配置するといった使い方ができます。
まとめ
この記事では、Shopify ストアにブログスライダーを表示する方法を、アプリ導入とコード実装の両面から解説しました。
ブログスライダーを導入するメリット：
- お客様の回遊率がアップする
- お知らせや新着情報を効率的に伝えられる
- ストアの見た目がプロフェッショナルになる
- スマホでも快適に閲覧できる
- ブログ記事の PV を増やしやすい
導入方法の選び方：
- 手軽にすぐ始めたい方 → アプリ導入がおすすめ
- 完全にカスタマイズしたい方 → コード実装を検討
おすすめのアプリ「シンプルお知らせスライダー｜お手軽ブログ一覧スライダー」は、8 種類のスタイルプリセットと豊富なカスタマイズ項目を備えており、コーディング不要で簡単にブログスライダーを設置できます。7 日間の無料体験期間があるので、まずは気軽に試してみてください。
ブログスライダーを活用して、ストアの情報発信力と集客力をアップさせましょう。
.png?w=400){kind=icon}
