- TOP
- Web
ピクセルレートによって切り替える
(function(){ if(window.devicePixelRatio > 1) { $('img').each(function() { $(this).attr('src', $(this).attr('src').replace(/(.jpg|.png|.gif)/gi,'@2x$1')); }); } })();
レスポンシブ上でbody.widthの幅で出し分ける
これは色々おかしいけど、気にしない。
(function(){ $(window).on('load resize', function(){ if($("body").width() < 641){ $('img').each(function(){ $(this).attr("src", $(this).attr('src').replace('@1x','@2x')); }); }else{ $('img').each(function(){ $(this).attr("src", $(this).attr('src').replace('@2x','@1x')); }); } }); })();
htaccessの設定
Apacheのmod_deflateでサイトをgzip圧縮する際にhtaccessに記述するコードをスクラップ。
<IfModule mod_deflate.c> SetOutputFilter DEFLATE # Mozilla4系などの旧ブラウザで無効、MSIE除外 BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html # gifやjpgなど圧縮済みのコンテンツは再圧縮しない SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary SetEnvIfNoCase Request_URI _\.utxt$ no-gzip # htmlやcssなどは圧縮 AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/atom_xml AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/x-httpd-php </IfModule>
動作確認などは参照元で解説されてるのでご参考までに。
転送量を減らしてサイトを高速化しよう
Webサイトの高速化に関して、以前の投稿で「Apacheのmod_expiresでファイルタイプごとにキャッシュをコントロールする方法」を解説しました。
今回は同じくApacheのモジュールmod_deflateについて解説します。
Apacheのmod_deflateでコンテンツを圧縮してサイトを高速化する方法
N○VERまとめで「クリック&いいねされるコピー・タイトル作成法」というまとめのView数が2632しかなくてちょっと面白い訳ですが、実際問題どうやったらクリックされるタイトルや説明文(description)を作れるんでしょうね。
個人的には誰が、いつ、どこで、なにを、なぜ、どのように(5W1H)を意識して、具体的かつ端的に書くと良いかなと思ってますがコレといって成果はでていません。
煽っていくスタイルの方がクリック率が上がるんじゃないかとも思っていたりいなかったり
説明とか
難しい説明は抜きにして、CSSのlinear-gradient() などのグラデーションに関する記述は基本的に画像扱いです。
なのでbackgroundプロパティの場合は、background-sizeなどで縮尺したりも出来たような気がします。またcss3ではbackgroundプロパティに複数画像が設定できたはずなので、今までどおりのurl(画像パス)とあわせてグラデーションの上に透過画像を配置したりすることも出来たり出来なかったりします。詳しくは調べてください。後で書きます。
linear-gradient(角度, 色 位置(0%), 色 位置(10%), ・・・, 色 位置(100%));
みたいな感じです。ブラウザによって複数書かなければなりません。それが以下です。