直帰率対策!スマホのヘッダーに注目記事を【はてなブログカスタムVol.10】

f:id:george-gogo:20160124003842p:plain

こんばんは。直帰率83%のブログを運営しております、じょーじです。そうなんです、このブログは2016年1月23日現在、全期間の直帰率83%となっています。

はてなブログのカスタム記事のまとめはこちら

ブログサイトの平均直帰率は60%くらいだった気がするので、このブログの数値はヒドいってことになりますね。まだ記事少ないし、色んな内容の記事を書きすぎだもんね。たいして面白くもないし、続きも気にならないし、眼鏡だし。

でもね、僕は文章がダメでもCSSを少しイジれる!なのでWebデザインの力で直帰率を下げていこうではないか!と考えました。(ポジティブ)

直帰率とは、1 ページしか閲覧されなかったセッション(ユーザーが閲覧を始めたページから他のページに移動することなくサイトを離脱したセッション)の割合です。アナリティクスガイドラインより

本題に移ります。

現状の確認とカスタムのプラン

現状の問題点

f:id:george-gogo:20160123211305p:plain

僕は一番上に『トグルメニュー』を設置していて、タップするとカテゴリが表示されます。その下は普通にヘッダーと記事本文があります。

この間メニューを設置したばかりなのですが、あまり押されてない気がするんですよね。僕も他サイトで余りトグルメニューを使わないですからね。面倒くさいから(素直な気持ち)。

でもカテゴリーが増える可能性もあるので、トグルメニューは止められない。

そこで僕は考えました。

注目記事と最新記事だけ別のボタンを作ろうと(決心)。

カスタムプラン

f:id:george-gogo:20160123213816g:plain

これです。トグルメニューとは別にボタンを作ろうと。

記事ページの下にも注目記事一覧がありますが、1%でも直帰率を下げるために上部にも設置。でも邪魔にならないように。あくまで自然に。優しく、微笑むように…。(こういう風にふざけているのも直帰率の問題の原因かも。(しょぼん))

みんな大好きコピペ一発!

これを「デザイン」「スマホマーク」「ヘッダー」「タイトル下」にコピペで!PCの方にやってもいいけど、それならメニューを付けた方が良いと思います。

HTML

<!--記事ボタンHTML-->
<div class="header-btn">
<div class="btn-content">

<!--最新記事メニュー(左側)-->
<label class="saishin" for="btn-cap1">
<a href="最新記事へのリンク">最新記事</a> </label>

<!--人気記事メニュー(右側)-->
<label class="ninki" for="btn-cap2">人気記事</label>
<input id="btn-cap2" type="checkbox" />
<div class="btn-cont">   
<div class="hatena-module hatena-module-entries-access-ranking" data-count="5"
data-display_entry_category="0" data-display_entry_image="1" data
-display_entry_image_size_width="100" data
-display_entry_image_size_height="100" data-display_entry_body_length="0"
data-display_entry_date="0" data-display_bookmark_count="0" data
-source="access"><div class="hatena-module-body">
</div>
<!--btn-cont--></div>
<!--hatena-module--></div>
<!--btn-content--></div>
<!--header-btn--></div>

 赤文字の最新記事へのリンクは、最新記事ページのURLをご自分のサイトからコピーして貼り付けてください。人気記事の方は何にもしないでオッケー。

青文字はボタンに表示される文字です。「NEW!」とか「POPULAR!」とかお好きにどうぞ。

ちょい解説(飛ばしてよし)

最新記事はもともとURLを持ったページがあるので普通にリンクで飛ばします。

注目記事は専用URLが存在しないので、はてなのサイドバーやフッターに使用されているモジュールを使用しました。そのためにアコーディオンスタイルにするしかありません。

CSS

同じく「デザイン」「スマホマーク」「ヘッダー」「タイトル下」にコピペで!

/***************最新記事****************/

.section {
width: 100%;
margin-left: 0;
margin-right: 0;
}
.header-btn {
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.header-btn .btn-content {
margin: 0;
}
.header-btn input {
display: none;
}
.header-btn label {
display: block;
cursor: pointer;
width: 48%;
float: left;
padding-top: 8px;
padding-bottom: 8px;
margin-left:1%;
margin-right:1%;
color: #fff;/**ボタン文字色**/
font-weight: bold;
text-align: center;
}
.saishin{
background-color: #CC90A8;/**最新記事の背景色**/
}
.ninki{
background-color: #90A7CC;/**人気記事の背景色**/
}
.header-btn label:hover {
background: #ddd;/**ボタンタップ後のボタンのの背景色**/
}
.header-btn .btn-cont {
transition: 0.2s;
height: 0;
overflow: hidden;
background: #ddd;/**ボタンタップ後の一覧の背景色**/
padding: 0 10px;
}
.header-btn input:checked + .btn-cont {
height: auto;
padding: 10px;
}

僕がコメントを入れたところは色をご自由に変更してください!

HTMLカラーコード

ちょっと解説(飛ばしてよし)

CSSだけでアコーディオンを作る時の基本的なやり方です。見えないチェックボックスのオンオフで開閉します。

これを使えばトグルメニューもCSSだけでできます(気合いが必要)。僕は面倒だからJsを使ってますが、そのうち作ります。

まとめ

ずっとこれをやりたくて色々考えていたのですが、朝に半月さんの記事を読んでひらめきました。感謝。

はてなブログテーマ「Innocent」に「おすすめ記事リスト機能」を追加しました - MoonNote

でも直帰率下がるかな?下がると良いなぁ!まだまだカスタム記事あるのでご覧あれー!

 

 おしまい。

※この記事を書きながら聞いた曲

天王寺ガール/天才バンド

学校のクラスで眼鏡でオサゲ頭の地味な女の子が、天王寺のビルのガラスの前でストリートダンスをやってたのを偶然目撃して萌えたって歌。

天才かは分からないが、ライブでは鳥肌立ちまくりでした。確か去年プロデビューしたのかな。Vo.奇妙礼太郎のバンドです。