Googleアナリティクス
Google AnalitycsはGoogleが無料で提供するWebサイトのアクセス解析ツールです。
サイトを訪問した人のサイト内の動きを把握することで、サイトの改善すべき点が見えてきます。
クライアントワークで制作したWebサイトに導入し、改善すべきところを調べたいと思います。
Googleアナリティクスの利用手順
Googleアナリティクスのトップページ（以下）に行きログインします。
Googleアナリティクスの利用登録
アナリティクスの使用開始申し込み
サイトを登録してトラッキングコードを取得する
トラッキングコードをWebサイト内ページに追加する
トラッキングコードはサイト登録したページの中で、解析したいページ全てに追加します。追加する場所は</head>の直前です。私はjsファイルを作成して解析したいページから参照する形にしました。
GoogleAnalytics.js
-------------------------------------------------------------
//Google Analytics Tracking Code
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-89102125-1', 'auto');
ga('send', 'pageview');
-------------------------------------------------------------
HTML
-------------------------------------------------------------
<script src="js/GoogleAnalytics.js"></script>
-------------------------------------------------------------
作成したサイトのワード別検索順位を調べる 2回目
1回目の検索は12月8日に行いました。それから1週間経ちましたので、検索順位に変動があるのか確認しました。
結果は検索ワードに久喜や埼玉など地域を含めた検索では大きな順位の変動はありませんでしたが、検索ワードに地域を含めない検索では、表示順位が1ページ目から11ページ以降に落ちてしまいました。
検索ワードに地域を含めない検索のなかで「ケーキ 〇〇 △△」は、2,000万件以上のヒット数があります。そんな膨大なページ数の中で、12月8日の検索順位はトップページだったというのは驚きです。公開したばかりの時は上位表示されやすいのでしょうか？
圏外：11ページ以降
ノーマライズ・スタイルシート - normalize.css
ノーマライズCSSとは、リセットCSSとは異なり、ブラウザに初期設定されているCSSをすべてリセットするのではなく、リセットの必要のないものはそのまま利用しようという考え方です。
ブラウザごとに異なる初期設定の差を無くす働きもあるようですが、結局基準が変わるだけで、リセットCSSに対してどれほどの優位性があるのか分かりません。
参考
ブラウザが標準で持っているスタイルシート
Source/core/css/html.css - chromium/blink - Git at Google
Internet Explorer UA Style Sheets
HTML5に対応したリセット用スタイルシート
HTML5 Reset Stylesheet | HTML5 Doctor
アニメーティブスライドショー - Refine Slide
「Refine Slide」は、14種類ものアニメーションを選択して簡単に実装することができる、レスポンシブ対応のjQueryライブラリです。
ランダムを選択すると、多種多様な動きにしばらく見入ってしまいます。特に「3D Cube horizontal」と「3D Cube vertical」のダイナミックな動きは感動です。画像がキューブのように回転して切り替わっていきます。
ここで使用した「Refine Slide」は、以下のサイトからダウンロードしました。
14種類のアニメーション
- Fade
- Random
- Slice horizontal
- Slice vertical
- Slide horizontal
- Slide vertical
- Scale
- Fan
- Block scale
- Kaleidoscope
- Blind horizontal
- Blind Vertical
- 3D Cube horizontal
- 3D Cube vertical
「Refine Slide」を実行してみる
3D Cube vertical
3D Cube horizontal
画像の左右両端に空白があるので、画像が離れています。
Slice vertical
Slice horizontal
Slide horizontal
Slide Vertical
Scale
Kakeidoscope
Fan
Blind Horizontal
Blind vertical
Block scale
Fade
ソース
====================
index.html
====================
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Refine Slide</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/refineslide.css">
<script src="js/jquery-2.2.4.min.js"></script>
<script src="js/jquery.refineslide.js"></script>
</head>
<body>
<div class="panel slider">
<ul class="rs-slider">
<li><img src="img/slide1.png" alt="" /></li>
<li><img src="img/slide2.png" alt="" /></li>
<li><img src="img/slide3.png" alt="" /></li>
<li><img src="img/slide4.png" alt="" /></li>
</ul>
<!-- / .panel slider --></div>
<script>
$(document).ready(function () {
$('.rs-slider').refineSlide({
thumbMargin : 0.5, // Int (default 3): Percentage width of thumb margin
transition: 'cubeV', // String (default 'cubeV'): Transition type ('custom', random', 'cubeH', 'cubeV', 'fade', 'sliceH', 'sliceV', 'slideH', 'slideV', 'scale', 'blockScale', 'kaleidoscope', 'fan', 'blindH', 'blindV')
autoPlay: true, // Int (default false): Auto-cycle slider
keyNav: true, // Bool (default true): Use left/right arrow keys to switch slide
delay: 2000, // Int (default 5000) Time between slides in ms
transitionDuration : 2000, // Int (default 800): Transition length in ms
useThumbs: true // Bool (default true): Navigation type thumbnails
});
});
</script>
</body>
</html>
====================
style.css
====================
@charset "utf-8";
/* CSS Document */
html,body,ul,li {
margin: 0;
padding: 0;
}
html {
margin: 50px;
}
.panel {
width: 100%;
}
レスポンシブで縦方向の間隔をコントロールする
padding-topでアスペクト比をコントロールする
img要素の場合はwidth:100%とすると、自動的にアスペクト比を維持してくれますが、他の要素の場合はheightの代りにpadding-topを使うことで、アスペクト比をコントロールすることができます。
アスペクト比を求める
padding-top = 高さ ÷ 幅 × 100％
幅400px、高さ300pxの場合
300px ÷ 400px × 100％ = 75%
padding-topを75％とすると、高さは幅の75％でコントロールされます。
上下のmargin、paddingは親要素の横幅を基準にする
親要素の横幅を基準にすることで、ウィンドウの幅が広い時には広く、狭い時には狭くというように間隔を調整することができます。
上下のmargin(%)=margin ÷ 親要素のコンテンツ幅 × 100％
上下のpadding(%)= padding ÷ 親要素のコンテンツ幅 × 100％
