CSS、デザイン、プログラミング等など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）を意識して、具体的かつ端的に書くと良いかなと思ってますがコレといって成果はでていません。

煽っていくスタイルの方がクリック率が上がるんじゃないかとも思っていたりいなかったり

レスポンシブサイト運営中の広告はどうすりゃいいのよ？

Googleの規約的にはダメだけど、とりあえず偶然のクリックを誘うようにすればいいんじゃないかと思うわけです。 アフィ○サイトとか全部そうやって確信的に作られていますし、何よりウェブ業界の人間ですらそうやって自サイトを運営してますからね。 広告をワザと遅延表示させ、本来クリックさせたい場所をズラし広告を誤クリックさせたりしていて、モラルもヘッタクレもあったもんじゃないと思います。

説明とか

難しい説明は抜きにして、CSSのlinear-gradient() などのグラデーションに関する記述は基本的に画像扱いです。

なのでbackgroundプロパティの場合は、background-sizeなどで縮尺したりも出来たような気がします。またcss3ではbackgroundプロパティに複数画像が設定できたはずなので、今までどおりのurl(画像パス)とあわせてグラデーションの上に透過画像を配置したりすることも出来たり出来なかったりします。詳しくは調べてください。後で書きます。

linear-gradient(角度, 色 位置(0%), 色 位置(10%), ・・・, 色 位置(100%));

みたいな感じです。ブラウザによって複数書かなければなりません。それが以下です。