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

「Magento2新機能〜Visual Design Editor」ではMagento2で搭載される予定のVisual Design Editorという機能をご紹介しました。
それから1年が経過し、Magento2の内部構造がかなり変わったことに伴って、この機能も大きく変貌しています。

このエントリではVisual Design Editorに変わる機能として実装が進められている「ストアデザイナー」機能について紹介します。

ストアデザイナーとは

ストアデザイナーは、Magentoのテーマを管理画面上から編集していくツールです。
Magento2のデザイン管理機能のひとつで、すでにあるテーマをベースにして作成したテーマをカスタマイズしていく事ができる機能です。 

Visual Design Editorとの違い

Magento2には、比較的初期の段階でVisual Design Editorが搭載されていました。
この機能はMagentoのデザインカスタマイズをする上で習得が不可欠な、レイアウトXMLを知らなくてもデザインカスタマイズがある程度までできるようにする目的で開発されていました。

ストアデザイナーはVisual Design Editorから、レイアウト編集機能を削除し、CSSやJavaScriptなどのテーマを構成するファイルをアップロード・ダウンロード・編集する機能を充実させたものです。 

ストアデザイナーを使ってみる

ストアデザイナーを使うには、管理画面のグローバルメニューから「コンテンツ」を選び、サブメニューのストアデザイナーを選びます。
そうすると標準テーマが表示されます。

ストアデザイナー

Magento2の標準状態では、

  • blank
  • plushe

という2つのテーマが付属します。blankはMagento1にもあった、blankテーマと似たテーマ。blusheはレスポンシブウェブデザインのテーマです。

編集するには

テーマのイメージ画像にマウスカーソルを合わせると、「Assign to Store View」というボタンと、鉛筆のアイコンが表示されます。
標準テーマの場合は複製したテーマが自動的に作成されますが、「My Customizations」にあるカスタマイズ済みのテーマの場合はそのテーマ自体を編集します。カスタムテーマ

そして、自動的に編集画面が別画面として開きます。

テーマ編集

いきなり404Not Foundの画面がでますが、これは心配いりません。
画面上のリンクをクリックしていくと、商品一覧や商品ページなどを表示させることができます。 

クイックスタイル編集機能

画面左下にある2つのアイコンのうち、左側をクリックすると、「クイックスタイル編集機能」が現れます。

クイックスタイル編集

タブがいくつか表示されていますが、要はこの機能ではテーマの色指定を変更できます。
ただし、色を変更してもリアルタイムで反映されるわけではないので、テーマを保存して画面をリロードする必要があります。 

高度な設定

画面左下の2つ目のアイコンをクリックすると、「高度な設定」という機能が開きます。

高度な設定

この機能はCSSやJavaScriptの定義をブラウザ上からカスタマイズできる機能です。
とはいっても構文チェックなどはできないので、単純にカスタムCSSなどをアップロードしてブラウザ上で編集する、という機能です。

また、商品画像などのサイズを変更する機能も備えているので、テーマ上で呼び出すサイズを俯瞰しながら調整していくことができるようになっています。

編集したテーマはどうなるのか

編集したテーマは、「Assign to Store View」ボタンをクリックすると、ストアビューに割り当てることができます。
Magento1ではテーマの編集はテスト環境がなければなかなかやりにくい面がありましたが、Magento2のこの機能を使うことで、ストアビューに割り当てていないテーマでも表示を確認しながらカスタマイズすることができます。