カテゴリー: EC-CUBEレスポンシブWebデザイン

 

デモサイトを基本としたサイト構築

デモサイト

http://www.kaiplus.com/responsive/res213standard_02/

機能

オリジナルのEC-CUBEに80個ほどの機能を追加しています。

ネットショップ（EC-CUBE）
制作費（税別）： 220,000 円～
レスポンシブWebデザインを適用。
機能の追加や画像等の作成により、多少金額がプラスされる場合があります。

デモサイトを基本としたサイト構築後に現行サイトのデータを移行

デモサイト

http://www.kaiplus.com/responsive/res213standard_02/

機能

オリジナルのEC-CUBEに80個ほどの機能を追加しています。

ネットショップ（EC-CUBE）
制作費（税別）： 250,000 円～
レスポンシブWebデザインを適用。
機能の追加や画像等の作成により、多少金額がプラスされる場合があります。
▼移行データ
商品データ、受注データ、会員データ
現行サイトが2.12系または2.13系の場合は、問題なく移行できますが、2.11系では商品規格のデータは移行できません。

デモサイトの機能を基本としてデザインやレイアウト等を大幅にカスタマイズしたサイト構築

参考サイト

アパレル　画像販売　空き家バンク

機能

オリジナルのEC-CUBEに80個ほどの機能を追加しています。

ネットショップ（EC-CUBE）
制作費（税別）： 300,000 円～
レスポンシブWebデザインを適用。
機能の追加や画像等の作成により、多少金額がプラスされる場合があります。

WordPressを利用したサイト構築

参考サイト

http://13butsu.com/
http://minobu-bunkyo.com/
http://balianpower.com/

ブログ形式（WordPress）
制作費（税別）： 200,000 円～
レスポンシブWebデザインを適用も可能です。
デザインやレイアウトのご要望により、多少金額がプラスされる場合があります。

サーバ契約、ドメイン取得等の手続き代行

ネットショップ（EC-CUBE）　ブログ形式（WordPress）
制作費（税別）： 10,000 円～
Webサイトを運営するためには、レンタルサーバ契約とドメイン取得が不可欠です。
サイトは立ち上げたいが、手続きが困難だとお考えの方には、こちらでその手続きを代行することが可能です。
サーバとドメインの契約費・取得費・維持費に関わる料金は、別途お客様のお支払いになります。 価格はあくまでも代行費用としての金額です。

 

※　制作費は変更の可能性もあります。詳細はホームページでご確認ください。

下記の方が対象です。ファイルの修正をお願いします。
2013年9月14日以前に、レスポンシブWebデザインをご購入してくださった方
（レスポンシブWebデザインのバージョンすべてに共通）

（1）■data/class/pages/LC_Page.php　2カ所追加

①　はじめの部分、　// {{{ properties　の、
/** プラグインを実行フラグ */
var $plugin_activate_flg = PLUGIN_ACTIVATE_FLAG;　の次に追加

/** スマホ・PC判別 */
var $arrSphone;

②　function init()　内の最後に追加

// スマホ・PC判別
$ua = $_SERVER['HTTP_USER_AGENT'];
if(ereg("Android|iPhone", $ua)){
// スマートフォン端末
$this->arrSphone = true;
}else{
// PC端末
$this->arrSphone = false;
}

（2）■data/Smarty/templates/default/site_frame.tpl　変更
130行目あたり

<!--{assign var=list value="`$smarty.const.ROOT_URLPATH`products/list.php"}-->
<!--{if $smarty.server.PHP_SELF==$list}-->
<script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery-1.4.2.min.js"></script>
<!--{else}-->
<script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery-1.8.2.min.js"></script>
<!--{/if}-->

↓【変更】

<!--{assign var=list value="`$smarty.const.ROOT_URLPATH`products/list.php"}-->
<!--{if $smarty.server.PHP_SELF==$list}-->
<!--{if $arrSphone === true}-->
<script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery-1.8.2.min.js"></script>
<!--{/if}-->
<!--{if $arrSphone === false}-->
<script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery-1.4.2.min.js"></script>
<!--{/if}-->
<!--{else}-->
<script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery-1.8.2.min.js"></script>
<!--{/if}-->

▼修正ファイルダウンロード

ダウンロードはこちら

○　上記２つのファイルに、カスタマイズを追加していない場合は、上書きしてください。
○　カスタマイズしている場合は、お手数ですが修正箇所のコード書き換えをお願いします。

続きを読む ECCUBEレスポンシブWebデザインの修正ファイル

「高度な設定」タブをクリックし、スタイルシートクラスにresponsiveと入力します。
別cssファイルで、メディアクエリを設定しています。
ただし、テーブルにテキストのみ入力の場合に限ります。

EC-CUBEの場合、thのグレーはtable.cssで設定されています。

続きを読む CKeditorとレスポンシブWebデザイン（6）：スマホ表示でテーブルのセルをすべて1列に並べる

「高度な設定」タブをクリックし、スタイルシートクラスにno_borderと入力します。

が設定され、罫線は表示されません。

※罫線を表示するときは、no_borderを入力しません。

続きを読む CKeditorとレスポンシブWebデザイン（5）：テーブルの罫線を表示しない

「高度な設定」タブをクリックし、スタイルシートクラスにimageと入力します。

が設定され、1行のセルは等分され、配置された画像は、テーブルの縮小（ブラウザの縮小）に合わせて自動的に縮小されるようになります。

続きを読む CKeditorとレスポンシブWebデザイン（4）：テーブルのセルに画像を配置する

テーブルボタンをクリックすると、テーブルプロパティが表示されます。
（1）「幅」の値を削除して空欄にします。
（2）「ボーダーサイズ」の値を「0」にします。

続きを読む CKeditorとレスポンシブWebデザイン（3）：テーブルを作成するときの注意点

サーバーブラウザ等で画像をアップロードした後、イメージプロパティ画面が表示されます。

アップロードした画像のサイズが、「幅」と「高さ」に自動入力されますが、「幅」と「高さ」は空欄にします。
幅と高さを指定してしまうと、ブラウザが縮小された際、それに合わせて画像が縮小されなくなってしまいます。
レスポンシブWebデザインとしての機能が働きませんので、注意してください。

アップロードする画像は、大きめのものでも構いません。
ブラウザに合わせて縮小されて表示されます。
ただし、見た目の縮小ですので容量は変わりません。アップロードする前に、大きな画像は小さくするなど、画像の調整をしておくのがいいでしょう。

続きを読む CKeditorとレスポンシブWebデザイン（2）：画像を配置するときの注意点

HTMLの記述
CKeditorの記述箇所を、

で挟んでいます。
は、EC-CUBEでデータベースから記事内容を読み込んでいる記述。

<div id="document_area">
<!--{$arrRet.special_document|nl2br_html}-->
<div style="clear:both;"></div>
</div>

続きを読む CKeditorとレスポンシブWebデザイン（1）：CSSの設定