テーマアセット

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

標準インストールの場合、テーマに関連付けられたアセットは、 web 以下の場所にあるフォルダー ( Commerce ルートを使用します。

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

静的ファイル URL への電子署名の追加

  1. 次の日: 管理者 サイドバー、移動 Stores > Settings>Configuration.

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

  3. 展開 拡張セレクター Static Files Settings 」セクションに入力します。

    img-md
    w-500 modal-image
    静的ファイル設定
  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 ファイルを単一の縮小されたファイルに結合することで、個別の CSS ファイルの数を減らすことができます。 結合された CSS ファイルを開くと、テキストの連続したストリームが 1 つ表示され、改行が削除されます。 結合されたファイルは編集できないので、開発モードが終了し、CSS を頻繁に変更しなくなるまで待つことをお勧めします。

NOTE
CSS ファイルは 管理者 パネルは、 開発者モード.
  1. 次の日: 管理者 サイドバー、移動 Stores > Settings>Configuration.

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

  3. 展開 拡張セレクター CSS Settings 」セクションに入力します。

    img-md
    w-500 modal-image
    CSS 設定

    これらの設定オプションについて詳しくは、 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 」セクションに入力します。

    img-md
    w-600 modal-image
    JavaScript 設定

    これらの設定オプションについて詳しくは、 JavaScript 設定 (内) 設定リファレンス.

  4. 設定 Merge JavaScript Files から Yes.

  5. 完了したら、「 Save Config.

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