[PaaSのみ]{class="badge informative" title="Adobe Commerce on Cloud プロジェクト（Adobeで管理されるPaaS インフラストラクチャ）とオンプレミスプロジェクトにのみ適用されます。"}

テーマアセット

最終更新日： 2026年6月16日

トピック：
{"id":"dac87252-6066-4d6e-a9d2-f6d84c323de7"}

作成対象：

{"id":"b5a62a22-46f7-4f0d-b151-3fc640bef588"},{"id":"e8ccd51f-da0d-4e3b-939b-e30d5ebb1ea5"}
{"id":"b69b2659-1057-424e-8fc5-ed9e016dc554"},{"id":"c66ffd68-0f65-42bb-aa23-b4020f12e0bd"}

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

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

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

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

管理者 サイドバーで、Stores > Settings>Configurationに移動します。
左側のパネルで、Advancedを展開し、Developerを選択します。
Static Files Settings セクションのを展開します。

{width="500" modal="regular"}
Sign Static FilesをYesに設定します。
完了したら、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

テーマ固有のJavaScript ルーチンと呼び出し可能な関数。サーバー上の場所の例：[commerce]/app/design/frontend/Magento/[theme]/web/js

CSS ファイルを結合

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

NOTE

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

管理者 サイドバーで、Stores > Settings>Configurationに移動します。
左側のパネルで、Advancedを選択し、Developerを選択します。
CSS Settings セクションのを展開します。

{width="500" modal="regular"}

これらの設定オプションについて詳しくは、設定リファレンスのCSS設定を参照してください。
Merge CSS FilesをYesに設定します。
完了したら、Save Configをクリックします。

JavaScript ファイルの結合

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

NOTE

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

管理者 サイドバーで、Stores > Settings>Configurationに移動します。
左側のパネルで、Advancedを選択し、Developerを選択します。
JavaScript Settings セクションのを展開します。

{width="600" modal="regular"}

これらの設定オプションについて詳しくは、設定リファレンスのJavaScript Settingsを参照してください。
Merge JavaScript FilesをYesに設定します。
完了したら、Save Configをクリックします。

recommendation-more-help

commerce-admin-help-content-design