テーマ
テーマは、ストアの視覚的なプレゼンテーションを決定するファイルのコレクションです。 Commerceを最初にインストールすると、ストアのデザイン要素はDefault テーマに基づきます。 Commerceのインストールに付属する初期のデフォルトテーマに加えて、をとして使用したり、ニーズに合わせて変更したりできる、さまざまなテーマがあります。
レスポンシブテーマは、デバイスのビューポートに合わせてページレイアウトを調整します。 サンプル Lumaのテーマには、デスクトップ、タブレット、モバイルデバイスから表示できる、柔軟でレスポンシブなレイアウトが用意されています。
Commerce個のテーマには、レイアウトファイル、テンプレートファイル、翻訳ファイル、スキンが含まれます。 スキンとは、対応するCSS、画像、JavaScript ファイルのコレクションで、お客様がストアを訪問したときに体験する視覚的なプレゼンテーションとインタラクションを作成します。 テーマとスキンは、Commerceのテーマデザインを理解し、サーバーにアクセスできる開発者やデザイン担当者が変更およびカスタマイズできます。 詳しくは、フロントエンド開発者ガイドを参照してください。
デフォルトテーマ
Magento Blank レスポンシブ テーマは、様々なデバイス向けにストアフロントの表示をレンダリングし、デスクトップ、テーブル、モバイルデバイス向けのベストプラクティスを組み込んでいます。 一部のテーマは、特定のデバイスでのみ使用できるように設計されています。 Commerceが特定のブラウザーIDまたはユーザーエージェントを検出すると、特定のブラウザー用に設定されたテーマが使用されます。 検索文字列には、Perl互換の正規表現(PCRE)を含めることもできます。
テーマグリッドをフィルタリング
-
管理者 サイドバーで、Content > Design>Themesに移動します。
-
Filtersをクリックします。
-
ID範囲、テーマ名(またはタイトル)、フォルダーパス、または親テーマを入力します。
-
Apply Filtersをクリックしてテーマのリストを更新します。
現在のテーマ設定の表示
-
管理者 サイドバーで、Content > Design>Themesに移動します。
-
インストールされたテーマのリストで、調べたいテーマを見つけ、行をクリックして設定を表示します。
-
サンプルページを表示するには、Theme Preview Imageをクリックします。
デフォルトのテーマの適用
-
管理者 サイドバーで、Content > Design>Configurationに移動します。
-
設定するストアビューを見つけ、Action列の Edit をクリックします。
-
Default Themeで、Applied Themeを現在のビューに使用するビューに設定します。
{width="600" modal="regular"}
-
完了したら、Save Configurationをクリックします。
ユーザーエージェントルールの追加
-
管理者 サイドバーで、Content > Design>Configurationに移動します。
-
Design Ruleで、Add New User Agent Ruleをクリックします。
{width="600" modal="regular"}
-
Search Stringに、特定のデバイスのブラウザーIDを入力します。
検索文字列は、入力された順序で一致します。 例えば、Firefoxの場合は次のように入力します。
/^mozilla/i -
追加のデバイスを入力するには、このプロセスを繰り返します。
-
完了したら、Save Configurationをクリックします。