みちのえきまにあ

CBR1000RRで道の駅巡りをしているまったりツーリングライダーのブログ

Twitter
Instagram
Youtube

はてなブログのスマホ用ページのブログタイトル下にカテゴリセレクトボックスを作ってみた

はい、どうも。
タイトルのとおり、スマホ用ページのタイトル下にカテゴリセレクトボックスを作ってみました。
今スマホでご覧になっている方は、ブログタイトルの下にセレクトボックスがあると思いますが、これです。

※出てないよ!って人は、一度リロードしてみてください

スマホ用ページってカテゴリ欄なくない?

はてなブログに移行してきてまだ日が浅いので調査不足かもしれませんが、スマホ用ページってカテゴリ欄無いですよね?
ということで、無理矢理ですが作ってみました。

ただのリンクにすると場所をとるので、セレクトボックスにして、選択すれば勝手にカテゴリページへ飛ぶようにしてます。

はてなブログのダッシュボードから、
  デザイン>スマートフォン>ヘッダ>タイトル下
に以下のソースを ほぼ コピペで設置できます。

ソース

まずはセレクトボックス部分のhtmlです。

<div style="text-align: center;">
	<select class="category-select" id="cat-select">
		<option value="">▼カテゴリ</option>
		<option value="ツーリング">ツーリング</option>
		<option value="道の駅">道の駅</option>
		<option value="カスタマイズ">カスタマイズ</option>
		<option value="整備・メンテナンス">整備・メンテナンス</option>
		<option value="ノウハウのようなもの">ノウハウのようなもの</option>
		<option value="ガジェット">ガジェット</option>
		<option value="食べ物">食べ物</option>
		<option value="独り言">独り言</option>
	</select>
</div>

上記はこのブログの例なので、設置するブログのカテゴリに合わせてoption要素の内容は適宜変更・追加してください。

続いでjavascript部分ですが、jQueryを使用しているので、事前にダッシュボードの
  設定>詳細設定>headに要素を追加
のテキストエリアに以下を追記しておいてください。

<script src="https://cdn.blog.st-hatena.com/js/external/jquery.min.js?version=1.12.3"></script>

以下がデザイン設定に記述するjsです。

<script>
$(document).ready(function(){
    var blog_url = "http://www.michinoeki-mania.com/";
    var blog_tmp = "http://www.michinoeki-mania.com/";
    var href = window.location.href;
    
    blog_tmp.replace("/", "\/");
    blog_tmp.replace(".", "\.");
    var reg = new RegExp("^" + blog_tmp + "archive\/category\/.*");
    var m = href.match(reg);
    
    var now_cat = "";
    if (m != null) {
        now_cat = decodeURI(href.replace(blog_url+"archive/category/", ""));
    }

    if (now_cat != "") {
        $(".c-s").each(function(c, celem){
            if (celem.value == now_cat) {
                $("#cat-select").val(now_cat);
                return false;
            }
        });
    }
    
    $(".category-select").change(function(){
   	   var cat = $(this).val();
	
	   if (cat != "" && typeof(cat) != "undefined") {
	      var u = blog_url + "archive/category/" + cat;
	
	      location.href = u;
	   }
   });
});
</script>

ここで変更していただきたいのは、

    var blog_url = "http://www.michinoeki-mania.com/";
    var blog_tmp = "http://www.michinoeki-mania.com/";

この部分です。
ここをご自身のブログのURLに変更してください。このとき、末尾の "/" は忘れないようにしてください。


この html部分とjavascript部分を、
  デザイン>スマートフォン>ヘッダ>タイトル下
に記述してもらうと、スマホ用ページのタイトル下にカテゴリセレクトボックスを作ることができます。

実際の挙動は、このブログのタイトル下のセレクトボックスでお試しください。

この方法のデメリット

お気づきかもしれませんが、カテゴリのセレクトボックスは手で作らなければいけません。
あと、カテゴリごとの記事数もリアルタイムで反映させることができません。

この2点についてはなんとかできそうな気もするので、今後ちょっと考えてみます。