はてなブログで複数のサイドバーモジュールをタブメニューにして回遊率アップを狙うカスタマイズ2015-09-01はてなブログで複数のサイドバーモジュールをタブメニューにして回遊率アップを狙うカスタマイズWeb制作スポンサーリンク9/3追記:その他のカスタマイズ(サイドバー固定など)を増やしました。同じモジュールを並列に使いたい方もわかるように文を若干変更しました。jQueryを使ってみると本当にいろいろとできるなあと実感しています。今回はそれを使って、サイドバーをタブメニューにしてみようと思います。難易度はちょい高めです。実際にタブメニューにしてみた実装図はこちらこの右側についているのがタブメニューです。実際にタブの部分を押してみると、下図のように他のモジュールに切り替えることができます。「月別」を押すと月間アーカイブに「タグ」を押すとカテゴリ一覧へ、最近はてなのカテゴリの使い方が分からず、もうタグということにしました。特徴・カスタマイズの注意点このタブメニューの特徴と、カスタマイズの注意点を先に言っていきます。人気記事モジュールで「アクセス順」と「はてブ順」でタブメニューにしたり、最新記事をカテゴリ別にしてタブメニューにしたりと、応用はかなりできそうです。前置きが長くなりましたが、実際にカスタマイズのやり方です。タブに加えるものを決める最初に、タブメニューに加えるモジュールを選んでください。選ぶ個数としては、仕組み的には何個でもいけますが、現実的にいれられるのはサイドバーの横幅の関係上、3つか4つだと思います。当ブログはサイドバーの横幅を336pxとかなり広めにしていますが(追記2016/5/16:現在は300pxです)、それで4つがギリギリぐらいです。今後説明していくものとしては、当ブログで現在設定しているように、タブ1→人気記事(モジュール名は注目記事)タブ2→最新記事タブ3→月間アーカイブタブ4→タグ(モジュール名はカテゴリ)として作っていくとします。サイドバーをつくるサイドバーをつくり、実質的にHTMLを組んでいきます。サイドバーを、タブ1→2→3→4となるように上から並べます。上の例を実際に入れていくとこんな感じ。このサイドバーの順番が表示されるモジュールの順番に対応するので、かならず1→2→3→4→に並べてください。その後、タブ1の上にもう一つ「カスタムHTML」のモジュールを入れます。下図で青い文字のところです。「カスタムHTML」は、タイトルは空欄にして、中には以下のことを記述します。部分が、最終的なタブのメニュー部分に該当します。それぞれを適宜、自分がタブにしたい部分に文字を変えてください。順番を上からタブ1→2→3→4としてください。タブが3つしかない方は、4つ目のものを消してください。これで、サイドバーは終了です。この状態では、下の図のように「カスタムHTML」の文字と、その下に4つのモジュールが出現していればOKです。タブメニューのjQuery次に行うのは、実際にタブメニューが機能するようにjQueryを組んでいきます。});});</script>このコードを「フッター」にコピペした後に、コード内の「タブ〜」の部分に、自分が加えたタブ1~タブ4までのクラスを、下を参考に入れてください。.hatena-module-profile/*プロフィール*/.hatena-module-search-box/*検索*/.hatena-module-links/*リンク*/.hatena-module-recent-entries/*最新記事*/.hatena-module-entries-access-ranking/*注目記事*/.hatena-module-archive/*月間アーカイブ*/.hatena-module-category/*カテゴリ*/.hatena-module-recent-comments/*コメント*/.hatena-module-circles/*参加グループ*/(カスタムHTMLを入れる場合は下に補足を入れているので、そちらを参照ください)例えば自分が例にしているように、タブ1→人気記事(モジュール名は注目記事)タブ2→最新記事タブ3→月間アーカイブタブ4→タグ(モジュール名はカテゴリ)とすると、以下のようになります。注:クラス名の「.」を忘れないことと、それぞれのクラス名の間は、必ず「,」で区切るようにしてください。半角のスペースは大丈夫ですが、全角だと動かなくなるので気をつけてください。});});</script>入れる順番は、実際は関係ありません。特段こじらせないために順番をつけています「注目記事モジュール」など、同じモジュールを2つ以上入れる場合は、1回書けばOKです。その場合、最後に余った「,」は消してください。タブが3つしかやらないという方は、3つ分入れ、最後に余った「,」は消してください。1行目のjQueryを読み込む部分は、すでに以前のカスタマイズで導入している方は消してもかまいません。自信がないですが、とりあえず機能したので良しとしています。うまくいくと、下図のように、タブの文字の部分をクリックすると、モジュールが入れ替わるようになります。「タグ」の文字を押すと...モジュールが変わっていればOK。このとき、他のモジュールが出ていないことを確認してください。このとき、必ず、タブ名と出てくるモジュールが合っているか確認をしてください。合っていない場合は、手順2の「カスタムHTML」の中の順番と、同じく手順2のタブのモジュールの順が違うことが原因です。<!--ここに入れたいHTMLを--></div>といった形で挟んで、.custom-html/**カスタムHTML/みたいな形にして上のコードに入れてください。カスタムHTMLが複数ある場合は、それぞれを名前を変えて入れてください。CSSでデザインするすでに機能としては出来上がっていて、最後にCSSでデザインを変更していきます。サンプルコードを貼っておきます。シンプルなのにしましたが、元のテーマなどによって崩れてしまう可能性がありますがご了承ください。black;/*タブの下線*/}こいつを「デザインCSS」に貼り付けると、こんな感じにスタイリングされます。色の初期状態は黒にしています。変えたい場合はコード内にコメントしているので、それぞれの位置を変えていただければと思います。横幅が入りきらない場合の対応も上のコードに書いてあるので、それぞれやってみてください。それでも入らなくて二列になってしまう場合は、タブの文字数を減らすか、タブ自体を減らすしかありません。以上でカスタマイズ終了です。その他のカスタマイズ上に書いたコードは簡単にするために最適でない場合があります。以下は気になる方がポチポチといじっていただけたらと思います。タブメニューの下に余白を開ける背景色がある人のテーマでもデザインを崩れにくくするために、タブメニューとタブエリアの境目は余白を0にしています。そのせいでちょっと見ずらくなる場合があります。ここの余白は、手順3のコードの$(".hatena-module-title2").parents(".hatena-module-html").css("margin-bottom",0);の最後の0で操作しています。余白をつけたい方は、そこの数字をいじってください。タブになるまでに一瞬崩れるのを防ぎたいjQueryを使っているので、若干読み込みが遅く、タブができるまでに一瞬だけ崩れてしまう可能性があります。これは、手順3のコード内の、Module.hide();Module.first().show();Module.find(".hatena-module-title").hide();の部分を、同じ役割をするCSSに変えてやることで解消します(CSSなら一瞬で反映されるので)。上の3行が表していることは、モジュール部分を一旦、全部非表示にするその後モジュールの一つ目のみ表示すべてのモジュールにもとからあったタイトルを非表示という意味なので、CSSでは、要は一つ目以外のモジュールを消去すべてのモジュールのもとからあったタイトルを消去ということを書いてやります。実際に自分のでやるとこんな感じになりました。none;}表示の遅さが気になる方はご利用ください。サイドバーに固定したい現在このブログではタブメニューをサイドバーに固定しています。アーカイブ」など特定のモジュールを載せると、固定したいタイミングで固定されない場合がある(対処は可能)です。サンプルコードとしては、手順3のコードに追記をするような感じです。});});</script>下の方を追記するような形で良いと思います。原理的には、「.hatena-module-title2」の位置よりもスクロールされると、「.hatena-module-title2」とモジュール部分にそれぞれ「fixed-title」と「fixed-module」というクラスが追加されるというものえす。上のを加えた後で、「fixed-title」と「fixed-module」に、固定する役割をCSSでつけます。300px;}これを貼り付ければ実質的にサイドバーに固定はされますが、デザインが崩れる可能性がある部分について、解消法を書きます。ブラウザサイズを狭めると、挙動がおかしいこれは全員確認してほしいところです。ブラウザサイズが小さくなったときに、サイドバーが下に回り込む設定の方は全員当てはまります。いう現象かと言うと、サイドバーが縮んだときに、スクロールしていると、固定されたモジュールが出現してしまうというものです。こんな感じに...これを解消するためには、そもそも1カラムになったら固定を解除する必要があります。簡単な方法としては、上に書いたcss自体を、あるブラウザサイズ以上でしか機能させなくするという方法です。{」と、最後の「}」をつけるだけです。これで、固定されるのが横幅「960px」以上でのみとなります。この960の部分を、各自のブログで1カラムになるタイミングに変えていただければと思います。タイトルとモジュール部分が近くなっちゃうor離れすぎちゃうタイトルとモジュールは、別々に固定位置を指定しています。それぞれcssの「top」の数字が、画面上部から固定される位置を表していますので、離れすぎちゃう方はモジュールの方の数字を小さくしたりしていただければと思います。固定された瞬間横幅が広がっちゃいますor狭くなっちゃいますそれぞれcssの「width」が、固定されたときの横幅に対応します。各自でデザインの崩れがないように、横幅を調整していただければと思います。ある幅は「250」「300」「336」でしょうか。微調整のほどお願いします。固定されるタイミングがずれます上の注意点でも言ったように、一部のモジュール(人気記事や月刊アーカイブなど)をタブメニューよりも上に置いていると、タブ上部の位置が正確に取得できなくなり、固定されるタイミングがずれる可能性があります。その場合は固定されるタイミングを自力で調節するしかないです。◯◯」と入れると固定されるタイミングを調節できます。数字を入れて調整してみてください。まとめタブメニューを使うと、サイドバーを縦長にしないで多くの情報を詰め込めるという利点があります。ブログに興味を持っていただいた方が迷わないように、他の記事にアクセスしてもらいやすくできるのでぜひやってみてください。13:13はてなブログで複数のサイドバーモジュールをタブメニューにして回遊率アップを狙うカスタマイズ関連記事2016-07-13CSSでスマホ画面で横スクロールするレスポンシブ対応のメニューを作るカスタマイズ最近よく見る、スマホのときに横スクロールをするメニュー。作...2015-12-01CSSで組んだドロップダウンメニューとトグルメニューを両立させたレスポンシブなメニューの作り方【コピ...12/07:その他のカスタマイズを充実させました。はてなブログPro都内に住む大学5年生だったのがこの春から社会人一年目になりました。データ分析職として働いております。Googleアナリティクス※メールでのブログカスタマイズのご依頼は現在受けておりません。@ftmaccho詳しいプロフィールはこちらから。広告依頼など重要っぽい連絡はこちらからお願いします。Lifeスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。