EC-CUBEレスポンシブWebデザイン:ヘッダーのナビ色・ブロックのタイトル色を管理画面から登録。最上部のバーの色変更。サイトの背景変更。

管理画面で、下記の設定ができるようにします。

・グローバルナビゲーションの文字色と背景色
・フッターの文字色と背景色
・レフトカラムに配置した時のブロックタイトルの文字色と背景色
・メインカラムに配置した時のブロックタイトルの文字色と背景色

テキストボックスをクリックすると、色パレットが表示されるので、視覚的に色を選択することができます。
これは、jQuery JSColorで実現しています。

▼jQuery JSColor
http://jscolor.com/

続きを読む EC-CUBEレスポンシブWebデザイン:ヘッダーのナビ色・ブロックのタイトル色を管理画面から登録。最上部のバーの色変更。サイトの背景変更。

EC-CUBEレスポンシブWebデザイン:ナビメニューの項目を管理画面で登録する

グローバルナビゲーションとフッターのナビ項目を管理画面から登録出来るようにします。

▼グローバルナビゲーション

▼フッター

▼管理画面

・「非公開」にしておくと、ナビメニューには表示されません。
・並び順は、「上へ」「下へ」で変更します。
・URLは、http://から始まる絶対パスで入力します。

続きを読む EC-CUBEレスポンシブWebデザイン:ナビメニューの項目を管理画面で登録する

EC-CUBEレスポンシブWebデザイン:グローバルナビゲーション

「ホーム」「当サイトについて」などのグローバルナビゲーションは、PCでは下図のように表示されます。

タブレットやスマホでは、下図の左上のボタンに収納するような形になります。

ボタンをクリックすると、ナビが展開します。

続きを読む EC-CUBEレスポンシブWebデザイン:グローバルナビゲーション

EC-CUBEレスポンシブWebデザイン:メディアクエリとブレイクポイントの設定

レスポンシブWebデザインを実現するためには、メディアクエリが不可欠です。
メディアクエリは、ウィンドウの幅や画像解像度、ディバイスの向きなどを条件にして、HTMLに適用するスタイルを切り替えることができるCSS3の新機能です。
たとえば下記のように使用します。
.block_body {
color:#666;
}
/* タブレット向けのスタイル:460px ~ 979px */
@media only screen and (min-width: 460px) {
.block_body {
color:#000;
}
}
/*  PC向けのスタイル:980px */
@media only screen and (min-width: 980px) {
.block_body {
color:#fff;
}
}


ウィンドウの幅が460px未満(スマホ向け)では、色をグレー(#666)で表示する。
ウィンドウの幅が460px以上(タブレット向け)になったら、色を黒(#000)にする。
ウィンドウの幅が980px以上(PC向け)になったら、色を白(#fff)にする。
460px、980pxが、ブレイクポイントになります。

EC-CUBEレスポンシブWebデザイン:IE8以下で、HTML5とCSS3を読み込む

(1) IE8以下では、HTML5への対応が不十分であるため、html5shiv.jsを読み込み対応します。

html5shiv.jsは、IE8以下のブラウザに対してHTML5の要素や属性を認識させるためのライブラリです。
ただし、動きは重くなります。

▼html5shiv.jsのダウンロード
http://code.google.com/p/html5shiv/

(2) IE8以下では、CSS3への対応が不十分であるため、respond.min.jsを読み込み対応します。

respond.min.jsは、IE8以下のブラウザでCSS3のメディアクエリを利用するためのライブラリです。

▼respond.min.jsのダウンロード
https://github.com/scottjehl/Respond

respond.min.jsは、CSSをリンクする場合に「@import」が効かないので、site_frame.tplで、直接CSSを読み込むように変更します。

■data/Smarty/templates/default/site_frame.tpl

<link rel="stylesheet" href="<!--{$TPL_URLPATH}--/>css/import.css" type="text/css" media="all" />

↓【変更】

<link rel="stylesheet" href="<!--{$TPL_URLPATH}--/>css/reset.css" type="text/css" media="all" />
<link rel="stylesheet" href="<!--{$TPL_URLPATH}--/>css/common.css" type="text/css" media="all" />
<link rel="stylesheet" href="<!--{$TPL_URLPATH}--/>css/contents.css" type="text/css" media="all" />
<link rel="stylesheet" href="<!--{$TPL_URLPATH}--/>css/table.css" type="text/css" media="all" />
<link rel="stylesheet" href="<!--{$TPL_URLPATH}--/>css/bloc.css" type="text/css" media="all" />
<link rel="stylesheet" href="<!--{$TPL_URLPATH}--/>css/bloc_alpha.css" type="text/css" media="all" />
<link rel="stylesheet" href="<!--{$TPL_URLPATH}--/>css/popup.css" type="text/css" media="all" />
<link rel="stylesheet" href="<!--{$TPL_URLPATH}--/>css/print.css" type="text/css" media="all" />

さらに、IE8以下でアクセスした場合にメッセージを表示するようにします。
■data/Smarty/templates/default/index.php に追加

<!--[if lte IE 8.0]>
<style type="text/css">
#ie{
width:100%;
margin:0;
padding:30px 0;
background-color:#f5f5f5;
color:#333333;
border-bottom:1px solid #cccccc;
text-align:center;
font-size:16px;
font-weight:bold;
line-height:1.3em;
}
</style>
<div id="ie">
お使いのブラウザ(IE8以下です)はバージョンが古いため、<br />
サイトを快適にご利用いただけません。<br />
最新のブラウザにアップグレードされることをお勧めします。
</div>
< ![endif]-->

(3) IE7以下で、フルードイメージ(max-width)に対応する。

フルードイメージとは、ブラウザのウィンドウ幅に合わせて画像のサイズを拡大・縮小する手法です。
imgSizer.jsで対応します。

▼imgSizer.jsのダウンロード
http://webscripts.softpedia.com/script/Image-Tools/imgSizer-js-68426.html

続きを読む EC-CUBEレスポンシブWebデザイン:IE8以下で、HTML5とCSS3を読み込む

EC-CUBEレスポンシブWebデザイン:HTML5に変更、viewportの指定

レスポンシブWebデザインをHTML5+CSS3で制作するための設定を行います。
また、各ディバイスにおいて閲覧するサイトをどれくらいの大きさで表示するかを指定するための、viewportの設定を行います。

 DOCTYPE宣言 → < !DOCTYPE html>
 meta要素のcharset属性 → ③ viewportの指定 → 

(1)■data/Smarty/templates/default/site_frame.tpl の冒頭を下記のように変更します。

<!--{*
* Responsive
* Copyright (C) 2013 LOCKON CO.,LTD. All Rights Reserved.
* http://www.lockon.co.jp/
*}-->
< !DOCTYPE html>
<html lang="ja">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<meta charset="<!--{$smarty.const.CHAR_CODE}--/>">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>

続きを読む EC-CUBEレスポンシブWebデザイン:HTML5に変更、viewportの指定

EC-CUBEレスポンシブWebデザイン:スマホからのアクセスに対してPC表示

EC-CUBEサイトをマルチディバイス対応にするためには、まず、スマホからのアクセスに対してPC表示させるようにしなければいけません。

さらに、ここでは、管理画面のパラメータで、スマホからのアクセスをPC表示するか、スマホ表示にするかを設定できるようにします。

(1)データベースに、パラメータ設定を追加

INSERT INTO mtb_constants (id, name, rank, remarks) VALUES ('SPHONE_DESIGN', 'false', 1413, 'スマートフォンアクセス時の表示(true:スマホデザインを表示、false:PCデザインを表示)');

続きを読む EC-CUBEレスポンシブWebデザイン:スマホからのアクセスに対してPC表示