Shopifyでブログ記事だけCSSを除外する方法｜unlessとrequest.page_typeを解説

コードの役割

今回のコードは、ブログ記事の詳細ページではstyle要素を出力せず、それ以外のページでメインコンテンツ内のH1を装飾します。

ブログ記事だけCSSを除外する

基本コードは次のとおりです。条件に一致しない場合だけ処理することが、unlessのポイントです。

{% unless request.page_type == 'article' %}
  <style>
    #MainContent h1 {
      color: #00b0b0;
      font-family: 'Lobster', sans-serif;
      font-weight: 700;
      letter-spacing: 3.2px;
    }
  </style>
{% endunless %}

適用されるページを整理する

• トップページ、固定ページ、商品、コレクション：CSSが出力される
• ブログ一覧ページ：CSSが出力される
• ブログ記事の詳細ページ：CSSが出力されない

「ブログ関連をすべて除外」ではなく、「一つの記事を表示する詳細ページだけ除外」する条件です。

unlessの仕組み

unlessは、指定した条件が真ではないときに処理を実行するLiquidタグです。「〜でない場合」と読むと理解しやすくなります。

条件式を日本語に置き換える

• request.page_type：現在開いているページの種類
• == 'article'：記事詳細ページと同じかを判定
• unless：その判定が真でない場合に中身を出力
• endunless：条件分岐の終了

全体では「現在のページが記事詳細でない場合だけ、このCSSを出力する」という意味になります。

ifでも同じ条件を書ける

!=は「等しくない」という比較演算子です。次のifも同じ結果になります。

{% if request.page_type != 'article' %}
  <style>
    #MainContent h1 {
      color: #00b0b0;
    }
  </style>
{% endif %}

否定条件を短く表せる場合はunless、複数の分岐を続ける場合はifを使うと読みやすくなります。

page_typeの主な値

request.page_typeは、現在のURLに対応するページ種類を文字列で返します。URLの見た目ではなく、この値を比較して表示を切り替えます。

ブログ一覧と記事詳細は異なる

• article：ブログ記事の詳細ページ
• blog：ブログの記事一覧ページ
• index：トップページ
• page：固定ページ
• product：商品ページ
• collection：コレクションページ

確認用の値を一時表示する

判定値が分からないときは、複製テーマのカスタムLiquidへ次のコードを一時的に置くと、プレビュー中の値を確認できます。

<p>現在のページ種類：{{ request.page_type }}</p>

確認後は表示用コードを削除します。Shopify公式のrequestオブジェクトには、利用できる値の一覧も掲載されています。

Horizonへの追加手順

Horizonでは、共通ヘッダーやフッターへカスタムLiquidを追加できます。すべてのページで読み込まれる場所だからこそ、ページ種類による条件分岐が役立ちます。

複製テーマで編集する

• 「オンラインストア → テーマ」を開く
• 対象テーマのメニューから複製を作成する
• 複製したテーマの「カスタマイズ」を開く
• ヘッダーまたはフッターで「ブロックを追加」を選ぶ
• カスタムLiquidへコードを貼り付ける

ページを切り替えて確認する

テーマエディター上部のページ選択から、トップページ、コレクション、ブログ一覧、記事詳細を順番に表示します。対象ページではH1の色が変わり、記事詳細だけ元のデザインなら条件分岐が機能しています。

他テーマでは、ヘッダーやフッターへカスタムLiquidブロックを追加できない場合があります。その場合はテンプレート領域のカスタムLiquidセクション、またはテーマコード内の適切な場所を検討します。

CSS指定の意味

条件分岐の中にあるCSSは、H1の文字色、フォント、太さ、文字間隔を変更しています。各指定の役割を分けて確認します。

対象をMainContent内に絞る

#MainContent h1は、MainContentというIDを持つ要素の内側にあるH1を対象にします。単にh1と書くより範囲が限定され、ヘッダーのロゴや別領域へ影響しにくくなります。

各プロパティを確認する

• color：文字色を変更する
• font-family：Lobsterを優先し、なければsans-serifを使う
• font-weight：文字を太くする
• letter-spacing：文字の間隔を広げる

Lobsterがテーマ側で読み込まれていなければ、指定してもそのフォントでは表示されません。フォントの読み込み設定も併せて確認してください。

importantは必要な場合だけ使う

共有コードにはfont-weight: 700 !important;がありましたが、通常はまず!importantなしで確認します。テーマの既存CSSに負ける場合は、対象セレクターを適切に具体化してから使用を検討します。

条件を書き換える例

除外したいページが変わっても、request.page_typeの比較対象を変更すれば対応できます。よく使う例を紹介します。

ブログ関連をすべて除外する

記事詳細のarticleとブログ一覧のblogを両方除外する場合は、orで条件をつなぎます。

{% unless request.page_type == 'article' or request.page_type == 'blog' %}
  <style>
    #MainContent h1 {
      color: #00b0b0;
    }
  </style>
{% endunless %}

商品ページだけに適用する

除外ではなく対象を一つに限定するときは、ifの方が読みやすくなります。

{% if request.page_type == 'product' %}
  <style>
    #MainContent h1 {
      color: #00b0b0;
    }
  </style>
{% endif %}

固定ページだけに適用する

会社情報やお問い合わせなど、固定ページ全体を対象にする場合はpageを指定します。

{% if request.page_type == 'page' %}
  <style>
    #MainContent h1 {
      color: #00b0b0;
    }
  </style>
{% endif %}

一つの固定ページだけに絞る場合は、page.handleも組み合わせます。条件が増えたときは、何を対象にし、何を除外するのかを先に日本語で整理すると間違いを防げます。

反映されない場合の確認

条件式が正しくても、CSSの対象やフォントの読み込み状況によって見た目が変わらない場合があります。広い修正へ進む前に、次の順番で確認します。

ページ種類と対象要素を確認する

• 確認中のページでrequest.page_typeが想定した値か
• 対象の見出しがH1か
• H1が#MainContentの内側にあるか
• カスタムLiquidが共通領域で読み込まれているか

CSSの優先順位を確認する

ブラウザーの開発者ツールでH1を選び、今回のCSSが表示されているか、別の指定で上書きされていないかを確認します。いきなり!importantを増やすのではなく、対象セレクターと読み込み順を確認することが大切です。

公開前に複数ページを見る

記事詳細だけでなく、トップページ、商品、コレクション、固定ページ、ブログ一覧も確認します。対象ページで適用され、除外ページでは元のデザインになることを一組で確認します。

まとめ

Shopifyでブログ記事だけCSSを除外するポイントをまとめます。

• unlessは条件に一致しない場合だけ処理する
• request.page_type == 'article'はブログ記事の詳細ページを判定する
• ブログ一覧はblogなので、記事詳細とは別に判定する
• 共通領域のカスタムLiquidでページ別にCSSの出力を制御できる
• #MainContent h1でCSSの対象範囲を絞る
• 複製テーマで対象ページと除外ページを確認してから反映する

カスタムCSSだけではLiquidのページ条件を判定できません。共通のカスタムLiquidへ条件分岐とstyle要素を組み合わせることで、同じデザインルールを管理しながら、不要なページだけを除外できます。

参考：Shopify Liquidのunlessタグ、requestオブジェクト、テーマエディターの概要