テーマ

テーマは、ストアの視覚的表示を決定するファイルのコレクションです。 Commerce を初めてインストールするとき、ストアのデザイン要素は デフォルト テーマに基づいています。 Commerce のインストールに付属する初期のデフォルトテーマに加えて、様々なテーマが利用可能で、それらを そのまま 使用したり、必要に応じて変更したりできます。

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

Commerce のテーマには、レイアウトファイル、テンプレートファイル、翻訳ファイル、スキンなどがあります。 スキンは、サポートされる CSS、画像、JavaScript ファイルの集まりです。これらのファイルを組み合わせることで、店舗を訪れた顧客が体験する視覚的なプレゼンテーションとインタラクションを実現します。 テーマとスキンの変更やカスタマイズを行うことができるのは、Commerceのテーマデザインを理解し、サーバーにアクセスできる開発者やデザイン担当者です。 詳しくは、フロントエンド開発者ガイド を参照してください。

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

デフォルトのテーマ

Magento Blank レスポンシブテーマは、様々なデバイスでストアフロントの表示をレンダリングし、デスクトップ、テーブル、モバイルデバイス向けのベストプラクティスを組み込みます。 一部のテーマは、特定のデバイスでのみ使用できるように設計されています。 特定のブラウザー IDCommerce たはユーザーエージェントを検出すると、その特定のブラウザー用に設定されているテーマが使用されます。 検索文字列には、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
2b0136b4-ef75-405f-9734-60d741f198de