EC-CUBEカスタマイズ！レスポンシブデザインに対応する

「EC-CUBEカスタマイズ！レスポンシブデザインに対応する」では、EC-CUBE2.13をカスタマイズしてレスポンシブデザインに対応する方法を説明します。

最近のWebサイトではもうレスポンシブ対応が当たり前になっています。
EC-CUBEで作られたサイトも例外ではありません。

ところが、EC-CUBEは管理画面のメニュから「デザイン管理」を選択すると、「PC」「モバイル」「スマートフォン」それぞれのレイアウトやページ設定が出来るようになっています。

レスポンシブでは「PC」「スマートフォン」で分ける必要がなく、画面幅でスタイルが変わるようにCSSで書かれています。

EC-CUBEレスポンシブ対応のサイトを作る場合はどうしたらいいのかを紹介します。

デザインはPCのみを使う

EC-CUBEのデザイン管理では「PC」を選択して、レイアウト設定、ページ詳細設定、ブロック設定を行います。
「スマートフォン」には設定しません。

当然ですが、テンプレートも「default」を修正します。
「sphone」は触りません。

端末の判別をPCにする

SC_Display.php に端末の種類を判別しているところがあります。
ここを修正して、スマホで表示されたときもPCで表示したと判定させるようにします。

下記のメソッドを、SC_Display_Ex.php にコピーして修正をしてください

	public function setDevice($device = DEVICE_TYPE_PC)
	{
		switch ($device) {
			case DEVICE_TYPE_MOBILE:
				if (USE_MOBILE === false) {
					exit;
				}
				$this->response->setContentType('text/html');
				$this->setView(new SC_MobileView_Ex());
				break;
			case DEVICE_TYPE_SMARTPHONE:
//				$this->setView(new SC_SmartphoneView_Ex());
//				break;
			case DEVICE_TYPE_PC:
				$this->setView(new SC_SiteView_Ex());
				break;
			case DEVICE_TYPE_ADMIN:
				$this->setView(new SC_AdminView_Ex());
		}
		$this->deviceSeted = true;
	}

１２行目、１３行目をコメントアウトすることで、スマホでもPCとおなじになります。

	public static function detectDevice($reset = FALSE)
	{
		if (is_null(SC_Display_Ex::$device) || $reset) {
			$nu = new Net_UserAgent_Mobile();
			$su = new SC_SmartphoneUserAgent_Ex();
			if ($nu->isMobile()) {
				SC_Display_Ex::$device = DEVICE_TYPE_MOBILE;
			} elseif ($su->isSmartphone()) {
				SC_Display_Ex::$device = DEVICE_TYPE_PC;
//				SC_Display_Ex::$device = DEVICE_TYPE_SMARTPHONE;
			} else {
				SC_Display_Ex::$device = DEVICE_TYPE_PC;
			}
		}

		return SC_Display_Ex::$device;
	}

１０行目をコメントアウトして、９行目を追加します。

レスポンシブではなく、PC、スマホそれぞれで完全に独自のデザインの場合は、「PC」「スマートフォン」それぞれで設定を行ってください

まとめ

いかがでしたか、この修正を入れるとスマホでもPCと同じレイアウト、デザインで表示するようになります。
レスポンシブ対応が入ったスタイルを使用していればスマホに適した表示になるでしょう。