Moral Hazard!!

ドラマーが音楽やホームページやガラクタを作るよ。

bxSliderの画像には幅と高さを指定するのを忘れるな

No Comment html,css,php

自分用メモ。

bxSliderを導入する時は各画像にwidth,heightを指定しないと、Google Chromeで表示順がずれる不具合が起きる。
忘れるな!

参考サイト

http://blog.73web.net/?p=507

商品名が注文メールで文字化けした件(EC-CUBE)

No Comment html,css,php,サイト製作

ある受注自動返信メールをWEBメーラで見ていたら、メール文章の途中から全部斜線が入っていた。

ソースを見ると、途中から打消しタグ<s>が入ってる・・・。

で、商品名を見たら

「お買い得!協力洗剤<S><L>」

…これか。
クライアントさまは商品名にサイズを入れたくてこういう表記をしたようだ。
これがメールクライアントに間違って<s>タグとして認識されてしまっていたと。

タグ自体を除去するなら、メールこちらのように修正すればいいのだが、今回は商品名がそのままタグということで使えない。

タグと誤解されるような商品名にしない方が良いとお願いしておいた。

外部メールサーバを利用して自動送信メールを送る(EC-CUBE 2.13.3)

No Comment html,css,php,サイト製作,

EC-CUBEをインストールしたサーバとは別サーバのメールアドレスを利用して自動送信メールを送る際につまづいたのでメモ。

Gmailや外部メールサーバを利用する際にはSMTP_PORTなどを指定してやる必要があるが、2.13あたりからこれがパラメータ設定に表示されなくなり、config.php、smtp.phpに直接書き込む必要があるらしい。

こちらを参考に、今回メールサーバとして借りたGMO共有サーバSDに設定を置き換えた。

/data/config/config.phpに

define('MAIL_BACKEND', 'smtp');
define('SMTP_HOST', 'smtp**.gmoserver.jp');
define('SMTP_PORT', '465');
define('SMTP_USER', 'ユーザー名');
define('SMTP_PASSWORD', 'パスワード');

と、共用サーバSDのサーバ情報を入力。
(*は数字)

※ユーザー名はメールアカウントの「アカウント」、パスワードはパスワードを入力。

次にモジュールの

/data/module/Mail/smtp.phpも96行目あたりの

var $host = 'smtp**.gmoserver.jp';
var $port = 465;
var $auth = true;
var $username = 'ユーザー名';
var $password = 'パスワード';

各項目を修正。
パスワード下の「HELO / EHLO」あたりからの設定は触らないで大丈夫だった。

スマホサイトでtableを使わないといけない場合

No Comment html,css,php,

wordpressでPCとスマホでデザイン分けしてる時に、一番困るのがtable。
要素が一杯のtableはPCでは見やすいけど、スマホで地獄。
少なくとも横幅をはみ出させずに表示させるためのcss設定をメモ。

  width:auto;
  table-layout:fixed;
  word-break:break-all;
  word-wrap:break-word;

参考リンク。

http://www.understandard.net/css/css009.html

bxsliderで一瞬二枚目以降の画像が表示されてしまい恥ずかしい思いをする時には

1 Comment html,css,php,

画像をスライドさせるjQueryスライダー「bxslider」。画面サイズに合わせて拡大縮小機能もついているので、非常に便利で私もよく使っております。

ただ横幅一杯に使う場合はどうしても画像が大きくなりがちで、その場合ページの読み込みに時間がかかり、一瞬2枚目以降の画像が表示されてしまうことがあります。

これを簡単に解決するためは、jQueryで2枚目以降の画像を表示する時間を遅らせます。

html

<ul class="bxslider">
	<li><img id="img1" src="http://test.com/test1.jpg" /></li>
	<li><img id="img2" src="http://test.com/test2.jpg" /></li>
	<li><img id="img3" src="http://test.com/test3.jpg" /></li>
</ul>

css

#img2, #img3 {
display:none;
}

jQuery

$(document).ready(function(){
  $('.bxslider').bxSlider({
	  auto: true,
	  controls: false,
	  autoHover: true,
	  pager: false,
	  speed: 1200,
	  pause: 6000,
	  mode: 'fade'
  });
$('#img2,#img3').delay(3000).css('display','block');
});

要は
「最初2枚目以降の画像を非表示にして、サイトが読み込まれるまで待ってから表示」
するって形。
具体的には

1, 指定画像(ここでは#img2,#img3)を最初display:noneで非表示にしておく
2, delayで数秒後(ここでは3000=3秒)に表示させる

※wordpressの場合はカプセル化するか、$をjQueryに変更。