スライド画像の編集
一番目につくスライドの編集を行っていきます。
html＞tempalte＞default＞img＞top
の中にmv01〜mv03までの画像がスライドショーで使用しているものです。
これを上書きすればOK。
1120☓448pxで作る。
ページ管理>TOPページ（ページ編集）で、スライダーのタグが確認できる。アンカーで囲って、リンクにするのもいいかもしれない。
EC-CUBE3トップのギャラリーとスライダーの編集
EC_cube3をMacのローカル環境にインストールする
EC_cubeをMacのローカル環境にインストールする
ECサイト構築・リニューアルは「ECオープンプラットフォームEC-CUBE」 – http://goo.gl/pVnSJ
昨年フルリニューアルを行ったEC-CUBE。BootStrap対応でますますシェアを伸ばすのではないでしょうか。
STINGER7のアフィリエイト用カスタマイズ
AFFINGER3使ってたんですけど、ランキングとか使わないんで、やはりメインストリームであるSTINGER7に戻ってきました＾＾;
というわけで、アフィリエイト用にカスタマイズしていきます。
Responsive Mailformのカスタマイズ
簡単設置スマホ対応レスポンシブ メールフォームの無料ダウンロード
既存のサイトでお問い合わせフォームが必要になったのでメモ。 自分はPHPの知識もjavascriptの知識もなし。 当てずっぽうで作成しているので、とんでもないことが起こっても自己責任でお願いします。
Responsive Mailformでやりたいこと
- フォームを２ページ分作成したい
- 住所欄を依頼人の住所と発送先の住所と２個作成したい
でした。既存のサイト自体はレスポンシブ対応済み。ディフォルトの設定ですでにフォームは設置済みとする。
HTML側
まずHTMLからいじっていきます。 強引な感じですがDLしたフォルダを複製しました。
- 「php」フォルダを「php2」に。（中身はそのまま）
- mailform.jsをmailform2.jsに
-
CSSは使わなかったので捨てました。
<form action=”php/mailform.php” method=”post” id=”mail_form”>
<script type=”text/javascript” src=”js/mailform.js”></script>
を
|
1 2 |
<form action="php/mailform2.php" method="post" id="mail_form"> <script type="text/javascript" src="js/mailform2.js"></script> |
ディフォルトでは以下の様になっているので、コピペして、単純にnameの末尾だけ変えます。IDも変えてますけど変えなくてもいけるでしょう。
|
1 2 3 4 5 |
<dt>郵便番号<span>Postal</span></dt> <dd><input type="text" id="postal" name="postal" value="" onkeyup="AjaxZip3.zip2addr(this,'','address_1','address_1');" /> <a href="http://www.post.japanpost.jp/zipcode/" target="_blank">郵便番号検索</a></dd> <dt>住所<span>Address</span></dt> <dd><input type="text" id="address_1" name="address_1" value="" /><input type="text" id="address_2" name="address_2" value="" /></dd> |
これを
|
1 2 3 4 5 6 7 8 9 10 11 |
<dt>郵便番号<span>Postal</span></dt> <dd><input type="text" id="postal" name="postal" value="" onkeyup="AjaxZip3.zip2addr(this,'','address_1','address_1');" /> <a href="http://www.post.japanpost.jp/zipcode/" target="_blank">郵便番号検索</a></dd> <dt>住所<span>Address</span></dt> <dd><input type="text" id="address_1" name="address_1" value="" /><input type="text" id="address_2" name="address_2" value="" /></dd> <dt>送り先郵便番号<span>Postal</span></dt> <dd><input type="text" id="postal2" name="postal2" value="" onkeyup="AjaxZip3.zip2addr(this,'','address_3','address_3');" /> <a href="http://www.post.japanpost.jp/zipcode/" target="_blank">郵便番号検索</a></dd> <dt>送り先住所<span>Address</span></dt> <dd><input type="text" id="address_3" name="address_3" value="" /><input type="text" id="address_4" name="address_4" value="" /></dd> |
こんな感じ。
mainform.PHP側
４０行目あたりに変数がずらずら並んでいるので、先ほどつけたnameを割り込みさせます。
|
1 2 3 4 5 6 7 |
$postal = ''; $address_1 = ''; $address_2 = ''; $postal_2 = ''; $address_3 = ''; $address_4 = ''; $phone = ''; |
さらに下をみるとif文があるので割り込ませましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
if( !(empty($_POST['address_1'])) ){ $address_1 = mb_convert_kana($_POST['address_1'], 'KVa'); } if( !(empty($_POST['address_2'])) ){ $address_2 = mb_convert_kana($_POST['address_2'], 'KVa'); } if( !(empty($_POST['address_3'])) ){ $address_3 = mb_convert_kana($_POST['address_3'], 'KVa'); } if( !(empty($_POST['address_4'])) ){ $address_4 = mb_convert_kana($_POST['address_4'], 'KVa'); } |
config-2.PHP側
こちらも同じ様に追加した分だけ割り込ませましょう
|
1 2 3 4 |
郵便番号：{$postal} 住所：{$address_1} {$address_2} 送り先郵便番号：{$postal_2} 送り先住所：{$address_3} |
maiform2.js側
こちらも同様にコピペで追加。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
if( $('.required').children('input#address_3').length ){ var element = $('.required').children('input#address_3'); var element_2 = $('.required').children('input#address_4'); if( element.val() == '' && element_2.val() == '' ){ var dt = element.parents('dd').prev('dt'); var dt_name = slice_method(dt); element.nextAll('span').text(dt_name +'が入力されていません。'); error++; scroll_point = compare_method(scroll_point, element.offset().top); }else{ element.nextAll('span').text(''); } } |
問題発生
そしてサーバー上で確認したら、必須項目を入れない状態で送信ボタンを押した時に出る文字が途中で途切れてしまった！ 「が入力されていません。」とだけ表示されています。 これは自分がディフォルトのHTMLで作成していないからでした。 英語名を囲ってあるspanを削除すると、消えてしまうのかも。 mailform2の中にある
|
1 |
element.nextAll('span').text(dt_name +'が入力されていません。'); |
を
|
1 |
element.nextAll('span').text(dt_name +'送り先住所が入力されていません。'); |
などに直接変更してしまいましょう。
|
1 |
<dt>郵便番号<span>Postal</span></dt> |
を
|
1 |
<dt>郵便番号<span></span></dt> |
とすればうまくいくかもしれませんが、試してません。
文字化け
最終的に送られてくるメールが文字化けしちゃいました。UTF-8 BOMなしで保存しても出てしまったのですが,php.iniというファイルを作成し
|
1 |
Default_charset = "utf-8" |
と書いてサーバーにぶち込んでみたら治りました。
以上、全く知識のない人間が無理やりカスタマイズした方法でした。 真似しないようにね！
SASSとCOMPASSのインストール
環境 MAC OS 10.11 El Capitan
SASSのインストール
コマンド+Uを押してターミナルを起動し、以下のコードを打ち込む。
sudo gem install -n /usr/local/bin sas
そして以下も様にインストールが始まる。
$ sudo gem install -n /usr/local/bin sass Password: Successfully installed sass-3.4.21 Parsing documentation for sass-3.4.21 Installing ri documentation for sass-3.4.21 1 gem installed $ sass -v Sass 3.4.21 (Selective Steve)
Koalaインストール
Koala – a gui application for LESS, Sass, Compass and CoffeeScript compilation.
GUIをインストールする。設定は「自動コンパイル」「CompassMode」。 以下で行う.SCSSを作成してから設定する。
COMPASSインストール
SASSの機能拡張であるCOMPASSをインストール
$ sudo gem install -n /usr/local/bin compass
だらだら文字が流れてきたら成功。
‘compass create AAA’
と打つとAAフォルダができる。
AAAフォルダのconfig.rbに
http_path = "/" css_dir = "stylesheets" sass_dir = "sass" images_dir = "img" javascripts_dir = "javascripts"
を記入する。（自分の環境によって変える）
.SCSSに
@import "compass"; を記入する。
Chrome FirefoxでSASSを検証できる様に
- config.rbを開いて
sourcemap = truesourcemap = (environment == :production) ? false : trueを追加する。 - charomeのアドレスバーで
chrome://flagを入力。
s
Enable Developer Tools experimentsを探して、オンにする。「experiments」で検索。 - Chrome ブラウザ開発版をインストールする。
- 以上でSASSコードをブラウザ上から参照することができる。
参考
wordpressテーマCSSの最初に書く情報
このサイトで重大なエラーが発生しました。