ITOBEN STYLE > itoben の記事 2013年8月10日 EC-CUBEレスポンシブWebデザイン... 管理画面で、下記の設定ができるようにします。 ・グローバルナビゲーションの文字色と背景色 ・フッターの文字色と背景色 ・レフトカラムに配置した時のブロックタイトルの文字色と背景色 ・メインカラムに配置した時のブロックタイトルの文字色と背景色 テキストボックスをクリックすると、色パレットが表示されるので、視覚的に色を選択することができます。 これは、jQuer... 2013年8月10日 EC-CUBEレスポンシブWebデザイン... グローバルナビゲーションとフッターのナビ項目を管理画面から登録出来るようにします。 ▼グローバルナビゲーション ▼フッター ▼管理画面 ・「非公開」にしておくと、ナビメニューには表示されません。 ・並び順は、「上へ」「下へ」で変更します。 ・URLは、http://から始まる絶対パスで入力します。 （1）データベースに追加 [php] C... 2013年8月10日 EC-CUBEレスポンシブWebデザイン... ヘッダー左上のdescription（サイトの概要）を、管理画面 基本情報管理＞SHOPマスターで設定します。 データベースのdtb_baseinfoに、フィールド「site_description」を追加し、そこに登録するようにします。 [php] ALTER TABLE dtb_baseinfo ADD site_description text; ... 2013年8月10日 EC-CUBEレスポンシブWebデザイン... 「商品検索」「ログイン」「カゴの中」の各ブロックは、アイコンのクリックにより表示・非表示するようにします。 ログイン状態では、下図のように表示されます。 クリックでの表示・非表示の動作は、jQuery ddaccordionで作成しています。 ▼jQuery ddaccordion http://www.dynamicdrive.com/dyna... 2013年8月10日 EC-CUBEレスポンシブWebデザイン... 「ホーム」「当サイトについて」などのグローバルナビゲーションは、PCでは下図のように表示されます。 タブレットやスマホでは、下図の左上のボタンに収納するような形になります。 ボタンをクリックすると、ナビが展開します。 この動作は、jQuery MeanMenu で実現しています。 ▼jQuery MeanMenu http://www.mean... 2013年8月9日 EC-CUBEレスポンシブWebデザイン... フルードグリッドにより、画面サイズにフィットするページを作成します。 ■data/Smarty/templates/default/site_main.tplの変更 [php] id="two_main"id="one_main" class="main" ... 2013年8月9日 EC-CUBEレスポンシブWebデザイン... レスポンシブWebデザインを実現するためには、メディアクエリが不可欠です。 メディアクエリは、ウィンドウの幅や画像解像度、ディバイスの向きなどを条件にして、HTMLに適用するスタイルを切り替えることができるCSS3の新機能です。 たとえば下記のように使用します。 [php] .block_body { color:#666; } /* タブレット向けのスタイル：4... 2013年8月9日 EC-CUBEレスポンシブWebデザイン... （1） IE8以下では、HTML5への対応が不十分であるため、html5shiv.jsを読み込み対応します。 html5shiv.jsは、IE8以下のブラウザに対してHTML5の要素や属性を認識させるためのライブラリです。 ただし、動きは重くなります。 ▼html5shiv.jsのダウンロード http://code.google.com/p/html5shiv... 2013年8月8日 EC-CUBEレスポンシブWebデザイン... レスポンシブWebデザインをHTML5＋CSS3で制作するための設定を行います。 また、各ディバイスにおいて閲覧するサイトをどれくらいの大きさで表示するかを指定するための、viewportの設定を行います。 ① DOCTYPE宣言 → ② meta要素のcharset属性 → 2013年8月8日 EC-CUBEレスポンシブWebデザイン... EC-CUBEサイトをマルチディバイス対応にするためには、まず、スマホからのアクセスに対してPC表示させるようにしなければいけません。 さらに、ここでは、管理画面のパラメータで、スマホからのアクセスをPC表示するか、スマホ表示にするかを設定できるようにします。 （1）データベースに、パラメータ設定を追加 [php] INSERT INTO mtb_const... 45 / 64« 先頭«...102030...4344454647...5060...»最後 »
