Moral Hazard!!

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

スマホサイトで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に変更。

エラーログにnone, refererが出る。

No Comment html,css,php,,

サーバーのエラーログに

File does not exist: folder/none, referer:http://domain.jp/

とやたら出力される。
気になって当該サイトのFirebugのエラーを見たところ、cssファイルからのリンクエラーが出ていた。
そのcssには

#container {
background-image: url(none);
}

と背景色は白、画像は「無し」を指定してある。

実はこれが問題で、背景を無しと正しく指定するには

#container {
background-image: none;
}

としないとサーバーが404エラーを返してしまう。
こちらに詳しい事が書いてあります。素敵。

何がダメって、Dreamweaverで背景無しを指定しようとcssスタイルをいじくったら、平気で上のソースを吐く事。
もうそろそろエディタ変えないとやばいな。