スポンサーサイト

0

一定期間更新がないため広告を表示しています

2011.09.11 Sunday
-
-
-
-
-
by スポンサードリンク

jQueryでスクロールバーを変える

0

jQueryのライブラリを使えば、デフォルトのスクロールバーを見た目上でスマートに変更できます。すぐ忘れちゃうので、メモ。

下記よりjQueryもろもろをダウンロードしてきます。
jScrollPane

【jQery】
jquery-1.4.3.min.js
jquery.em.js
jquery.mousewheel.js
jScrollPane.js
jScrollPanestop.js

【CSS】
jScrollPane.css

では実際にHTMLから記述してみます。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<script type="text/javascript" src="common/js/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="common/js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="common/js/jquery.em.js"></script>
<script type="text/javascript" src="common/js/jScrollPane.js"></script>
<link href="common/css/jScrollPane.css" rel="stylesheet" type="text/css" >

<script type="text/javascript">
$(function(){
$('#pane1').jScrollPane();
$('#pane2').jScrollPane({showArrows:true, scrollbarWidth: 15, arrowSize: 16});
});</script>
<style type="text/css">

.information_area {
        width:690px;
        height:353px;
        overflow:auto;

}

</style>

<div class="main-box">
<div id="pane1" class="information_area" style="width:687px; height:350px;">
<table class="news">
<tr><td class="news_list">2011.07.10　サイトオープン</td></tr>
<tr><td class="news_list">2011.07.10　サイトオープン</td></tr>
</table>
</div>

demo

スクロールバーの色、幅など詳細な設定は、jScrollPane.cssを書き換えて変更を加えます

javascript ボタン一つでテキストを切り替える

0

サイト制作の案件で、バイリンガルなサイトを作るというプロジェクトで、ボタンをクリックで文章を切り替えるjavascriptを使用しました。画像ギャラリーのサイトでよく使われそうな、ボタンや画像、テキストをクリックすることで、画像を切り替えるものはよく公開されていますが、テキストなどのボックスを切り替えるものがなかなか無かったのでメモしておきます。

【サンプル】

↓テキストをクリックして文章を切り替える

ここをクリックで
テキストを切替

一番目のBOX

【html】

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">

</script>
</head>
<body>
<p class="click" style="border:1px solid #cccccc;width:120px;padding:5px 10px 5px 10px;">ここをクリックで<br />テキストを切替</p>
<div id="box1" style="display:block;">
<p class="change">一番目のBOX</p>
</div>
<div id="box2" style="display:none;">
<p class="change">二番目のBOX</p>
</div>

</body>
</html>

↓テキストを画像にしても機能します

一番目のBOX

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">

</script>
</head>
<body>
<p class="click"><img src="画像のパス"></p>
<div id="box1" style="display:block;">
<p class="change">一番目のBOX</p>
</div>
<div id="box2" style="display:none;">
<p class="change">二番目のBOX</p>
</div>

</body>
</html>

タブ切替のメニューなどはjQueryのプラグインなどでよくありますのでそちらを使い、ボタン一つ(画像もテキストも)のみで切替えスイッチとして使うときに良いと思います。画像のみでも、テキストのみでもなく、divで指定できるのでシンプルに使いまわせます。

EC-CUBE2.11.0をロリポップに入れてみた

0

EC-CUBE2.11.0がリリースされ、さっそくロリポップにインストールしてみました。

■今回のインストール環境
・MySQL 5.1.34
・PHP 5.2.17
*EC-CUBEが推奨するサーバーはこちら

まずはロリポップの管理画面上から、php.iniの設定。
「magic_quotes_gpc」をOFFにして、
「safe_mode」をOFFにする。

このあたりを設定しておけば、すんなりインストール完了。
管理画面にアクセスしてみましたが、デザイン管理が
・PC
・モバイル
・スマートフォン
それぞれ詳細に変更できるようです。

編集可能ページも、以下のページが初期で編集ができるようです。
・TOPページ
・商品一覧ペー
・商品詳細ページ
・MYページ
・MYページ/会員登録内容変更(入力ページ)
・MYページ/会員登録内容変更(完了ページ)
・MYページ/お届け先追加･変更
・MYページ/お気に入り一覧
・MYページ/購入履歴詳細
・MYページ/ログイン
・MYページ/退会手続き(入力ページ)
・MYページ/退会手続き(完了ページ)
・当サイトについて
・現在のカゴの中
・お問い合わせ(入力ページ)
・お問い合わせ(完了ページ)
・会員登録(入力ページ)
・ご利用規約
・会員登録(完了ページ)
・特定商取引に関する法律に基づく表記
・本会員登録(完了ページ)
・商品購入/ログイン
・商品購入/お届け先の指定
・商品購入/お届け先の複数指定
・商品購入/お支払方法・お届け時間等の指定
・商品購入/ご入力内容のご確認
・商品購入/ご注文完了

商品管理ページでの商品登録時、商品種別も選択できるようになりました。

EC-CUBE2.11.0が正式公開！

0

EC-CUBE2.11.0が2011年3月23日に公開されました。
個人的には、ダウンロード販売を標準で対応されたという点と、スマートフォンまで標準対応ということで非常に楽しみです。
サーバーはロリポップにインストールしてみようと思います。

今回のバージョンアップでのポイントは以下になります。

【ポイント１】高速化
データベースの構造と冗長なクエリを見直すことで、大幅な高速化を実現しました。同環境では、前バージョンの EC-CUBE 2.4.4 に比べ、最大60倍の高速化が実現されています。
※EC-CUBEクラウドサーバに、商品1万点を登録時（カテゴリ数30・規格数3×3件）

【ポイント2】新機能
特にご要望の多かったスマートフォン対応やダウンロード販売機能のほかデータベース管理機能やGoogleマップの貼り付け機能など、約150にも及ぶ細かな機能追加を行っています。

■スマートフォンに標準対応
これまでのEC-CUBEには、PC/モバイルサイト用のテンプレートが標準搭載されていましたが、今回新たにスマートフォン用テンプレートも搭載。
管理画面のレイアウト変更から簡単にデザインを編集することも可能です。

■ダウンロード販売機能
これまでの物品販売に加え、2.11.0から、ダウンロードコンテンツの販売が可能になりました。購入いただいた商品は、MYページの購入履歴よりダウンロードいただけます。

■複数配送先を指定可能に
ギフト用途のECサイトでもご利用いただきやすいよう、1回の購入に対して、複数の配送先を指定できるようになりました。よりEC-CUBEの活用範囲が広がります。

■デザインも一新
管理画面・フロント画面ともにデザインを一新しています。

【ポイント3】拡張性
■データベースアクセスの大幅な見直し
2.11.0より、MySQL4.1系のサポートを終了したため、SQLの見通しが大幅に向上しています。またDBアクセスに利用していた PEAR::DBは、PERA::MDB2へ移行しています。また、これまでviewを利用していた部分を削除したため、拡張も容易になりました。

■冗長なプログラムコードの整理
重複した処理の統合、不要な処理の削除などのリファクタリングを行ったことで、カスタマイズ性が向上しています。今回のリファクタリングは、限られた時間の中で行ったため、開発チームとしては完全なものとは考えておらず、今後も継続して行っていく予定です。

■管理画面のXHTML化
管理画面をXHTMLで組み直しました。
タイトルに使われていた画像などもテキストに置き換えています。これにより、機能追加やカスタマイズにかかる工数を大幅に短縮することが可能となっています。

EC-CUBEをカスタマイズする

0

EC-CUBEのカスタマイズメモです。

カスタマイズといっても、何をどうすればいいのか不明なので、書籍などの購入も検討したのですが、バージョンの問題も出てきそう。。。(2011.03.19現在最新Ver2.4.4)
EC-CUBE〈Ver2．4．0対応〉公式ガイドブック
EC-CUBE〈Ver2対応〉公式ガイドブック

上記のようなものも販売されていますが、下記サイトを見ればかなり参考になります。
EC-CUBEマニュアルサイト

まずはカスタマイズするにあたり、必ずバックアップをとります。

1.デフォルトのテンプレートをバックアップ
管理画面にログインし、「デザイン管理」⇒「テンプレート設定」⇒デフォルトのテンプレートの欄からダウンロードをクリックして任意の場所に保存します。

これでバックアップのGZファイルがダウンロードできました。

2.バックアップファイルをアップロードする
今度はバックアップしたファイルをアップロードし、このファイルをカスタマイズしていきます。
管理画面にログインし、「デザイン管理」⇒「テンプレート追加」
今回は以下のように入力しました。
テンプレートコード：custom
テンプレート名：カスタマイズ
テンプレートファイル：参照ボタンからダウンロードしたGZファイルを選択し。

アップロードボタンをクリックして完了。

テンプレート設定に戻ってみると、カスタマイズという項目が増えています。
カスタマイズのほうを選択して、こちらを反映させ、いじっていきます。

3.カスタマイズするファイルの場所を把握する
カスタマイズはＰＣ用とモバイル版それぞれをカスタマイズすることができます。
テンプレートの場所を把握します。

【カスタマイズファイル】
▼CSSのファイル場所
shop/user_data/packages/custom/css/

▼画像のファイル場所
shop/user_data/packages/custom/img/

※index.php(トップ)のカスタマイズは、後述します。

【モバイルのカスタマイズファイル】
▼トップのテンプレートの場所
data/Smarty/templates/custom/mobile/
・top.tplからインクルードで同ディレクトリのfooter.tplなどを読み込んでいます。


4.ファイルの構成

webデザイナーなら、やはり完全にオリジナルのデザインを組み込みたいと考えるものです。その際に注意しておいたほうがいいのが、セレクタ名の指定です。
オリジナルのセレクタ名でも問題有りませんが、CSSファイルもそれに応じて書き換えるようになるので、デフォルトのセレクタ名を把握し、準じるようにコーディングしたほうが効率的です。

【3カラム】
<body>
　　<div id="header">
　　</div>
　　<div id="container">
　　　　<div id="leftcolum">
　　　　　　<div id="cartarea">
　　　　　　</div>
　　　　　　<div id="categoryarea">
　　　　　　　　<ul id="categorytree
　　　　　　　　　　<li class="level1"></li>
　　　　　　　　</ul>
　　　　　　</div>
　　　　　　<div id="guidearea">
　　　　　　　　<ul id="categorytree
　　　　　　　　　　<li class="level1"></li>
　　　　　　　　</ul>
　　　　　　</div>
　　　　</div>
　　　　<div id="three_maincolum">
　　　　　　<div id="flasharea">
　　　　　　</div>
　　　　　　<div id="newsarea">
　　　　　　</div>
　　　　　　<div id="recomendarea">
　　　　　　　　<div id="recomendblock">
　　　　　　　　　　<div id="recomendleft">
　　　　　　　　　　</div>
　　　　　　　　　　<div id="recomendright">
　　　　　　　　　　</div>
　　　　　　　　</div>
　　　　　　</div>
　　　　</div>
　　　　<div id="leftcolum">
　　　　　　<div id="loginarea">
　　　　　　　　<form>
　　　　　　　　<div id="login">
　　　　　　　　</div>
　　　　　　　　</form>
　　　　　　</div>
　　　　</div>
　　</div>
　　<div id="footer">
　　</div>
</body>

5.index.phpのカスタマイズ

全体の編集はこちらからできます。
/data/Smarty/templates/default/site_main.tpl

ですが、実際にそれぞれのボックスを編集するには、管理画面からブロック編集やヘッダー/フッター編集からテンプレートをカスタムできるので、それを利用すれば３カラムレイアウトは問題なく組めます。
全体を囲むdivなどを使う場合でも、ヘッダー編集欄に開始タグとフッター編集欄に終了タグを記述すればいいわけです。

それぞれのブロックの編集
管理画面にログインし、「デザイン管理」⇒「ブロック編集」⇒「編集可能ブロック」

ヘッター/フッターの編集
管理画面にログインし、「デザイン管理」⇒「ヘッダー/フッター編集」

6.オリジナルのレイアウト編集するコツ
まずは既存のセレクタ名をそのまま使って、普通にレイアウトをHTML+CSSで組みます。
CSSも作りなれた形で作ります。
作ったCSSを以下に突っ込みます。
shop/user_data/packages/custom/css/

以下CSSファイルに@importの形で追記。
shop/user_data/packages/custom/css/import.css

※オリジナルで作ったCSSの３ファイルへの記述を追加します。
hoge.css

【変更前】
@charset "utf-8";

@import url("./main.css");
@import url("./index.css");
@import url("./products.css");
@import url("./under.css");
@import url("./under02.css");
@import url("./mypage.css");
@import url("./window.css");
* {
       padding:0;
       margin:0;
}

↓

【追記後】
@charset "utf-8";

@import url("./main.css");
@import url("./index.css");
@import url("./products.css");
@import url("./under.css");
@import url("./under02.css");
@import url("./mypage.css");
@import url("./window.css");
@import url("./hoge.css"); /*←ここに追加*/
* {
       padding:0;
       margin:0;
}

これでオリジナルのCSSを反映させることが可能になりました。

7.トップページのみに画像を表示させる記述

<!--{assign var=●● value="`$smarty.const.URL_DIR`index.php"}-->
<!--{ if $smarty.server.PHP_SELF==$●●}-->
表示させたい内容をここに書く
<!--{/if}-->

この記述の●●の部分には、自分が分かり易い単語を入れてください。
また、index.phpの部分には、その画像を表示させたいページのパスを記入。
こっちも参考に。

トップページのみ表示

表示させたい内容をここに書く


商品詳細ページだけに表示

<!--{if $smarty.server.PHP_SELF == "/products/detail.php"}-->
表示させたい内容をここに入れる
<!--{else}--><!--{/if}-->

カテゴリIDや商品IDで振り分ける
<!--{if $category_id == "1"or $arrProduct.product_id == "5"}-->
表示させたい内容をここに入れる
<!--{/if}-->

8.商品一覧ページのCSS

shop/user_data/packages/custom/css/products.css
カラムにズレが生じていたため、clearfixを挿入。
<ul class="pagenumberarea">のところに挿入。

<ul class="pagenumberarea clearfix">

9.商品詳細ページでタイトルにサブカテゴリも表示

data/class/pages/products/LC_Page_Products_Detail.php
上記のファイルの// サブタイトルを取得を書き換える。

// サブタイトルを取得　こちらがカスタム
    $arrCategory_id = $objDb->sfGetCategoryId($arrRet[0]['product_id'], $status);
    $arrFirstCat = $objDb->sfGetFirstCat($arrCategory_id[0]); // この行いらないかも
    $this->tpl_subtitle = $objDb->sfGetCatCombName($arrCategory_id[0]);

10.サブカテゴリも、メニューに常に表示させる

デフォルトの設定では、カテゴリメニューにサブカテゴリは表示されないようになっています。

管理画面にログインし、デザイン管理⇒ブロック編集⇒カテゴリ
以下の記述を探し、

<!–{if $arrTree[cnt].display == 1}–>

と書かれている部分を

<!–{if $arrTree[cnt].display == 1|| $arrTre[cnt].level <=1}–>

へ修正すればＯＫ。

<=1}の部分を<=2}にすると孫カテゴリまで<=3}にするとひ孫と階層が増えていきます。

11.モバイルの新規ページを追加する

data/class/pages/guide/LC_Page_Guide_Usage.php
に以下の番号を増やす。

switch (@$_GET['page']) {
case '1':
case '2':
case '3':
case '4':

↓

switch (@$_GET['page']) {
case '1':
case '2':
case '3':
case '4':
case '5':
case '6':
case '7':
case '8':
case '9':
case '10':
case '11':
case '12':
case '13':
case '14':
case '15':
case '16':
case '17':
case '18':
case '19':
case '20':

次にdata/Smarty/templates/テンプレート/mobile/guide
フォルダにてusage1.tplファイルをコピーしてusage5.tpl～usage20.tplの間で
名前を変えて複製。ページ数を増やす場合は番号を追加する。

参照元はこちら
モバイルの新規ページを作成するにはどの様にしたら良いでしょうか？

12.子カテゴリ(商品一覧ページ)で子カテゴリ名を見出しに追加

子カテゴリ一覧ページの見出しに以下の形で表示させる。
親カテゴリ名｜子カテゴリ名

data/class/pages/products/LC_Page_Products_List.php

[修正前]
$arrFirstCat = $objDb->sfGetFirstCat($arrCategory_id[0]);
$tpl_subtitle = $arrFirstCat['name'];

[修正後]
$tpl_subtitle = $objDb->sfGetCatCombName($arrCategory_id[0]);

とすることで、親カテゴリー＋子カテゴリーも表示する事が可能。

参照元はこちら
http://yaplog.jp/af698t66/archive/31

13.おすすめ商品を２列から３列に変更する

管理画面にログインし、デザイン管理⇒ブロック編集⇒オススメ商品を編集。

1. step=2をstep=3に変更する。
[修正前]

<!–{section name=cnt loop=$arrBestProducts step=2}–>

[修正後]

<!–{section name=cnt loop=$arrBestProducts step=3}–>

2. ２つめの商品ブロック<div class="recomendright">～</div>の
recomendright を recomendleft に変更し、１行目の下記を修正。
[修正前]

<!–{assign var=cnt2 value=`$smarty.section.cnt.iteration*$smarty.section.cnt.step-1` }–>

[修正後]

<!–{assign var=cnt2 value=`$smarty.section.cnt.iteration*$smarty.section.cnt.step-2` }–>

3.さらに

[修正前]

<!–{assign var=price01 value=`$arrBestProducts[cnt].price01_min`}–>
 <!–{assign var=price02 value=`$arrBestProducts[cnt].price02_min`}–>

[修正後]

 <!–{assign var=price01 value=`$arrBestProducts[$cnt2].price01_min`}–>
 <!–{assign var=price02 value=`$arrBestProducts[$cnt2].price02_min`}–>

4.この２つ目の商品ブロックをコピーして追加（１つ目の商品ブロックでもどちらでも可）
<div class="recomendleft">～</div>の recomendleft を recomendright に変更。

5.var=cnt2 を var=cnt3 に、step-2 を step-1 に変更↓
[修正前]

 <!–{assign var=cnt2 value=`$smarty.section.cnt.iteration*$smarty.section.cnt.step-2` }–>

[修正後]

<!–{assign var=cnt3 value=`$smarty.section.cnt.iteration*$smarty.section.cnt.step-1` }–>

6.[$cnt2] を [$cnt3] に変更↓

[修正前]

<!–{assign var=price01 value=`$arrBestProducts[$cnt2].price01_min`}–>
 <!–{assign var=price02 value=`$arrBestProducts[$cnt2].price02_min`}–>

[修正後]

 <!–{assign var=price01 value=`$arrBestProducts[$cnt3].price01_min`}–>
 <!–{assign var=price02 value=`$arrBestProducts[$cnt3].price02_min`}–>

※今回の場合はコンテンツエリアを広げているので、スタイルシートでrecomendrightをfloat:left;に変更しました。←通常は必要ないと思います。
参照元
http://www28.atwiki.jp/lucier/pages/14.html

14.タイトルをSEO最適化

デフォルトでは、各ページのタイトルタグが以下のようになっています。
ex)商品詳細ページ
⇒　ショップ名｜商品詳細｜商品名

SEO対策的に、やはりここは気になるので、まず下記のように順番を逆にする。
⇒　商品名｜ショップ名

手順は、/data/Smarty/templates/default/site_frame.tpl
の

 <title><!--{$arrSiteInfo.shop_name}-->/<!--{$tpl_title|escape}--></title>

を下記に変更

 <title><!--{$tpl_title|escape}-->/<!--{$arrSiteInfo.shop_name}--></title>

次に「商品詳細」という文字を消し去る。
/data/class/pages/product/LC_Page_Products_Detail.php のファイルを編集。

// タイトルに商品名を入れる
$this->tpl_title = "商品詳細 ". $this->arrProduct["name"];

っていうのと

// タイトルに商品名を入れる
$this->tpl_title = "商品詳細 ". $this->arrProduct["name"];

の２箇所にある「商品詳細」の文字を削除する。
これで完了。

15.管理画面から編集できない各ページを編集

当サイトについてや特定商取引法などのページのカスタマイズはテンプレートファイルなどを直接編集する必要があります。

■お問い合わせ
/home/web/sample.ec-cube.net/data/Smarty/templates/contact/index.tpl
■お問い合わせ確認
/home/web/sample.ec-cube.net/data/Smarty/templates/contact/secret.tpl
■お問い合わせ完了
/home/web/sample.ec-cube.net/data/Smarty/templates/contact/confirm.tpl
■特定商取引法に関する法律に基づく表記
/home/web/sample.ec-cube.net/data/Smarty/templates/order/index.tpl

■当サイトについて
/home/web/sample.ec-cube.net/data/Smarty/templates/abouts/index.tpl

■エラー画面(共通)
/home/web/sample.ec-cube.net/data/Smarty/templates/error.tpl

■会員登録(入力)
/home/web/sample.ec-cube.net/data/Smarty/templates/entry/index.tpl
■会員登録(確認)
/home/web/sample.ec-cube.net/data/Smarty/templates/entry/confirm.tpl
■会員登録(仮登録完了)
/home/web/sample.ec-cube.net/data/Smarty/templates/entry/complete.tpl
■会員登録(規約)
/home/web/sample.ec-cube.net/data/Smarty/templates/entry/kiyaku.tpl
■会員登録(エラー)
/home/web/sample.ec-cube.net/data/Smarty/templates/regist/error.tpl
■会員登録(本登録完了)
/home/web/sample.ec-cube.net/data/Smarty/templates/regist/complete.tpl

■パスワードを忘れた場合
/home/web/sample.ec-cube.net/data/Smarty/templates/forgot/index.tpl
■パスワードを忘れた場合(秘密の質問)
/home/web/sample.ec-cube.net/data/Smarty/templates/forgot/secret.tpl
■パスワードを忘れた場合(完了)
/home/web/sample.ec-cube.net/data/Smarty/templates/forgot/complete.tpl

■商品購入(ログイン)
/home/web/sample.ec-cube.net/data/Smarty/templates/shopping/index.tpl
■商品購入(非会員購入時・お客様情報登録)
/home/web/sample.ec-cube.net/data/Smarty/templates/shopping/nonmember_input.tpl
■商品購入(お届け先選択)
/home/web/sample.ec-cube.net/data/Smarty/templates/shopping/deliv.tpl
■商品購入(お支払い方法選択)
/home/web/sample.ec-cube.net/data/Smarty/templates/shopping/payment.tpl
■商品購入(商品購入確認)
/home/web/sample.ec-cube.net/data/Smarty/templates/shopping/confirm.tpl
■商品購入(商品購入完了)
/home/web/sample.ec-cube.net/data/Smarty/templates/shopping/complete.tpl

■商品詳細　拡大イメージ
/home/web/sample.ec-cube.net/data/Smarty/templates/products/detail_image.tpl
■ユーザーレビュー登録
/home/web/sample.ec-cube.net/data/Smarty/templates/products/review.tpl
■ユーザーレビュー確認
/home/web/sample.ec-cube.net/data/Smarty/templates/products/review_confirm.tpl
■ユーザーレビュー完了
/home/web/sample.ec-cube.net/data/Smarty/templates/products/review_complete.tpl

■ＭＹページ(購入履歴一覧)
/home/web/sample.ec-cube.net/html/user_data/templates/mypage/index.tpl
■ＭＹページ(購入履歴詳細)
/home/web/sample.ec-cube.net/html/user_data/templates/mypage/history.tpl
■会員登録内容
/home/web/sample.ec-cube.net/html/user_data/templates/mypage/change.tpl
■会員登録内容（確認）
/home/web/sample.ec-cube.net/html/user_data/templates/mypage/change_confirm.tpl
■会員登録内容（完了）
/home/web/sample.ec-cube.net/html/user_data/templates/mypage/change_complete.tpl
■お届け先追加・変更（一覧）
/home/web/sample.ec-cube.net/html/user_data/templates/mypage/delivery.tpl
■お届け先追加・変更（追加）
/home/web/sample.ec-cube.net/html/user_data/templates/mypage/delivery_addr.tpl
■退会手続き
/home/web/sample.ec-cube.net/html/user_data/templates/mypage/refusal.tpl
■退会手続き（確認）
/home/web/sample.ec-cube.net/html/user_data/templates/mypage/refusal_confirm.tpl
■退会手続き（完了）
/home/web/sample.ec-cube.net/html/user_data/templates/mypage/refusal_complete.tpl

参考元
EC-CUBEマニュアルサイト

環境：EC-CUBE 2.4.4

EC CUBEインストールメモ【1】

0

EC-CUBE（バージョン2.4.4）のインストール方法をメモしておきます。
■システム要件
データベース：MySQL4.1以降（MySQL5.x系を含む）
　　　　　　　PostgreSQL 7.4.x以降
言語：PHP4.3.3以降、PHP5.0.x以降
CPU:intel Pentium互換 300MHz以上を推奨
MEM:OSの最低動作環境以上
HDD:50MB以上を推奨
管理機能対応ブラウザ：IE6以上、FireFox 1.5.0.4以上、Safari 4以上
EC-CUBE開発コミュニティ

■今回のインストール環境
・ロリポップ(*SSLが使えないので、勉強用としてロリポップにしました)
・MySQL 5.0
・PHP 5.2
*EC-CUBEが推奨するサーバーはこちら

今回はロリポップにインストールしたということで、こちらのページに詳しく載っています。※パーミッションの変更した気がします・・・失念
ロリポップ　EC-CUBEの設置

1.インストールが終わったら、index.phpを削除。

2.ロリポップの管理画面から、php.iniの設定項目のうち、『magic_quotes_gpc』の設定を『OFF』にします。
これにより、商品登録時にカテゴリ登録が可能になります。

3.管理画面にアクセスして、正常に動作するか確認します。
【管理画面のアドレス】
http://hogemoge.lolipop.jp/shop/admin/

4.管理画面の『システム設定』>『パラメーター設定』とアクセスし、『パラメーター設定』内の『MAIL_BACKEND』の値を『smtp』から『mail』に変更します。これでメールが受信できます。

ショッピングカート選びの提案

0

個人のお客様から法人まで、オンラインショップを導入することは今や珍しくありません。個人で手作りのモノを小規模に販売されている主婦の方も大勢います。

ショッピングカートを導入する場合、目的やクライアントの知識や本気度、予算、セキュリティ面、自社の開発環境やリソースなどによって制作会社は様々な提案をされていることと思われます。

カラーミーショップ！プロやらMakeShopなどのASP型レンタルカートを使用しているクライアントからよく耳にするのが、カスタマイズの制限による不満。ランニングコストも考慮した場合納得している場合が多いですが、企業戦略としてクライアントニーズに沿わない場合は別のシステムによる提案ができればリニューアルなどの仕事いただけると思います。

どのシステムを利用するにせよ一長一短ありますが、コスト面やカスタマイズ性を重視した場合、提案しやすいのがショッピングシステムを簡単に構築できるオープンソースのソフトウェア。カラーミーショップ！プロのテンプレート作成などもたまに仕事として受けるのですが、やはり制限の壁にぶち当たります。こういった問題をひとまずクリアできるものとして、個人的にECCUBEを提案するようにしています。

提案する側として、インストールからカスタマイズまでの経験が有ったほうがいいでしょうから勉強中です。。

レンタルサーバーのフルパスを調べる方法

0

レンタルサーバーのフルパスを調べなくてはいけない時、レンタルサーバーのサイトにいけば大抵は記述されています。別の方法でもフルパスを調べることができるので参考までに。

phpファイルを作成し、下記を記述する。

<?php
echo __FILE__;
?>

上記のファイルにアクセスすると、ディレクトリまで表示がされる。

jQuery plugin サンプル集

2

010101cc
2011-01-10 19:06:03
010101cc
2011-01-10 19:06:02

jQueryの実践でも使えそうな小技集です。
かっこいいだけで使えないjQueryって、ものすごく多いですが、個人的に仕事で使っても差し支えないようなものを並べていきます。

1.フォームのテキストエリアに注釈が出る。

Validation Hints

2.テキストエリアの角を丸くする
Opensource - AJAX - Jqtransfor

3.チェックボックスをかっこよくカスタマイズ
prettyCheckboxes

4.選択部分をハイライト表示
Highlight DEMO

5.必須が未入力の場合、赤字で表示
jQuery validation

floatの解除方法

1

010101cc
2011-01-10 19:05:52

float解除

どうしてもレイアウトが崩れる場合、float解除するのをつい忘れてることがたまにある。定番のclearfixの方法でやる場合と、空の<div class="clear"></div>なんかを作ることが多いかと思われますのでＩＥ６の対処も含めメモ。
<div class="clear"></div>　←（この方法だと、IE6で無駄な行ができます。）
自分の場合、初期スタイルシートは使いまわしで使うので大丈夫ですが、念のためメモしておきます。

■まずは定番のclearfix

/*======================================
clearfix
=======================================*/
.clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
}
.clearfix {
display: inline-block;
}
/* Hides from IE-mac ¥*/
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
/* End hide from IE-mac */

■それから.clearで解除する方法

/*IE6で一行分の空白（スペース）も消す*/
.clear{
    clear: both;
    font-size: 1%;
    line-height: 1%;
    width: 1%;
}

とか
.clear{
    clear: both;
    font-size: 0px;
    line-height: 0px;
}

						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31
<< July 2017 >>

webデザイナーのちょっとしたメモ

スポンサーサイト

jQueryでスクロールバーを変える

javascript ボタン一つでテキストを切り替える

【サンプル】

EC-CUBE2.11.0をロリポップに入れてみた

EC-CUBE2.11.0が正式公開！

EC-CUBEをカスタマイズする

EC CUBEインストールメモ【1】

ショッピングカート選びの提案

レンタルサーバーのフルパスを調べる方法

jQuery plugin サンプル集

Validation Hints

floatの解除方法

float解除