1. TOP
  2. Web

[サーバ] Apacheのmod_deflateでサイトをgzip圧縮して高速化するアレ

カテゴリ:
Web
サーバ
| トラックバック(0)
投稿者:yo yo

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でコンテンツを圧縮してサイトを高速化する方法

[SEO] クリックされやすいタイトルってどう作ればいいんだ?

カテゴリ:
SEO
Web
| トラックバック(0)
投稿者:yo yo

N○VERまとめで「クリック&いいねされるコピー・タイトル作成法」というまとめのView数が2632しかなくてちょっと面白い訳ですが、実際問題どうやったらクリックされるタイトルや説明文(description)を作れるんでしょうね。

個人的には誰が、いつ、どこで、なにを、なぜ、どのように(5W1H)を意識して、具体的かつ端的に書くと良いかなと思ってますがコレといって成果はでていません。

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

[広告] サイト内でクリックされやすいアドセンス種類と位置

カテゴリ:
Web
その他
| トラックバック(0)
投稿者:yo yo

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

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

[CSS] CSS3で線形グラデーションメモ

カテゴリ:
HTML / CSS
Web
| トラックバック(0)
投稿者:yo yo

説明とか

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

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

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

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

最近ちょっといい感じのHTMLテンプレ

カテゴリ:
HTML / CSS
SEO
Web
| トラックバック(0)
投稿者:yo yo

個人的にいい感じのコードテンプレ


<!DOCTYPE html>
<!--[if lt IE 8 ]> <html class="ie"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html dir="ltr" lang="ja" prefix="og: http://ogp.me/ns#"><!--<![endif]--> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="robots" content="INDEX, FOLLOW">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>タイトルは大文字30文字前後までの自然な文章</title>
<meta name="description" content="ディスクリプションは70文字~120文字の日本語として自然な文章になるよう簡潔に書く。!マークなどの装飾文字を安易に入れない。">
<meta name="keywords" content="1ワード,2ワード,3ワード,4ワード,5ワード,6ワード(SEOに関係ない。とりあえず6ワードぐらいまで。)">

<meta property="og:title" content="タイトルとあわせる" />
<meta property="og:type" content="site or blog or article" />
<meta property="og:url" content="このページのURL" />
<meta property="og:image" content="サムネイル画像のURI" />
<meta property="og:site_name" content="サイト名を書く" />
<meta property="og:description" content="ディスクリプションとあわせる" />

<link rel="stylesheet" type="text/css" media="all" href="./style.css" />
<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="favicon.ico" />
<script type="text/javascript">
/* アナリティクスコード */
</script>
</head>

<body>

  <header>
    <h1>サイトタイトル</h1>
    <p>サイトの簡単な説明。ディスクリプションとは違う文章を入れている。</p>
  </header>
	<nav>
  	<ul>
    	<li><a>グローバルナビゲーション</a></li>
    </ul>
  </nav>
  <aside>
  	ソーシャルブックマーク
  </aside>
  <h2>見出し</h2>
  内容
  <section>
  	<h3>中見出し</h3>
    内容
    <section>
    	<h4>小見出し</h4>
      内容
    </section>
  </section>
  <div>広告</div>
  <section>
  	<h3>中見出し</h3>
    内容
    <section>
    	<h4>小見出し</h4>
      内容
    </section>
  </section>
  <footer>
  	フッター
  </footer>
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
/* javascriptはソース下部にまとめる */
</script>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

</body>
</html>

ページの先頭に戻る