Shopifyでデザイン性の高いブログスライダーを表示できるアプリについて徹底解説｜ご利用ガイド

株式会社UnReact

2026/04/11

はじめに

Shopify は、誰でも簡単にネットショップを開設・運営できる EC プラットフォームです。Shopify アプリを導入することで、ストアの機能をさらに拡張できます。

「シンプルお知らせスライダー｜お手軽ブログ一覧スライダー」は、ブログ記事をおしゃれなスライダー形式で表示できるアプリです。お知らせや新着情報をスライダーで見せることで、お客様に最新情報をスムーズに届けられます。8種類のスタイルプリセットからお店の雰囲気に合うデザインを選べるので、コーディング不要で簡単に設置できます。

料金

プラン名: Basic Plan
月額料金: $6.99/月
無料期間: インストールから7日間、無料でアプリをお試しいただけます
年払い: 年払いで実質2ヶ月分無料でお得にご利用いただけます

アプリストア

シンプルお知らせスライダー｜お手軽ブログ一覧スライダー

シンプルお知らせスライダー｜お手軽ブログ一覧スライダーのアプリストアヘッダー画像

「シンプルお知らせスライダー｜お手軽ブログ一覧スライダー」でできること

「シンプルお知らせスライダー｜お手軽ブログ一覧スライダー」を使えば、ブログ記事をスライダー形式でどのページにも配置できます。商品の使い方やブランドのお知らせなど、ブログで発信している情報をストアのトップページや商品ページに表示して、お客様に見てもらいやすくなります。

シンプルお知らせスライダー｜お手軽ブログ一覧スライダーのメイン画像

特徴

ブログ記事をスライダー形式で表示。8種類のスタイルプリセットから選べます。
自動再生、矢印ナビゲーション、ドットインジケーターをカスタマイズできます。
カード表示をカスタマイズ。画像比率、抜粋の長さ、続きを読むボタンを設定できます。
PC・タブレット・スマホで表示するスライド数を個別に設定できます。
追加CSSでより細かいスタイル調整が可能。コーディング知識は不要です。

ブログ記事をスライダー形式で表示できる！

ブログで公開した記事を、おしゃれなスライダーとしてストアのページに表示できます。お知らせや新着情報をお客様の目に留まりやすい形で届けられます。

ブログ記事をスライダー形式で表示している様子

全8種類のデザインパターンから、お好みのスタイルを選択可能！

デフォルト、ミニマル、エレガント、ボールド、マガジン、モダン、クラシック、ソフトの8種類のスタイルプリセットを用意しています。お店の雰囲気に合わせて、ワンクリックでデザインを切り替えられます。

全8種類のスタイルプリセットの選択画面

ノーコードで見た目を自由にカスタマイズできる！

テーマエディタからスライダーの表示設定を細かく調整できます。文字の大きさや色、カードの背景色、余白など、コーディングなしで自由にカスタマイズできます。

テーマエディタでのカスタマイズ画面

1クリックでテーマに追加！

アプリの管理画面からテーマを選んで「テーマに追加」をクリックするだけ。簡単にストアにスライダーを設置できます。

ワンクリックでテーマに追加する画面

アプリのインストール

アプリストア

シンプルお知らせスライダー｜お手軽ブログ一覧スライダー

料金

プラン名: Basic Plan
月額料金: $6.99/月
無料期間: インストールから7日間、無料でアプリをお試しいただけます
年払い: 年払いで実質2ヶ月分無料でお得にご利用いただけます

インストール手順

Shopify 管理画面の左下にある「設定」をクリックします。

設定をクリック

「アプリと販売チャネル」をクリックし、画面上部の「Shopify App Store」へ移動します。

アプリと販売チャネル画面からShopify App Storeへの遷移

検索窓に「シンプルお知らせスライダー」と入力し、表示されたアプリをクリックします。

アプリストアでの検索結果画面

アプリ詳細画面で「インストール」ボタンをクリックします。

アプリ詳細画面のインストールボタン

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

権限確認画面とインストール完了の様子

アプリブロックをテーマに追加

自動でテーマに追加（1クリック追加）

アプリの管理画面から、簡単にテーマにブロックを追加できます。

アプリの管理画面を開きます。

アプリ管理画面のトップページ

「テーマを選択」で追加したいテーマを選び、「テーマに追加」をクリックします。

テーマ選択とテーマに追加ボタンの画面

テーマエディタが開いたら、表示位置や設定を確認して「保存する」をクリックします。

テーマエディタでの保存ボタン

手動でテーマに追加（任意のページに設置したい場合）

トップページ以外のページにスライダーを配置したい場合は、テーマエディタから手動で追加できます。

Shopify 管理画面で「オンラインストア」→「テーマ」→「カスタマイズ」を開きます。
テーマエディタ上部のプルダウンから、スライダーを追加したいページ（商品ページ、コレクションページなど）に移動します。

テーマエディタのページ切り替えプルダウン

「セクションを追加」または「ブロックを追加」をクリックします。

セクションを追加ボタン

「アプリ」タブから「シンプルお知らせスライダー｜お手軽ブログ一覧スライダー」を選んで追加します。
表示を確認し、問題なければ「保存する」をクリックします。

保存する

ブログスライダーブロックのカスタマイズ

テーマエディタからスライダーの見た目や動作を細かく設定できます。以下の設定グループごとに解説します。

スタイルプリセット

スライダー全体のデザインをワンクリックで切り替えられます。お店のイメージに合ったスタイルを選びましょう。

設定名	説明
スタイルプリセット	スライダー全体のデザインを8種類から選べます。「デフォルト」「ミニマル」「エレガント」「ボールド」「マガジン」「モダン」「クラシック」「ソフト」の中から、お店の雰囲気に合うものを選んでください。

スタイルプリセットの設定画面

コンテンツ設定

表示するブログや見出し、一覧リンクなどの基本的なコンテンツに関する設定です。

設定名	説明
ブログを選択	スライダーに表示するブログを選びます。お知らせブログやニュースブログなど、表示したいブログを指定してください。
見出しを表示	スライダーの上部に見出しを表示するかどうかを設定します。お知らせセクションのタイトルを見せたい場合に便利です。
見出しのテキスト（空欄でブログ名）	見出しに表示するテキストを設定します。空欄にするとブログ名が自動的に表示されます。「お知らせ」「最新情報」など、お好みのテキストを設定できます。
一覧へのリンクを表示	ブログ一覧ページへのリンクを表示するかどうかを設定します。「すべて見る」のようなリンクを表示したい場合にオンにしてください。
一覧リンクのテキスト	一覧リンクに表示するテキストを設定します。「すべて見る」「もっと見る」など、お好みのテキストに変更できます。
一覧リンクの位置	一覧リンクの表示位置を「見出しの横」「下部中央」「下部右側」から選べます。レイアウトに合わせて調整してください。
表示する記事数	スライダーに表示するブログ記事の数を3〜12件の範囲で設定できます。
タグを表示	記事カードにタグ（カテゴリー）を表示するかどうかを設定します。記事のジャンルを一目で伝えたい場合に便利です。

コンテンツ設定の設定画面

スライダー設定

スライダーの動作に関する設定です。自動再生やナビゲーションの表示をカスタマイズできます。

設定名	説明
自動再生を有効にする	スライダーを自動で再生するかどうかを設定します。お知らせを自動的に流したい場合にオンにしてください。
自動再生の速度（秒）	自動再生時にスライドが切り替わるまでの秒数を2〜10秒の範囲で設定できます。
スライドの速度	スライドが切り替わるときのアニメーション速度を2〜10の範囲で設定できます。数値が小さいほど速く切り替わります。
ループ再生	最後のスライドまで表示したあと、最初に戻ってループするかどうかを設定します。
ホバー時に一時停止	マウスカーソルをスライダーに乗せたとき、自動再生を一時停止するかどうかを設定します。お客様が記事をじっくり読みたいときに便利です。
矢印を表示	スライダーの左右に矢印ナビゲーションを表示するかどうかを設定します。
矢印の色	矢印アイコンの色を設定します。
矢印の背景色	矢印ボタンの背景色を設定します。
ドットインジケーターを表示	スライダーの下部にドットインジケーターを表示するかどうかを設定します。現在のスライド位置を示すのに便利です。
ドットの色	非アクティブなドットの色を設定します。
アクティブなドットの色	現在表示中のスライドに対応するドットの色を設定します。

スライダー設定の設定画面

カード設定

各ブログ記事カードの表示内容に関する設定です。

設定名	説明
アイキャッチ画像を表示	記事カードにアイキャッチ画像を表示するかどうかを設定します。
画像の比率	アイキャッチ画像の表示比率を「正方形（1:1）」「横長（16:9）」「横長（4:3）」「縦長（3:4）」から選べます。ストアのデザインに合わせて調整してください。
投稿日を表示	記事の投稿日を表示するかどうかを設定します。新着情報として日付を見せたい場合に便利です。
日付の並び順	日付の表示形式を「YYYY/MM/DD（年/月/日）」「MM/DD/YYYY（月/日/年）」「DD/MM/YYYY（日/月/年）」から選べます。
著者を表示	記事の著者名を表示するかどうかを設定します。
抜粋を表示	記事の抜粋（本文の冒頭部分）を表示するかどうかを設定します。記事の内容を少しだけ見せることで、クリック率の向上が期待できます。
抜粋の文字数	抜粋に表示する文字数を50〜200文字の範囲で設定できます。
続きを読むボタンを表示	記事カードに「続きを読む」ボタンを表示するかどうかを設定します。
続きを読むボタンのテキスト	ボタンに表示するテキストを変更できます。「続きを読む」「もっと見る」「詳しくはこちら」など、お好みのテキストに設定できます。

カード設定の設定画面

文字設定

スライダー内の各テキスト要素の大きさや色を設定できます。

設定名	説明
見出しの文字の大きさ	スライダーの見出し（タイトル）の文字サイズを18〜36pxの範囲で設定できます。
見出しの色	見出しテキストの色を設定します。
一覧リンクの文字の大きさ	「すべて見る」などの一覧リンクの文字サイズを10〜20pxの範囲で設定できます。
一覧リンクの色	一覧リンクテキストの色を設定します。
タイトルの文字の大きさ	各記事カードのタイトルの文字サイズを14〜28pxの範囲で設定できます。
タイトルの色	記事タイトルテキストの色を設定します。
日付・著者の文字の大きさ	投稿日や著者名の文字サイズを10〜16pxの範囲で設定できます。
日付・著者の色	投稿日や著者名テキストの色を設定します。
抜粋の文字の大きさ	記事の抜粋テキストの文字サイズを12〜18pxの範囲で設定できます。
抜粋の色	抜粋テキストの色を設定します。

文字設定の設定画面

レイアウト設定

スライダーのレイアウトや見た目に関する設定です。デバイスごとのスライド表示数も設定できます。

設定名	説明
PCで表示するスライド数	PC（デスクトップ）で一度に表示するスライドの数を2〜5枚の範囲で設定できます。
タブレットで表示するスライド数	タブレットで一度に表示するスライドの数を1〜4枚の範囲で設定できます。
モバイルで表示するスライド数	スマートフォンで一度に表示するスライドの数を1〜3枚の範囲で設定できます。
スライド間の余白	スライド同士の間のスペースを0〜40pxの範囲で設定できます。
カードの背景色	記事カードの背景色を設定します。
カードの角丸	記事カードの角の丸みを0〜24pxの範囲で設定できます。角丸を大きくするとやわらかい印象になります。
カードに影をつける	記事カードに影（ドロップシャドウ）をつけるかどうかを設定します。影をつけるとカードが浮き上がったような見た目になります。
上部余白	スライダーの上側の余白を0〜100pxの範囲で設定できます。
下部余白	スライダーの下側の余白を0〜100pxの範囲で設定できます。

レイアウト設定の設定画面

その他の設定（追加の CSS）

テーマエディタの設定項目だけでは実現できない、より細かいスタイル調整をしたい場合に使います。

設定名	説明
追加の CSS	カスタム CSS を入力することで、スライダーの見た目をさらに細かく調整できます。このブロック内にのみ適用されるので、他のセクションに影響しません。ブラウザの検証機能でクラス名を確認して CSS を上書きしてください。