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

テーマアセット

Last update: Fri May 17 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • トピック：

作成対象：

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

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

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

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

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

  1. 日 Admin サイドバー、に移動 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 ファイルは、 Admin で作業しているときにのみパネルに表示される 開発者モード.

  1. 日 Admin サイドバー、に移動 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 ファイルは、 Admin で作業しているときにのみパネルに表示される 開発者モード.

  1. 日 Admin サイドバー、に移動 Stores > Settings>Configuration.

  2. 左のパネルで、 Advanced を選択します Developer.

  3. を展開 展開セレクター この JavaScript Settings セクション。

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

    これらの構成オプションの詳細については、を参照してください JavaScript 設定 が含まれる 設定リファレンス.

  4. を設定 Merge JavaScript Files 対象： Yes.

  5. 完了したら、 Save Config.

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