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
画像をスライドさせる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に変更。
サーバーのエラーログに
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スタイルをいじくったら、平気で上のソースを吐く事。
もうそろそろエディタ変えないとやばいな。