[PaaSのみ]{class="badge informative" title="Adobe Commerce on Cloud プロジェクト(Adobeで管理されるPaaS インフラストラクチャ)とオンプレミス プロジェクトにのみ適用されます。"}

テーマ

テーマは、ストアの視覚的なプレゼンテーションを決定するファイルのコレクションです。 Commerceを最初にインストールすると、ストアのデザイン要素は​Default テーマに基づきます。 Commerceのインストールに付属する初期のデフォルトテーマに加えて、​として使用したり、ニーズに合わせて変更したりできる、さまざまなテーマがあります。

レスポンシブテーマは、デバイスのビューポートに合わせてページレイアウトを調整します。 サンプル Luma​のテーマには、デスクトップ、タブレット、モバイルデバイスから表示できる、柔軟でレスポンシブなレイアウトが用意されています。

Commerce個のテーマには、レイアウトファイル、テンプレートファイル、翻訳ファイル、スキンが含まれます。 スキンとは、対応するCSS、画像、JavaScript ファイルのコレクションで、お客様がストアを訪問したときに体験する視覚的なプレゼンテーションとインタラクションを作成します。 テーマとスキンは、Commerceのテーマデザインを理解し、サーバーにアクセスできる開発者やデザイン担当者が変更およびカスタマイズできます。 詳しくは、フロントエンド開発者ガイドを参照してください。

Luma テーマ ​ {width="600" modal="regular"}

デフォルトテーマ

Magento Blank レスポンシブ テーマは、様々なデバイス向けにストアフロントの表示をレンダリングし、デスクトップ、テーブル、モバイルデバイス向けのベストプラクティスを組み込んでいます。 一部のテーマは、特定のデバイスでのみ使用できるように設計されています。 Commerceが特定のブラウザーIDまたはユーザーエージェントを検出すると、特定のブラウザー用に設定されたテーマが使用されます。 検索文字列には、Perl互換の正規表現(PCRE)を含めることもできます。

​ テーマ ​ {width="700" modal="regular"}

テーマグリッドをフィルタリング

  1. 管理者 サイドバーで、Content > Design>Themes​に移動します。

  2. Filters​をクリックします。

  3. ID範囲、テーマ名(またはタイトル)、フォルダーパス、または親テーマを入力します。

  4. Apply Filters​をクリックしてテーマのリストを更新します。

現在のテーマ設定の表示

  1. 管理者 サイドバーで、Content > Design>Themes​に移動します。

  2. インストールされたテーマのリストで、調べたいテーマを見つけ、行をクリックして設定を表示します。

  3. サンプルページを表示するには、Theme Preview Image​をクリックします。

​ テーマのプレビュー {width="600" modal="regular"}

デフォルトのテーマの適用

  1. 管理者 サイドバーで、Content > Design>Configuration​に移動します。

  2. 設定するストアビューを見つけ、Action​列の​ Edit ​をクリックします。

  3. Default Theme​で、Applied Theme​を現在のビューに使用するビューに設定します。

    適用されたテーマ ​ {width="600" modal="regular"}

  4. 完了したら、Save Configuration​をクリックします。

ユーザーエージェントルールの追加

  1. 管理者 サイドバーで、Content > Design>Configuration​に移動します。

  2. Design Rule​で、Add New User Agent Rule​をクリックします。

    ​ デザインルール ​ {width="600" modal="regular"}

  3. Search String​に、特定のデバイスのブラウザーIDを入力します。

    検索文字列は、入力された順序で一致します。 例えば、Firefoxの場合は次のように入力します。

    /^mozilla/i

  4. 追加のデバイスを入力するには、このプロセスを繰り返します。

  5. 完了したら、Save Configuration​をクリックします。

recommendation-more-help
commerce-admin-help-content-design