【はてなブログカスタマイズ 】サイドメニューを工夫して回遊率アップを目指す！

「はてなブログ」の当ブログカスタマイズ紹介シリーズです。今回はサイドメニューを見やすく変更する方法を紹介します。

なお当ブログのテーマは「Minimalism」を使用し、レスポンシブデザイン設定にしていますので、他のテーマでは同様のカスタマイズができないこともありますので、ご了承ください。

前回のトップページ一覧形式をカード型に変更する記事はこちら。

サイドバーメニューをタブ形式に

サイドバーに色々掲載したいけど、縦長になるのは防ぎたいという方向けの設定です。はてなブログ設定のサイドバーで表示させたいメニューが多い方に向け。設定の仕方は以下のサイト様を参考にさせていただきました。ありがとうございます。

さて、実際に当サイトでのカスタマイズを見てみましょう。まずは、ブログの管理ページからデザイン設定→カスタマイズ→サイドメニューから、モジュールの追加より、表示したいサイドバーを選びました。4つ選んでます。さらにもう一つ、HTMLのモジュールを選び、以下のコードを記載しました。記載する言葉はご自身で選択したモジュール順番に記載ください。

<div class="hatena-module-title2">
<span class="tab active">人気順</span>
<span class="tab">最新順</span>
<span class="tab">月別</span>
<span class="tab">コメント</span>
</div>

サイドメニューの順番は、HTMLのモジュールを一番上に、そしてタブで左から右へと並べたい順番に配置します！

ここからの設定は、Yukihy Life様のブログの、手順３タブメニューのjQueryを参考に設定ください。

最後にCSS設定となります。こちらもYukihy Life様のブログの手順４CSSでデザインするで確認できますが、当ブログの設定を念のため記載しておきます！

/* サイドメニュータブ */
.tab{
    display: inline-block;
    padding: 8px 15px 5px 15px;
    background: #f0f0f0; / *反応していないタブの背景色* /
    border-radius: 5px 5px 0 0;
    font-size: 12px; / *文字サイズ* /
    cursor: pointer;
}
.active{
    color: white;
    background: black; / *反応しているタブの背景色* /
    border-radius: 5px 5px 0 0;
}
.hatena-module-title2{
    border-bottom: 3px solid black; / *タブの下線* /
}
/* サイドメニュータブ完 */

以上の設定で当ブログのように、サイドメニューがタブ化されます。（なお現在は、コメントのタブを、お友達リンクに変更してます）

カテゴリーの階層化

次にカテゴリーを階層化するカスタマイズを紹介します。こちらは、以下のブログ様を参考にさせてもらいました。ありがとうございます。

このカスタマイズについては、小さな星がほらひとつ様のそのまんまの設定を適用していますので、改めて当ブログでコードを書いてもと思いますので、該当のブログ様を参考にしてみてください！以下が当ブログの設定後です。

サイドメニューで目次を固定（PCのみ）

次は、サイドメニューに目次を表示できるようにして、記事スクロールした時に目次だけ固定して表示しっぱなしになる設定です。固定はPCのみで、スマホの時はサイドメニューがブログの下部に表示されるので、下部に目次が表示されるだけです。

やり方は以下のブログ様を参考にさせていただきました。ありがとうございます。全く同じ設定をしただけですので当ブログでの設定の仕方は記載しませんので、該当のブログ様を参考にしていただければと思います！

当ブログで設定した結果です。目次なのでリンクとなっておりそのリンクをクリックすると、そこの記事まで飛んで行ってくれますし、いま表示している場所の目次に色が付きます！当ブログはHTMLの下に、 「A8.net」の広告も挿入しています。（グーグルアドセンスの広告は固定して表示させるのはNGのようです）

その他の小技

SNSフォローボタンカスタマイズ

当ブログのProfileの下部にあるフォローをするボタンのカスタマイズです。はてなブログ自体にSNSフォローボタンあるのですがカッコ悪いので、四角いボタン式にしてます。こちらのやり方は、またまたYukify Life様のブログで紹介いただいたやり方を導入してますので、参考にしてみてください！

当ブログの設置画像となります。マウスを乗せるとボタンのように凹むところがお気に入りです！

サイドメニュータイトルデザインカスタマイズ

サイドメニューのタイトルデザインを変えてみました。変更の仕方は、Minimal Green様のブログに色々掲載されていますので、是非参考にしてみてください！

当ブログと同じデザインと色合いにしたい場合は、以下のCSS参照ください！サンプル画像は、SNSフォローボタンカスタマイズのProfileのメニューデザインを参照ください！

/* サイドバーデザイン */
.hatena-module-title {
    color: #555;
    font-size: 120%;/* 文字サイズ */
    padding: .5em 0 .5em .75em;
    border-left: 7px solid  #d0576b;/* 左横ボーダー */
    background-color:#fdeff2;
    margin-bottom: 12px;/* 下余白 */
}
/* サイドバーデザイン完 */

以上、当ブログのサイドメニューカスタマイズの紹介でした。

カスタマイズ関連記事

当ブログのカスタマイズ記事は他にも書いていますので掲載しておきますので参考にしてみてください。

＜ヘッダー（タイトル）に画像設定して個性的なブログに！＞

＜レスポンシブなナビゲーションメニューを設置＞

＜トップページ一覧形式をカード型にしてスタイリッシュに！＞