いやまいったね!

読者です 読者をやめる 読者になる 読者になる

いやまいったね!

2人の娘を持つ30代パパがお送りするブログ。iPhone関連記事が多め。スマホ機種変更に関する情報や、iPhone便利機能、iPhone・Androidのオススメアプリの紹介など。たまに子育てネタも書いています。お問い合わせ・広告依頼などはiyamaittaneblg@gmail.comまでお願いします。

MENU

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

ブログ

f:id:nikkiblog:20151102003611j:plain

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

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

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

カテゴリ一覧とは?

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

f:id:nikkiblog:20151029075538j:plain

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

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

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

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

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

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

f:id:nikkiblog:20151029080141j:plain

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

f:id:nikkiblog:20151029080146j:plain

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

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

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

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

スポンサーリンク
 

 

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

以下のソースを、スマホページのデザイン変更画面で設定するだけで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>

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

  f:id:nikkiblog:20151102002356j:plain

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

 以下のソースを、スマホページのデザイン変更画面で設定するだけで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>

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

 

   f:id:nikkiblog:20151102002806j:plain

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

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

ちなみにスマホページにカテゴリ一覧を設定した直前直後の直帰率はこんな感じ。

f:id:nikkiblog:20151029075433j:plain

すぐには効果はないかな…。そりゃそうだよね。今後に期待!