ブログ

はてなブログ スマホページにカテゴリ一覧を表示する方法 - これで直帰率が改善するかも!

投稿日:2015年11月2日 更新日:

現在はてなブログを使用させていただいています。以前から気になっていました。スマホ用のページだとデフォルトの設定ではカテゴリ一覧が表示されないこと。

これだとせっかくわたしのブログに訪問してくれた方が他のページを見ることなく帰ってしまうのではないか(直帰率がさがる?)。

少しCSSをいじる事でスマホページでもカテゴリ一覧を表示することが可能なようなのでその対応方法を記録しておきます。
※この対策をするには、スマホ用ページのCSSがいじれる「はてなブログPro」に加入済みであることが必要です。


カテゴリ一覧とは?

当ブログでは、PC用のページでは右のサイドバーに表示されています。こういうやつです↓。画像右側の「カテゴリー」というやつです。

ブログの各記事を、似たような仲間(カテゴリー)で分類できる機能ですね。

例えば当ブログに「iPhone6s」という検索ワードで訪問してきた方がいたとします。その方が、当ブログで「他にもiPhone関連の記事を見てみたいなー」といったときにこのカテゴリーが役立ちます。カテゴリー一覧(上の画像の場合)から「スマホ(26)」をクリックすると、「スマホ」という分類分けされた記事の一覧が表示され、容易に見たい記事を探すことができるので。

読者にとっては便利な機能です。ブログ運営者にとっても訪問者を長く滞在させるために活用すべき機能です。

スマホページにカテゴリー一覧を表示する方法

今回当ブログでは、スマホページの上部と下部にそれぞれ表示するように設定しました。

ページ上部はこんな感じです。

ページ下部はこんな感じです。

こちらの「チップの日常」さんの記事を参考(というか丸々そのまま使わせていただきました。非常にわかりやすかったです。)に設定しました。

ページ上部でリストでカテゴリを選択出来るように、また記事を最後まで読んだ後に"他の記事もよんで見ようかなぁ~"というのも狙って下部にもカテゴリを表示しました。

上部はリスト表示になっていることで、すっきりとしたデザインになります。当ブログにきていきなりカテゴリーがずらっと表示されていたのではいまいちですからね。

逆に下部はすぐにクリックしやすいように、リストでは無くカテゴリーを全て表示するようにしています。

スマホページ上部にカテゴリー一覧をリスト表示する方法

以下のソースを、スマホページのデザイン変更画面で設定するだけでOKです。http://***とカテゴリ名称部分は各自の”カテゴリー名称"・"カテゴリーURL"へ置き換えてください。また必要に応じて増やしたり減らしたりしてください。

<style>
select {
width: 100%;
height:40px;
}

.menu-puldown{
margin-top:5px;
margin-bottom:5px;
}

</style>

<script language="javascript">
<!--
function navi(obj) {
url = obj.options[obj.selectedIndex].value;
if(url != "") {
location.href = url;
}
}
//--></script>

<div class="menu-puldown">

<form method="post"><select onchange="navi(this)">
<option value="">--カテゴリ選択--</option>
<option value="http://nikkiblog.hatenablog.jp/archive/category/%E3%82%B9%E3%83%9E%E3%83%9B">スマホ</option>
<option value="http://nikkiblog.hatenablog.jp/archive/category/PC%E9%96%A2%E9%80%A3">PC関連</option>
</select>
</div>

上記ソースを設定するのは、以下のデザイン変更画面から行います。「ヘッダ」⇒「タイトル下」へ貼り付け、保存してください。その後スマホページを開きちゃんとカテゴリ一覧が表示されるか確認します。

スマホページ下部にカテゴリー一覧をリスト表示する方法

以下のソースを、スマホページのデザイン変更画面で設定するだけでOKです。http://***とカテゴリ名称部分は各自の”カテゴリー名称"・"カテゴリーURL"へ置き換えてください。また必要に応じて増やしたり減らしたりしてください。

<style>
/*記事下見出し用*/
.kijisita-midasi{
margin-top:20px;
margin-bottom:10px;
font-weight:bold;
border-bottom:1px solid #E6E6E6;
}
/*記事下見出しここまで*/

/*カテゴリデザインここから*/
.cate-desi{
padding-top:10px;
padding-bottom:10px;
padding-left:5px;
font-weight:bold;
font-size:100%;
border-top:1px solid #444B99;
border-left: 10px solid #444B99;
background-color: #E6E6E6;
}

.cate-desi-bottom{
padding-top:10px;
padding-bottom:10px;
padding-left:5px;
font-weight:bold;
font-size:100%;
border-top:1px solid #444B99;
border-bottom:1px solid #444B99;
border-left: 10px solid #444B99;
background-color: #E6E6E6;
}

.cate-desi a{
display:block;
color:#000000;
}

.cate-desi-bottom a{
display:block;
color:#000000;
}
/*カテゴリデザインここまで*/
</style>

<div class="kijisita-midasi">
カテゴリ
</div>

<div class="cate-desi">
<a href="http://nikkiblog.hatenablog.jp/archive/category/%E3%82%B9%E3%83%9E%E3%83%9B">スマホ</a>
</div>

<div class="cate-desi">
<a href="http://nikkiblog.hatenablog.jp/archive/category/PC%E9%96%A2%E9%80%A3">PC関連</a>
</div>

上記ソースを設定するのは、以下のデザイン変更画面から行います。「フッタ」⇒「フッタ」へ貼り付け、保存してください。その後スマホページを開きちゃんとカテゴリ一覧が表示されるか確認します。

「カテゴリ一覧」設定した前後での直帰率の変化

これでスマホページにカテゴリ一覧を表示することができました。直帰率の改善につながればいいな!

すぐには効果は感じられてませんが、今後に期待!


人気の記事はこちら!

おすすめ記事!

1

我が家では2ヵ月程前から「ネットスーパー」を利用し始めました。 これがとても便利で、夫婦共働きの我が家にはとても良いサービスでしたので本記事で詳しく紹介したいと思います。 こんな方におすすめ 夫婦共働 ...

2

2018年7月発売のMacBookProを購入しました! これまでWindowsパソコンしか使用したことがない私。初Macです! MacBook Pro購入にあたり、CPUとかメモリとかSSDの容量は ...

3

特に夏の暑い時期におすすめの「ミント系」のシャンプー! 本記事では我が家で愛用している、超爽快のミントシャンプー「ミントベル(Mintvell)」を紹介していきます。 【爽快感 最高!】ミント系のシャ ...

4

とても人気のあるロジクール(Logicool)のトラックボールマウス。 そのトラックボールマウスの最高峰モデル「MX ERGO」を購入したので紹介していきます。 今回購入したロジクール最高峰トラックボ ...

-ブログ

Copyright© いやまいったね! , 2018 All Rights Reserved Powered by AFFINGER5.