はてなブログのスマホ用ページのブログタイトル下にカテゴリセレクトボックスを作ってみた
Feb 24, 2017
はい、どうも。
タイトルのとおり、スマホ用ページのタイトル下にカテゴリセレクトボックスを作ってみました。
今スマホでご覧になっている方は、ブログタイトルの下にセレクトボックスがあると思いますが、これです。
※出てないよ！って人は、一度リロードしてみてください
- スマホ用ページってカテゴリ欄なくない？
はてなブログに移行してきてまだ日が浅いので調査不足かもしれませんが、スマホ用ページってカテゴリ欄無いですよね？
ということで、無理矢理ですが作ってみました。
ただのリンクにすると場所をとるので、セレクトボックスにして、選択すれば勝手にカテゴリページへ飛ぶようにしてます。
はてなブログのダッシュボードから、 デザイン＞スマートフォン＞ヘッダ＞タイトル下 に以下のソースを ほぼ コピペで設置できます。
- ソース まずはセレクトボックス部分のhtmlです。
|html|
上記はこのブログの例なので、設置するブログのカテゴリに合わせてoption要素の内容は適宜変更・追加してください。
続いでjavascript部分ですが、jQueryを使用しているので、事前にダッシュボードの 設定＞詳細設定＞headに要素を追加 のテキストエリアに以下を追記しておいてください。
|javascript|
||<
以下がデザイン設定に記述するjsです。
|javascript|
||<
ここで変更していただきたいのは、
|javascript| var blog_url = “http://www.michinoeki-mania.com/"; var blog_tmp = “http://www.michinoeki-mania.com/"; ||<
この部分です。
ここをご自身のブログのURLに変更してください。このとき、末尾の "/" は忘れないようにしてください。
この html部分とjavascript部分を、 デザイン＞スマートフォン＞ヘッダ＞タイトル下 に記述してもらうと、スマホ用ページのタイトル下にカテゴリセレクトボックスを作ることができます。
実際の挙動は、このブログのタイトル下のセレクトボックスでお試しください。
- この方法のデメリット
お気づきかもしれませんが、カテゴリのセレクトボックスは手で作らなければいけません。
あと、カテゴリごとの記事数もリアルタイムで反映させることができません。
この2点についてはなんとかできそうな気もするので、今後ちょっと考えてみます。