ドキュメントCommerceコンテンツとデザイン

テーマアセット

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • トピック：

作成対象：

  • 初心者
  • 中級
  • 管理者
  • ユーザー

静的ファイル は、テーマで使用される CSS、フォント、画像、JavaScriptなどのアセットの集まりです。 静的ファイルの場所は、 ベース URL 設定で指定します。 各静的ファイルの URL にデジタル署名を追加して、ブラウザーが新しいバージョンが使用可能かどうかを検出できるようにします。 署名がブラウザーキャッシュに保存されている署名と異なる場合は、ファイルの新しいバージョンが使用されます。

標準インストールの場合、テーマに関連付けられたアセットは、Commerce ルートの下の次の場所にある web フォルダーに整理されます。

[commerce_root]/app/design/frontend/Magento/[theme_name]/web

静的ファイル URL へのデジタル署名の追加

  1. 管理者 サイドバーで、Stores/Settings/Configuration ​に移動します。

  2. 左側のパネルで「Advanced」を展開し、「Developer」を選択します。

  3. 「 展開セレクター 」を展開し、「Static Files Settings」セクションを展開します。

    静的ファイル設定 {width="500" modal="regular"}

  4. Sign Static Files を Yes に設定します。

  5. 完了したら、「Save Config」をクリックします。

ファイルタイプ
説明
CSS
スキンに関連付けられている視覚的なスタイル設定をコントロールします。 サーバー上の場所の例：[commerce]/app/design/frontend/Magento/[theme]/web/css
フォント
テーマで使用できるフォントを指定します。 サーバー上の場所：[commerce]/app/design/frontend/Magento/[theme]/web/fonts
画像
ボタン、背景テクスチャなど、テーマで使用されるグラフィカルアセットを提供します。 サーバー上の場所の例：[commerce]/app/design/frontend/Magento/[theme]/web/images
JS
テーマ固有のJavaScript ルーチンと呼び出し可能な関数。 サーバー上の場所の例：[commerce]/app/design/frontend/Magento/[theme]/web/js

CSS ファイルの結合

サイトを最適化しページの読み込み時間を短縮する取り組みの一環として、別々の CSS ファイルを 1 つの圧縮ファイルに結合することで、それらのファイルの数を減らすことができます。 結合された CSS ファイルを開くと、1 つの連続したテキストストリームが表示され、改行が削除されます。 結合ファイルは編集できないので、開発モードが終了し、CSS に頻繁に変更を加えなくなるまで待つことをお勧めします。

NOTE
CSS ファイルは、 開発者モードで作業している場合にのみ 管理 パネルから結合できます。

  1. 管理者 サイドバーで、Stores/Settings/Configuration ​に移動します。

  2. 左側のパネルで、を Advanced して「Developer」を選択します。

  3. 「 展開セレクター 」を展開し、「CSS Settings」セクションを展開します。

    CSS 設定 {width="500" modal="regular"}

    これらの設定オプションについて詳しくは、 設定リファレンスの CSS 設定 を参照してください。

  4. Merge CSS Files を Yes に設定します。

  5. 完了したら、「Save Config」をクリックします。

JavaScript ファイルの結合

複数のJavaScript ファイルを 1 つの圧縮ファイルに結合して、ページの読み込み時間を短縮できます。 結合されたJavaScript ファイルを開くと、1 つの連続したテキストストリームが表示され、改行が削除されます。 開発プロセスが完了し、コードにエラーが含まれていない場合は、ファイルの結合を検討してください。

NOTE
JavaScriptのファイルは、 開発者モード で作業している場合にのみ 管理パネルから結合できます。

  1. 管理者 サイドバーで、Stores/Settings/Configuration ​に移動します。

  2. 左側のパネルで、を Advanced して「Developer」を選択します。

  3. 「 展開セレクター 」を展開し、「JavaScript Settings」セクションを展開します。

    JavaScriptの設定 {width="600" modal="regular"}

    これらの設定オプションについて詳しくは、{Configuration Reference🔗 の 0}JavaScript設定 を参照してください。

  4. Merge JavaScript Files を Yes に設定します。

  5. 完了したら、「Save Config」をクリックします。

recommendation-more-help
2b0136b4-ef75-405f-9734-60d741f198de