FOCUS

はてなブログテーマ"Focus"のカスタマイズやあれこれ

サイドバー内のはてなモジュールをタブ化して表示する方法

サイドバー内をスッキリ見せたいときにタブ化してみよう

サイドバー内に多くのモジュールを配置すると必要以上に縦長になってしまい見栄えが悪くなることがあります。特にスマートフォンなどでの閲覧者が半数を占める現在においては長いサイドバーが存在することは読者にとって負担になることがあります。

単純にサイドバーに配置するモジュールを絞ればよいだけのようにも思われますが、その結果読者が求めるコンテンツへの導線がなくなるのもいただけません。

こうした問題を解決するための手法の一つとして「タブ化」があります。

当サイトで実装した時のイメージはこんな感じです。

※こんな感じで表示されています。

※最新記事のタブをクリックすると表示が変わります。

タブ化のメリット

タブ化のメリットを改めてまとめてみます。

  • 多くのコンテンツをサイト内に配置しやすい
  • サイドバー内のコンテンツが長くなるのを防ぐ
  • タブ化の技術があるというテクニカルなPRになる
  • ワンカラム表示の際に読者のスクロールストレスが減る
  • 隠しコンテンツを配置できる

タブ化するために参考にした記事

はてなブログでサイドバー内のモジュールをまとめてタブ化する方法は以下の記事を参考にしています。

www.yukihy.com

基本的にはこのサイトの記事を読み、手順通りに進めれば間違いありません。

正直、ここから先のこの記事のコンテンツは読まなくてもOKです。

デザインCSSだけパクっていただければデモサイトのようになります。

この方法でタブ化する場合のデメリット

念のため書いておきますが、タブ化は良いことばかりではありません。

タブ化のデメリット

  • 非表示スタートのコンテンツがアクセスされにくい
  • 紹介する方法においては強引にタブ化しているので不具合が出ることがある
  • 3カラム表示においてはあまりタブ化のメリットがない

メリット・デメリットを比較してタブ化するかどうか検討してください。

タブ化の手順

ゆきひーさんの記事を参考に進めていただければと思いますが、ざっくりとした概要とFocusで使用しているコードを記載しておきます。(ゆきひーさんの記事がなくなると大変なので・・・)

①タブ化したいモジュールと左からの表示順を決める

まずはタブ化したいモジュールを決め、左からの表示順を決めます。

※デモサイトの事例

f:id:ganapati55:20171101164541j:plain

デモサイトでは左から

1番目(初期状態でアクティブ):人気記事(注目記事)

2番目:最新記事

3番目:月別(月別アーカイブ)

4番目:コメント(最近のコメント)

にしています。

②HTMLモジュールにコードを書き込む

次に前述の順番に対応する形でHTMLモジュールに必要なコードを書き込みます。

まずはデモサイトの事例を掲載します。

Focusで使用しているHTMLモジュール用コード
<div class="hatena-module-title2">
<span class="tab active">人気記事</span>
<span class="tab">最新記事</span>
<span class="tab">月別</span>
<span class="tab">コメント</span>
</div>

※特にタイトル部分に文字を入力する必要はありません。

上記の「人気記事」などの部分を自分の希望の順番通りに差し替えてください。

そのうえで以下のデザインCSSを入力すると、「タブ」の部分だけが表示されるようになります

Focusで使用しているデザインCSS
.tab {
    display: block;
    float: left;
    width: calc(25% - 1px);
    padding-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    background-color: #f8f8f8;
    font-size: 12px;
    color: #444;
    cursor: pointer;
    text-align: center;
    border-left: 1px solid #ccc;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}
.tab:last-child {
    border-right: 1px solid #ccc;
    width: calc(25% - 2px);
    }
.active {
    background-color: #fff;
    border-bottom: 1px solid white;
}
.hatena-module-title2 {
    margin-bottom: 10px;
}

※ゆきひーさんの記事で紹介されているものとは少し違います。

③フッタHTMLにコードを挿入

次に実際に表示されるべきモジュールの表示をタブと連動させてコントロールするためのJSコードをフッタHTMLに挿入します。

Focusで使用しているコード
<script>
$(function(){
    $(".hatena-module-entries-access-ranking,.hatena-module-recent-entries,.hatena-module-archive,.hatena-module-recent-comments").addClass("module");
    $(".hatena-module-title2").parents(".hatena-module-html").css("margin-bottom",0);
    var Module = $(".module");
    Module.hide();
    Module.first().show();
    Module.find(".hatena-module-title").hide();
    
    $(".tab").click(function(){
        var index = $(this).index();
        $(".tab").removeClass("active");
        $(this).addClass("active");
        $(Module).hide();
        $(Module).eq(index).show();
    });
});
</script>

実際に自分で使用する際には3行目以降に記載されているはてなモジュールのclass(.hatena-module-entries-access-ranking とか)を自分の希望するモジュールに入れ替えてください。(順不同です)

.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
/*参加グループ*/

④サイドバーモジュールをサイドバー内に順番に配置する

次にサイドバーの設定画面内でタブでいう左からの順番で希望するモジュールを上から配置します。

ちなみにFocusで3カラム表示にしているときは間に必ずhtmlモジュールを空の状態で挟みます。

※デモサンプル

⑤動作確認

最後に実際にタブをクリックして動作するか確認して完了です。

最後に一言

タブ化は難しくないけど慎重に!!