この内容は開発α版のものです。現在のMagento2とは異なります。

Magento2ではテーマ管理機能が大幅に強化されます。
今回はテーマ管理機能のなかでもCSSとJavaScript、画像ファイルなどの管理について紹介します。

Magento1でのテーマ管理機能

Magento1ではテーマ管理機能というのは標準では期間指定でテーマを切り替える機能しか提供されてきませんでした。
それだけでも用途によっては便利な機能だったのですが、テーマのカスタマイズにはファイルを都度都度FTPやSCP/SFTPでアップロードしていかなければならず、デザインをカスタマイズしたい人には少し面倒でした。 

Magento2でのテーマ管理機能

Magento2ではテーマ管理機能は大幅に強化され、「デザイン」というひとつの独立した機能群になりました。
この機能は3つのサブ機能から構成されるようになり、Magento1のテーマ管理機能は「スケジュール」に名称変更されました。 

テーマ管理

今回ご紹介する機能であるテーマ管理は、標準のテーマやオリジナルのテーマをベースにした新しいテーマを作成・管理するための機能です。 

ストアデザイナー

ストアデザイナーは、ブラウザ上でテーマの文字や背景色などを変更したり、表示する商品画像の縦横サイズを変更できる機能です。
ちょっとした修正であればブラウザ上でできてしまうので、ベーステーマからのカスタマイズは効率的にできるようになるかもしれません。 

スケジュール

スケジュール機能はMagento1のテーマ管理機能とほぼ同じ機能です。
ストアビューごとに開始日と終了日を指定して、所定のテーマを適用することができます。 

テーマ管理機能を触ってみる

さて、テーマ管理機能を触ってみましょう。
テーマ管理機能はグローバルメニューの「コンテンツ」の下にあります。 

テーマを作る

まずはテーマをつくってみましょう。
テーマ一覧を開くと、今使えるテーマが一覧表示されます。 

テーマ管理

テーマ一覧の左上にある、「＋」ボタンをクリックすると、テーマ作成画面が表示されます。

テーマの作成

  • 基準にするテーマ
  • テーマのバージョン番号
  • テーマ名
  • テーマのイメージ画像ファイル

を選んでテーマを作成します。
作成後には左タブが2つ増えます。

カスタムCSSをアップロードする

CSS編集

保存後に出てくるタブのうち1つは「CSSエディタ」です。
名前の通りCSSを編集するための機能ですが、テーマ上で使用する画像やWebフォントファイルを管理することができます。 

試しにCSSファイルをアップロードしてみます。適当なCSSファイルを選ぶと、「Upload CSS File」ボタンの色が変わります。
うまくアップロードできると、「Edit custom.css」のところにファイルの中身が入ります。

カスタムCSS

このようにMagento2ではオリジナルのCSSをアップロードできるので、テーマを編集する際にいちいち専用のツールを立ちあげなくても済むようになっています。

ちなみに3つ目のタブにあるJSエディタも同じ要領で使えます。

画像ファイルをアップロードする

「Images Assets」「Font Assets」はテーマで使う画像やWebフォントファイルをブラウザ上からアップロード・管理する機能です。
dev-65で確認したところ、JavaScriptのエラーが出てしまい、この機能を詳細に検証することができていません。
今後のアップデートに期待したいと思います。

なお、Webフォントに日本語を使う場合、フォントファイルのサイズや著作権などに注意が必要です。
特に日本語や中国語の場合、文字の種類が多いため、ファイルサイズが肥大化しやすいので、ネットワークトラフィックを専有する可能性があります。
もし、Webフォントを使うのであれば、CDNや専門のサービスを使うほうがよいでしょう。