直帰率の改善（関連記事の表示）

Bloggerで関連記事（関連ブログ）を表示するで、直帰率改善のためにSmart Related Posts Widget for Google Blogger - v2.0を使って関連するブログ記事を掲載する方法を記しましたが、関連記事を表示するようになってから直帰率が改善がされているかを計測してみました。

結果から述べると、直帰率が85.75％から83.62％と2.1ポイント改善することができました。
下表がその結果となります。

直帰率の改善：（Google Analytics）

期間	直帰率			変化率
	訪問者全体	新規訪問者	再訪問者	訪問者全体	新規訪問者	再訪問者
設置前（前月）	85.75%	85.39%	86.85%
サイドバーに設置	85.13%	85.23%	84.94%	-0.72%	-0.19%	-2.20%
ボディー部に設置	83.62%	83.47%	84.19%	-1.77%	-2.07%	-0.88%

※ 前月･･･4週間、サイドバーに設置･･･2週間、ボディー部に設置･･･2週間

関連記事を記事の最後（ボディー部）に挿入することがうまくできなかったので、最初の2週間はサイドバーにだけ表示されていました。しかし、この結果、改善にあたっての仮説を補う面白いことに気が付くことができました。

直帰率改善の仮説

直帰率改善にあたっての仮説は、下記のデータから導き出したものです。

① 来訪者のうち新規訪問者（新規ユーザー）は75％
② 流入の80％は検索エンジンからである



【仮説】
検索エンジンを経て何かを調べるためにこのブログに初めて訪れた新規訪問者は、サイト構成もしらなければ、他にどんな内容が掲載されているかを知らない。そのため能動的に他の記事を検索する人は少ないはず。しかし関連する記事が他にもあるということが目に留まればもう１ページ閲覧する可能性がある。

結果の考察

上記の仮説に基づき関連記事を表示するように変更しました。サイドバーに関連記事を表示すると再訪問者の直帰率は下がりましたが、新規訪問者では大きな変化は見られませんでした。新規訪問者はボディー部へ関連記事を表示するようになってから大きく改善されました。これは新規訪問者では、本文を読む目の導線上になければ気が付かれないということだと思います。

トータルの変化率でみると再訪問者が3.1ポイント、新規訪問者が2.2ポイントと、変化が大きかったのは再訪問者でした。再訪問者の直帰率が大きく改善されるとはいうのは予想外でした。また再訪問者は記事の最後に関連記事を表示してからも直帰率が改善される結果となりました。

変化率とは

Google Analyticsでも期間比較を行うと変化率が表記されています。変化率とは前と比べてどのくらい変わったかという割合です。前年比120％というような言い方と同様です。

e.g.
Aくんは、毎月のお小遣いが800円だったのが1,000円になりました。またBくんは1,000円が1,250円になりました。どちらの方が前と比べて改善された（変化が大きい）のでしょうか。

Aくん 800円 → 1,000円 200円UP
Bくん 1,000円 → 1,250円 250円UP

上がった金額はBくんの方が大きいです。しかし比率でみると

1,000円÷ 800円×100=125％
1,250円÷1,000円×100=125％

で、共に値上げ前と比べて125％です。変化率はこの比率から100％をマイナスした値になります。つまり上記の変化率は25％で、以前より25％アップしたといえます。

では、デフレの影響でお小遣いが下がった場合には、

Aくん 1,000円 → 800円 200円Down
Bくん 1,250円 → 1,000円 250円Down

800円÷1,000円×100-100％=-20％
1,000円÷1,250円×100-100％=-20％

共に変化率は-20％ということになります。

Bloggerで関連記事を表示する

Bloggerで関連記事（関連ブログ）を表示するでボディ部に関連記事できないと記していましたが、related posts widget でオプション記載部をエスケープしていないと正しく認識されないということが分かり下記のように（赤字部分）変更することで解決しました。

<!-- related posts -->
  <h4>関連記事</h4>
  <div class='related-posts-widget'>
  &lt;!-- {
 related_title:''
 ,thumbs:0
  } --&gt;
  loading..
  </div>
<!-- related posts -->

このコードをテンプレートに埋め込みます。

ブログ（本文）の前に表示する

1．Bloggerの『デザイン → HTMLの編集』 からウィジェットのテンプレートを展開をチェック。
2．テンプレートから <div class='post-header-line-1'> を検索。
3．<div class='post-header-line-1'> の下にコードを張付ける。

ブログ（本文）の後に表示する

1．Bloggerの『デザイン → HTMLの編集』 からウィジェットのテンプレートを展開をチェック。
2．テンプレートから <data:post.body/> を検索。
3．<data:post.body/> の下にコードを張付ける。

今日の一曲

ビートルズの中で好きなアルバムは、と、問われれば迷わずこのREVOLVERをあげます。特にTomorrow Never Knowsは、ワンコードで作られ、テープループを用いたアバンギャルドな一曲となっています。まさにミニマムミュージックの原点がこの曲にあります。リンゴスターのドラムのリフの入り方もとっても格好良いですし、ボーカルの中域を持ち上げたラジオチックな録音の仕方もステキです。限られた機材で工夫を凝らしているこの曲は、昨今のDTMのアンチテーゼとして聴こえてきます。

The Beatles - Tomorrow Never Knows / Revolver

Evernoteにクリップするボタンを追加する

SNS連携ではありませんが、日頃お世話になっているEvernote（エバーノート）なので、ブログに簡単にコンテンツをクリップできるEvernoteサイトメモリーのボタンを追加してみました。

Evernoteサイトメモリーページにある『GET STARED』をクリックするか、画面をスクロールして『サイトメモリーを設置する』で幾つかのパラメータをセットするだけで簡単にコードが生成されます。

Evernoteサイトメモリーの使い方（設定方法）

ボタンの選択

ブログに使用するボタンを選択します。

クリッピングの設定

『Webサイト名』にブログ名（ブログタイトル）を入れます。説明にあるように設定していないとクリップするときにドメイン名となります。

『クリップするコンテンツ』は「main」とします。設定していないとブログ全体がクリッピング対象となります。このブログの場合は、設定していないとサイドバー含めてクリップされてしまいます。

コードのコピー

コードをテスト＆コピーとありますが、カット＆コピーの間違いでしょうか。





生成されたコードは下記となります。

<script type="text/javascript" src="http://static.evernote.com/noteit.js"></script>
<a href="#" onclick="Evernote.doClip({providerName:'象と散歩',contentId:'main'}); return false;"><img src="http://static.evernote.com/article-clipper-jp.png" alt="Clip to Evernote" /></a>

このコードをそのまま利用してもよいのですが、画像に枠線が残るため、<img>タグに style='border: none' を追加します。

<script type="text/javascript" src="http://static.evernote.com/noteit.js"></script>
<a href="#" onclick="Evernote.doClip({providerName:'象と散歩',contentId:'main'}); return false;"><img src="http://static.evernote.com/article-clipper-jp.png" alt="Clip to Evernote" style="border: none" /></a>

BloggerにEvernoteサイトメモリーを設置する

Blogger利用者が、Evernoteサイトメモリーを設置する場合には下記の手順により、ヘッダー部に表示されます。クリップされたときの題名には、<title>タグに設定されている内容が反映されます。

1．Bloggerの『デザイン → HTMLの編集』 からウィジェットのテンプレートを展開をチェック。
2．テンプレートから <div class='post-header-line-1'> を検索。
3．<div class='post-header-line-1'> の下にコードを張付ける。

Evernoteクリップボタンを試してみる

ブログに表示されたEvernoteサイトメモリーを試してみます。





クリップがクリックされると、Evernoteにログインしていなければ、ログイン画面が表示されます。





Evernoteにログインするとクリップの確認画面が表示されます。『Clip from』には、上記設定の『Webサイト名』が表示されます。左下の『クリップ』をクリックするとEvernoteの新規ノートに登録されます。





クリップが成功すると下記の画面が表示されます。






-- iPadから送信

引用（blockquote）を格好よく表示する

blockquote（引用）がカッコよいサイトが多いので真似してみようと思いましたが、自分にはスタイルシートを変更する能力もないので、参考になるサイトを探してみました。

MIYA氏のCSS Lectureのblockquote(引用部分)をCSSでデザインするサンプル集に掲載されていた「サンプル2」を利用させていただきました。サンプルコードと画像も一括ダウンロードできます。

引用文は下記のように表示されるようになりました。

ブログを書いていると他のサイトから文章などを引用してきたりする事もあるかと思います。
そういう時に使えそうな blockquote のデザインとサンプルを作ってみました。

blockquote(引用部分)をCSSでデザインするサンプル集

Bloggerでblockquoteのスタイルシートを変更する

デザイン >> HTMLの編集 を開いて、最初に『テンプレートをすべてダウンロード』でバックアップを取得します。



『ウィジェットのテンプレートを展開』をチェックし、blockquoteでソースを検索して現在の設定内容を確認します。

利用しているテンプレートに依存すると思いますが、自分の使っているテンプレートでは、下記のようになっていました。

変更前

.post blockquote {
margin: 1em 20px;
}
.post blockquote p {
margin: .75em 0;
}

blockquote(引用部分)をCSSでデザインするサンプル集のサンプル2をベースに下記のように変更します。

画像のURLには上記サイトからダウンロードしたimage2.gifを事前にpicasaにアップロードするか、bloggerの下書きに画像を挿入して取得したURLを指定します。

変更後

.post blockquote {
background: url(http://画像のURL) no-repeat 2% 6%;
padding: 10px 20px;
border-top: 1px solid #CCC;
border-bottom: 1px solid #CCC;
font-size: 90%
color: #696969;
}
.post blockquote p  {
margin-bottom: 12px;
}
.post blockquote .origin    {
text-align: right;
margin-bottom:0;
}   
.post blockquote .origin a  {
color: #2D88B3;
}

スタイルシートの説明

■【background: url(image/blockquote2.gif) no-repeat 2% 6%;】の「％」部分は、画像の表示位置です。ピクセル（px）でも指定できます。

■【padding: 10px 20px】は内側の余白で、10pxが上下の余白、20pxが左右の余白になります。

■【fontsize: 90%】は引用文のフォントサイズです。本文とのメリハリを付けるために本文で使用しているフォントサイズより少し小さくして90％にしています。

■【color: #696969】は引用文の文字色です。こちらも本文とのメリハリを付けるために色を薄くしてDim Grayにしています。

変更後に『テンプレートを保存』をクリックすれば完了です。

下記のようにhtmlを記載すると上記の表示例のように表示されます。

<blockquote>
<p>ブログを書いていると他のサイトから文章などを引用してきたりする事もあるかと思います。
そういう時に使えそうな blockquote のデザインとサンプルを作ってみました。</p>
<p class="origin">
<a href="http://www.css-lecture.com/log/css/blockquote.html" target="new">blockquote(引用部分)をCSSでデザインするサンプル集</a></p>
</blockquote>