はてなブログのスマートフォン版にカテゴリー選択のプルダウンメニューを追加しました

こんにちは、くみです。

ずっとはてなブログスマートフォン版の画面にカテゴリーのメニューがないのが不満だったのですが、自分でJavaScript+HTMLで付けてみました。
モジュールを使っていないので、カテゴリーを変更した時に手作業で修正する必要があるのが玉に瑕だけど。(モジュール使って出来るかどうか、調べたんですが分からなかったので)

はてなブログスマートフォン画面の問題点

はてなブログスマートフォンだとカテゴリが表示されないんです。なので、ある記事から他の記事に行くには

  • 記事中で誘導するか
  • 下の『注目記事』から行くか

しかなくて。
注目記事も自分で選んだものじゃないしなあ。(はてなブックマークが多いものでもない。アルゴリズムよく分からない)

2015-02-04-01

これ自分でiPhoneで見ていてずっと気になってたんですよね。
これだとブログ内にどんな記事があるのか分からないよなー。

改善案を考える

というわけで、スマートフォン版でもカテゴリーを表示できないか、ネットで調べてみました。
しかしカテゴリーモジュールはスマートフォン版では使えないみたい。正規の設定はもちろん、改変の方法も見つかりません。

ブログやはてなブログへのリンクを非表示にする

探している途中で、一番下に表示される開発ブログやはてなブログへのリンクを非表示にする方法を書いている記事がありました。

これは邪魔だと私も思っていたので、使わせてもらうことにしました。(公式からは、Proを利用している人は非表示にしても問題無いという回答だったそうです)

手動でカテゴリーを表示する

どうも手動でカテゴリーを表示するしかないと思った私は、最初リンクをリスト形式で並べてみたのですが…私のブログのカテゴリ数では多すぎて、縦に長くなっちゃうんですよね…
はてなブログのカテゴリは階層化もされていないので、例えば最初に『旅』『ウェブサービス』『語学』などとまとめて次の階層で細かく指定してもらう、等の導線も引きづらそうです。

なのでプルダウンで選択できるように出来ないかと思い、ソースを調べました。JavaScript使うの久しぶりです。

スマートフォン設定にカテゴリープルダウンメニュー用ソースを追加

調べた結果、こんな感じで書けば良さそうでした。

head内

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

body部分

私は『デザイン>スマートフォン設定』の『ヘッダ・タイトル下』と『フッタ』に入れました。(どちらも設定にProアカウントが必要です)

<form method="post"><select onchange="navi(this)">
<option value="URL1">カテゴリ1</option>
<option value="URL2">カテゴリ2</option>
</select></form>

参考:プルダウンメニューによるリンク  

設定後の動作確認

試してみたところ、無事に動きました。良かった。

▼ヘッダ部分
header

▼フッタ部分
footer

▼ちゃんと機能している。よかった
2015-02-04 17.05.49 

Wordpressとかだとこのあたり柔軟に設定できるんでしょうけど…

これでスマートフォンからも色々見てもらえるといいなあ。よろしくお願いします。

はてなブログカスタマイズ関連記事

kumkum.hatenadiary.com

jp.kumi-log.com

jp.kumi-log.com

jp.kumi-log.com