超便利!はてなブログに自動でグローバルメニューを表示させる方法
今までの改修で、見た目は満足いくものになったのですが、プログラムの話を書くと記事自体が長くなりがちで、スマホで見た場合はメニューが記事の下にあるので他の記事を探す場合に大変使いづらいため、グローバルメニューを追加しました。
追加自体は
の記事を参考にある程度簡単にできたのですが、メニューの中身を手動で書いているため、差し替えが面倒です。
そこで、
メニューにカテゴリを自動で追加するように
改造することにしました。
最初はてなブログのプログラム的な機能でやりようがないか調べたのですが、特になかったので、サイドメニューに出しているカテゴリからjavascriptで引っ張ってくることにしました。
サイドバーのカテゴリであれば記事の多い順に並んでいますし、記事数も出ているのでデータとして扱いやすいと思い、こちらにしました。
javascriptの実装方法としてはやはり一番自由度の高いjQueryを使うことにしました。
(最近jQueryが面白くて、jQueryの実装ばかりしているからというのもありますが・・・)
準備
最初に絶対に必要なjQueryですが、はてなの開発ブログによると、HTMLの最後でjqueryを読み込んでいるようなので、jQueryを最初に読み込みます。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
処理タイミング
サイドメニューから無理やりカテゴリを取得するので、HTMLのページ構成を読み込んでから実行する必要があります。
そのため、
$(document).ready(function(){
~~~~~~~~~~
});
を使います。
カテゴリの取得
私の使っているレスポンシブルーの場合は
$(".hatena-module.hatena-module-category .hatena-module-body .hatena-urllist li a");
で取得できます。
カテゴリを一件一件ループさせながら処理する必要があるため、
$(".hatena-module.hatena-module-category .hatena-module-body .hatena-urllist li a").each(function(index, element) {
~~~~
}
としています。
ヘッダーの追加場所
ヘッダーのすぐ下に追加したいので、私の使っているレスポンシブルーの場合は
$("#blog-title")
の直後に追加するように
$("#blog-title").after('<div id="globalmenu"><nav id="globalnavi"><ul></ul></nav><div>');
としました。
で、完成したjavascriptが下のコードです。
こちらをheadに要素を追加 に書けばヘッダーが表示されます。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
/*グローバルメニュー表示*/
$(document).ready(function(){
$("#blog-title").after('<div id="globalmenu"><nav id="globalnavi"><ul></ul></nav><div>');
globalnavi = $("#globalmenu nav ul");
globalnavi.append('<li><a href="/archive">記事一覧</a></li>');
$(".hatena-module.hatena-module-category .hatena-module-body .hatena-urllist li a").each(function(index, element) {
globalnavi.append('<li><a href="' + $(element).attr("href") + '">' + $(element).text() +'</a></li>');
if(index > 3){
return false;
}
});
});
</script>
カテゴリが際限なく並べられるとアレなので、記事一覧の+カテゴリ5個が表示されるようになっています。
数を変更したい場合は
if(index > 3){
を変更してください。
データ取得がどうしてもHTMLが読み込まれた後なので、他の部分が表示された後に遅れて出てきますが、まあしょうがないでしょう。
念のためこちらに設定しているスタイルもお知らせしておきます。
<style type="text/css">
/*グローバルメニュー表示*/
#blog-title{padding:0;}
#globalnavi ul{
font-size: 1.4em;
list-style: none;
text-align: center;
padding: 0;
-webkit-padding-start: 0;
}
#globalnavi ul li{display: inline-block;}
#globalnavi ul li a{
text-decoration: none;
display: block;
padding: 10px 5px;
}
</style>
最終的な見た目
なんか見た目はタグ一覧みたいになってしまいましたが、スマホ版では記事に行きつきやすくなったと思うので、かなり満足しています。
※こちらのソースをもう少し早く表示できるよう修正したものを作りました。2015 4/14