はてなブログカスタマイズ. サイトマップを追加しました。サイトマップのUXを解説。
こんにちはnasustです。
タイトルの通り記事の一番下、ページ送りのボタンの下にサイトマップを追加しました。
サイトマップを追加したのは、ブログの全部の記事へとナビゲーションしたかったからです。
一応サイドバーにカテゴリやメインコンテンツのリンクがありますが、UXの視点で見ると結構見ないですよね。 多くのサイドバーが役に立っていない理由とは？ | UX MILK
この記事でサイドバーの大半は役に立たない。ブログの場合は役に立たないということは無いですが記事を読んだら、上にスクロールして見ていく人はいないじゃないでしょうか。
Webサイトのフッターにサイトマップを設置すべき理由 | UX MILK
この記事でフッターのサイトマップはクリック率向上すると書いてあります。
僕が追加したサイトマップは記事の下なので純粋なフッターでは無いですが、記事を読んで下へのスクロールで自然に読める様になります。これで他にもコンテンツあると紹介できます。
そして便利なのが自由に記述できる事。プロフィールやプライバシポリシーなどを、ここに書く事ができるのです。
僕の場合は広告を置いただけですが、何かお知らせしたい場合は今後、ここに書きたいと思います。
記事の一番下、ページ送りボタンの下にサイトマップを設置する方法
以下の様なHTMLをはてなブログのデザイン編集でフッターに追加します。
<div id="sitemap"> ・・・ ・・・ </div>
このままだと。記事とサイドバーの下になります。記事よりサイドバーが長いとサイトマップ表示まで大きな空白ができてしまいます。
これを解決するにはJavaScriptを数行追加するだけで出来ます。
※jQueryが使用しています。jQueryのscriptタグより下でなければいけません。
<!-- サイトマップを#main-innerの次に追加 --> <script> $(function(){ var sitemap = $("#sitemap"); var mainInnerLast = $("#main-inner").filter(":last"); mainInnerLast.after(sitemap); }); </script>
これで空白を回避できます。記事の下に表示されます。#main-innerが適切であるかはブログのテンプレートによって違うと思いますので注意してください。
これの特徴ですが、直ぐにJavaScriptが実行されることです。
大抵、loadイベント、つまりHTMLや画像など全部読み込み終わるまで実行されないカスタマイズが多いと思います。
これは、HTMLだけ読み込み終わったら直ぐに実行するようにしています。 ですのでブログの読み込みが遅くても、サイトマップが移動した事をユーザーは気付かないぐらい早く実行されます。
このテクニックを使うと自由にタグを素早く移動できます。
今後はトップのメニューとトップページをカスタマイズする予定です。
関連記事
