Shopifyのブログ記事にタグ一覧を表示できるアプリについて徹底解説｜ご利用ガイド
はじめに
今回の記事は、Shopify アプリである「シンプルブログ記事タグ一覧｜お手軽リンク付きタグ表示設定」の解説記事です。
Shopify とは、ざっくり説明すると EC サイトを簡単に構築することができるプラットフォームであり、Shopify アプリとはそのプラットフォームを拡張する機能のようなものです。WordPress のプラグインのようなもの、とご認識頂いて大丈夫です。
「シンプルブログ記事タグ一覧｜お手軽リンク付きタグ表示設定」は、ブログ記事ページ上でタグを整理して表示できるアプリです。
「この記事は何のカテゴリ？」「関連する内容をもっと読みたい」といった読者の導線を作りやすく、コンテンツ重視のストアやブログ運用に最適です。
特に、
- 見せたくないタグ（例：管理用の
Hidden）は非表示にしたい - 重要タグ（例：
New/おすすめ）だけ強調したい - タグの見た目（色・枠線・余白）をテーマに合わせて整えたい
- タグをクリックして回遊できるようにしたい
といったニーズを、ノーコードでサクッと実現できます。
ご興味のある方は、以下の URL からインストールしてみてください。
https://apps.shopify.com/ur-blog-article-tag-list?locale=ja
料金は **Basic Plan：$2.99 / 月（1 週間の無料期間あり）**です。
「シンプルブログ記事タグ一覧｜お手軽リンク付きタグ表示設定」でできること
Shopify アプリである「シンプルブログ記事タグ一覧｜お手軽リンク付きタグ表示設定」は、ブログ記事ページに表示するタグを“見せる・隠す・強調する”を自在にコントロールできるアプリです。
主な特徴は次のとおりです。
- タグごとの表示・非表示を柔軟に設定
見せたいタグだけを表示したり、特定タグだけを非表示にしてスッキリ見せられます。 - 指定したタグを強調表示
重要なタグを目立たせて、読者の注目を集められます。 - ノーコードでデザインをカスタマイズ
文字色・背景色・枠線・角丸・余白などをテーマエディタで調整可能です。 - 1 クリックでテーマに追加
難しいコード編集なしで、すぐブログ記事ページに組み込めます。
タグごとの表示・非表示を柔軟に設定できる
「管理用タグは表示したくない」「特定のタグだけを見せたい」など、運用に合わせて出し分けできます。
指定したタグを強調表示できる
「New」「おすすめ」「人気」など、読ませたい導線のタグを強調してクリックや回遊につなげられます。
ノーコードでカスタマイズできる
色・枠線・角丸・余白などを整えて、ブログ記事のデザインに自然に馴染ませられます。
1 クリックでテーマに追加できる
インストール後、テーマに追加してすぐ使い始められます。
シンプルブログ記事タグ一覧アプリのインストール
それでは、実際にアプリをインストールしていきましょう。
https://apps.shopify.com/ur-blog-article-tag-list?locale=ja
アプリの料金は **$2.99 / 月（1 週間無料）**です。
- Shopify 管理画面 左下の「設定」をクリックします。
- 「アプリ」をクリックし、「Shopify App Store」に移動します。
- 検索窓に「シンプルブログ記事タグ一覧｜お手軽リンク付きタグ表示設定」と入力し、表示されたアプリをクリックします。
- アプリ詳細画面で「インストール」をクリックします（権限を確認してインストールを完了してください）。
インストールが完了すると、アプリの管理画面が表示されます。
シンプルブログ記事タグ一覧のアプリブロックをテーマに追加
アプリをインストールしたら、テーマエディタでアプリブロックを追加して、ブログ記事ページにタグ一覧を表示できるようにします。
テーマエディタ上では、アプリブロック名が 「UR: Blog Article Tag List」 と表示されます。
自動でアプリをテーマに追加（1 クリック）
アプリの管理画面から、対象テーマを選んで「テーマに追加」を行います。
- Shopify 管理画面でアプリを開きます。
- 「テーマを選択」で追加したいテーマを選び、「テーマに追加」をクリックします。
- テーマ編集画面が開いたら「保存する」をクリックして有効化します。
手動でアプリをテーマに追加（ブログ記事ページに差し込みたい場合）
自動追加がうまくいかない場合や、「タグを表示する位置を細かく調整したい」場合は手動追加がおすすめです。
- Shopify 管理画面で「オンラインストア」→「テーマ」→「カスタマイズ」を開きます。
- テーマエディタ上部のページ選択から「ブログ記事」テンプレート（例：デフォルトのブログ記事）に移動します。
- タグ一覧を表示したい位置で「セクションを追加」または「ブロックを追加」をクリックします。
- 「アプリ」タブから 「UR: Blog Article Tag List」 を選択して追加します。
- 追加できたら「保存する」をクリックします。
シンプルブログ記事タグ一覧アプリのカスタマイズ
テーマにアプリブロックを追加したら、テーマエディタでカスタマイズを行えます。
アプリブロック（UR: Blog Article Tag List）をクリックすると、下記のような設定項目が表示されます。
タグ表示設定
ブログ記事に付与されている「タグ」を、どう表示するかを設定します。
表示モード
指定タグの扱い（表示する／表示しない）を切り替えるモードです。
「指定タグを“除外”したい」「指定タグ“だけ”見せたい」といった運用に合わせて選択します。
指定タグ
表示対象または非表示対象にしたいタグを、カンマ区切りで入力します。
- 例：
sale,new,limited - 例（管理用タグを隠す）：
Hidden
空欄の場合は 全タグが表示されます。
強調タグ
強調表示したいタグを、カンマ区切りで指定します。
- 例：
New - 例：
sale,hot
運用例：
「New」だけ背景色を変えて目立たせる → 新着記事の回遊導線として活用できます。
タグリンクを有効化
ON にすると、タグがクリック可能になり、該当タグに絞り込んだ一覧ページへ遷移します。
回遊性を高めたい場合におすすめです。
タグ接頭辞
タグ名の前に付ける文字を設定できます。
- 例：
# - 例：
@
接頭辞の後にスペースを追加
ON にすると、接頭辞とタグ名の間に半角スペースを自動で入れます。
例：# New のように見せたい場合に便利です。
デザイン設定
タグの見た目（文字・背景・枠線など）をノーコードで調整できます。
表示位置
タグ一覧全体の位置を調整します（例：右寄せなど）。
フォントサイズ
タグ文字のサイズを px 単位で設定します。
文字の太さ
フォントの太さ（font-weight 相当）を数値で設定します。
文字色
タグ文字の色をカラーコードで指定します。
背景色
通常タグの背景色を指定します。
枠線の色
通常タグの枠線の色を指定します。
枠線の太さ
枠線の太さを px で指定します。
角の丸み
角丸（border-radius）を px で指定します。
強調タグの背景色 / 強調タグの文字色 / 強調タグの枠線色
「強調タグ」に指定したタグだけ、別デザインで目立たせることができます。
キャンペーン用タグや注目カテゴリを強調したいときに便利です。
余白設定
タグの読みやすさ・押しやすさ（クリック領域）・全体の見栄えを整える設定です。
タグ内の余白（上下）
タグ内の上下の余白（padding）を px で設定します。
タグ内の余白（左右）
タグ内の左右の余白（padding）を px で設定します。
タグ間の余白
タグ同士の間隔（gap）を px で設定します。
上部の余白（PC / スマホ）
タグ一覧ブロックの上の余白（margin-top）を、PC / スマホ別に設定します。
下部の余白（PC / スマホ）
タグ一覧ブロックの下の余白（margin-bottom）を、PC / スマホ別に設定します。
その他の設定
追加の CSS
設定項目だけでは表現しきれないデザインを、CSS で追い込めます。
- ブラウザの検証（デベロッパーツール）でクラス名を確認
- 「追加の CSS」に CSS を記述して上書き
おわりに
今回は「シンプルブログ記事タグ一覧｜お手軽リンク付きタグ表示設定」の解説を行いました。
- ブログ記事ページで タグを美しく表示・管理 して、回遊性をアップ
- 表示・非表示や強調表示を使って、読みやすさと導線を最適化
- デザインも ノーコードでカスタマイズ可能
- **$2.99 / 月（1 週間無料）**で手軽に導入
読者の滞在時間を伸ばし、コンテンツの価値をしっかり届けるために、ぜひご活用ください。
ここまでお読みいただき、誠にありがとうございました。
https://apps.shopify.com/ur-blog-article-tag-list?locale=ja
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
