Shopifyの商品／ブログ記事／ページなどのタイトルや、デフォルトのメニュー機能で、spanやbrなどのHTMLタグを使用するとき、次のような問題が発生する場合があります。
1. タイトルやメニューに入力したHTMLタグが文字列（通常のテキスト）として表示されてしまう。
※<span>や<br>などをHTMLタグとして出力する必要がある。
2. 詳細ページのタイトルにはHTMLタグを使用したいが、一覧ページのタイトルにはHTMLタグを使用したくない。
※商品／ブログ記事／ページなどの詳細ページと、コレクション／ブログ／検索結果などの一覧ページで、別のタイトルを設定する必要がある。
この記事では、Shopifyの商品／ブログ記事／ページなどのタイトルや、デフォルトのメニュー機能で、spanやbrなどのHTMLタグを使用する小技や、メタフィールドの活用方法をご紹介します。
タイトルやメニューに入力したHTMLタグを、HTMLタグとして出力
商品／ブログ記事／ページなどのタイトルや、メニュー項目の名前に入力した<span>や<br>などを、文字列ではなくHTMLタグとして出力するには、それぞれ該当するliquidファイルの一部を変更します。
以下はDawnのバージョン10.0.0で確認したliquidファイルと変更箇所の一覧です。
| 名称（出力内容） | liquidファイル | 変更箇所 |
|---|---|---|
| 商品（商品タイトル） | section/main-product.liquid | {{ product.title | escape }} |
| コレクション（商品タイトル） | snippets/card-product.liquid | {{ card_product.title | escape }} |
| ブログ記事（ブログ記事タイトル） | section/main-article.liquid | {{ article.title | escape }} |
| ブログ一覧（ブログ記事タイトル） | snippets/article-card.liquid | {{ article.title | truncate: 50 | escape }} |
| ページ（ページタイトル） | section/main-page.liquid | {{ page.title | escape }} |
| 検索結果（各種タイトル） | section/main-search.liquid | {{ item.title | truncate: 50 | escape }} |
| メニュー（メニュー項目の名前） ※バージョン9以前 |
sections/header.liquid | {{ link.title | escape }} {{ childlink.title | escape }} {{ grandchildlink.title | escape }} |
| ドロップダウン（メニュー項目の名前） ※バージョン10以降 |
snippets/header-dropdown-menu.liquid | {{- link.title | escape -}} {{ childlink.title | escape }} {{ grandchildlink.title | escape }} |
| メガメニュー（メニュー項目の名前） ※バージョン10以降 |
snippets/header-mega-menu.liquid | {{- link.title | escape -}} {{ childlink.title | escape }} {{ grandchildlink.title | escape }} |
| ドロワー（メニュー項目の名前） ※バージョン10以降 |
snippets/header-drawer.liquid | {{ link.title | escape }} {{ childlink.title | escape }} {{ grandchildlink.title | escape }} |
ファイルの修正を管理画面から行う場合、
Shopifyの管理画面 > 販売チャネル > オンラインストア
の画面右下にある『…』ボタンをクリックして『コードを編集』します。
※解説に使用しているのはDawnのバージョン10.0.0の画面です。
例えば商品ページの場合、section/main-product.liquidファイルの以下の記述を
{{ product.title | escape }}以下のように書き換えます。
{{ product.title }}liquidのfilter『escape』を削除することで、HTMLのエスケープが解除され、<span>や<br>などがHTMLタグとして出力されます。
詳細ページと一覧ページに別のタイトルを設定
商品／ブログ記事／ページなどの詳細ページと、コレクション／ブログ／検索結果などの一覧ページで、表示するタイトルを変更したい場合があります。そんなときはメタフィールドを使用しましょう。
今回は商品ページにメタフィールドを使ったHTMLタグを含むタイトル、コレクションページにデフォルトのタイトルを使用する想定で解説していきます。
※解説に使用しているのはDawnのバージョン10.0.0の画面です。
1. メタフィールドの追加
まずはメタフィールドを追加します。
Shopifyの管理画面の左下にある『設定』をクリックします。
設定メニューの『カスタムデータ』をクリックします。
カスタムデータの画面で、メタフィールドを追加したい項目（今回は『商品』）をクリックします。
メタフィールドの定義一覧が表示されます。
画面右上にある『定義を追加する』ボタンをクリックします。
1. 定義を設定します。
※名前／ネームスペースとキー／説明の設定内容は任意です。
| 名前 | HTMLタグを含むタイトル |
|---|---|
| ネームスペースとキー | custom.title_with_html_tags |
| 説明 | タイトルに<span>や<br>などのHTMLタグを使用できます。 |
| タイプを選択する | 単一行のテキスト |
| ストアフロント | チェック |
2. 画面右上の『保存』ボタンをクリックします。
メタフィールドの定義が追加されました。
定義名の下段に表示されている
product.metafields.custom.title_with_html_tags
という部分がliquidのobject名です。
忘れないようにメモしておきましょう。
2. メタフィールドの入力
次に商品管理画面でタイトルを入力します。
※ブログ記事やページに対してメタフィールドを追加した場合は、ブログ記事やページの管理画面でタイトルを入力します。
デフォルトのタイトルに商品名（HTMLタグが含まれていないもの）を入力します。
※コレクションページには通常通り、ここへ入力した内容が表示されます。
1. ページ下部に先程追加したメタフィールド『HTMLタグを含むタイトル』の入力欄があるので、HTMLタグを含めた商品名を入力します。
※商品ページには、ここに入力した内容が表示されるようにします。
2. 画面右上の『保存する』ボタンをクリックします。
3. liquidファイルの修正
それではメタフィールドへ入力した内容を、実際のページに表示させてみましょう。
今回は商品ページへ表示するため、section/main-product.liquidファイルを修正します。
以下の記述を
<h1>{{ product.title | escape }}</h1>
先程メモしたliquidのobject名で書き換えます。
<h1>{{ product.metafields.custom.title_with_html_tags }}</h1>メタフィールドに入力がなければ、デフォルトのタイトルを表示するような仕組みにしておくと、幅広い運用ができます。
その場合は以下のように書き換えます。
<h1>
{%- if product.metafields.custom.title_with_html_tags != blank -%}
{{ product.metafields.custom.title_with_html_tags }}
{%- else -%}
{{ product.title | escape }}
{%- endif -%}
</h1>CSSを追加する前なので、まだ見た目に変化はありませんが、デベロッパーツールなどでソースコードを確認すると、商品ページにHTMLタグを含むタイトルが表示されていることがわかります。
4. CSSの追加
最後にCSSを追加して、<span>で囲ったテキストを小さくしてみましょう。
CSSは以下のように指定します。
※設定値は任意です。
.product__title h1 span {
display: block;
font-size: 1.8rem;
}CSSの追加を管理画面から行う場合、
Shopifyの管理画面 > 販売チャネル > オンラインストア
の画面で『カスタマイズ』ボタンをクリックします。
1. カスタマイズ画面左側にある『テーマ設定（歯車のアイコン）』をクリックして、
2. 『カスタムCSS』の項目へCSSを入力します。
CSSが適用されて、<span>で囲った部分だけが小さくなりました。
Shopify 小技 タイトルやメニューにHTMLタグを使用する方法 まとめ
この記事では、Shopifyの商品／ブログ記事／ページなどのタイトルや、デフォルトのメニュー機能で、spanやbrなどのHTMLタグを使用するときに生じる
- タイトルやメニューに入力したHTMLタグが文字列（通常のテキスト）として表示されてしまう。
- 詳細ページのタイトルにはHTMLタグを使用したいが、一覧ページのタイトルにはHTMLタグを使用したくない。
などの問題を、liquid filterやメタフィールドで解決する方法をご紹介しました。
Shopifyのサイト構築に、少しでも役立てていただけると幸いです。
※2023年7月時点の情報です。テーマのアップデートやShopifyの仕様変更などにより、記事の内容通りに設定できない場合があります。
