【解説】ブログカスタマイズ：「Minimalism」テーマのサイドバーの各モジュールをカスタマイズする

ブログカスタマイズの第5回目です！

今回は、「Minimalism 」テーマのサイドバーの各モジュール（プロフィール、検索、注目記事、最新記事など）をカスタマイズしていきます。

このブログでは、「Minimalism 」テーマを使用していますが、なるべく、どのテーマの場合でも対応ができる方法で説明していきます。

特に、「Minimalism」テーマでは、注目記事に表示されるカテゴリーのボタンは、背景色が設定されていなくて、文章との区別がつきにくいので、カテゴリーボタンの背景色を設定します。

※2024/3/31追記：次回の記事（【解説】はてなブログ：カテゴリを階層化する（補足と問題点を追記） - daisukeの技術ブログ）で、「カテゴリーの階層化」を導入しましたが、この階層化の仕組みは、注目記事のカテゴリーの表示に対応していないようです。残念ですが、注目記事のカテゴリーの表示を無効にする内容を追記します。

この記事が、誰かの助けになってくれたら嬉しく思います。

参考文献

はてなブログ Perfect GuideBook [改訂第2版]

はてなブログカスタマイズガイド: HTML & CSSで「はてなブログ」を次のステップへ!

はじめに

ブログカスタマイズの一覧です。良かったら参考にしてください。

ブログカスタマイズのまとめ

準備編：はてなブログのHTML/CSSの構造を解析する（1）
準備編2：はてなブログのHTML/CSSの構造を解析する（2）
第1回：「Minimalism」テーマのコードブロックの行間を調整する
第2回：「Minimalism」テーマのスマホで太字にならない問題の原因と対策
第3回：「Minimalism」テーマの目次の外観とリンク文字をカスタマイズする
第4回：「Minimalism」テーマの見出しをカスタマイズする
第5回：「Minimalism」テーマのサイドバーの各モジュールをカスタマイズする ← 今回
第6回：カテゴリを階層化する（補足と問題点を追記）
第7回：Minimalismのカスタマイズ2点と、2つの問題点（スマホで見たときの画像余白と画像と背景の境界）の解決
第8回：CSS対応のタイトル付きの囲み枠を使う方法（定型文に登録）
第9回：ページ全体の表示フォントを変更する
番外編：編集ボタンを表示させる（編集ボタンを復活させる）
番外編2：カテゴリー階層化のソースコードを解析する
発展編：自作のデザインテーマを作る

最初に、今回のまとめとして、外観のビフォーアフターと、デザインCSSの末尾にコピペすればいいコードを貼っておきます。

変更前

オリジナルの注目記事のカテゴリー

変更後

「Minimalism 」テーマの注目記事のカテゴリーをカスタイマイズした

デザインCSSに追記する内容

.entries-access-ranking-categories a {
  background: #f0f0f0;
};

準備物

下記準備物の入手方法については、第1回目の事前準備（【解説】はてなブログ：「Minimalism」テーマのコードブロックの行間を調整する - daisukeの技術ブログ）で説明しています。

事前準備

・ テスト用ブログに投稿した「サンプルエントリー」を開いておく
　（デベロッパーツールを使うため）
・テスト用ブログの管理画面から、
　「 ãƒ‡ã‚¶ã‚¤ãƒ³â†’ ã‚«ã‚¹ã‚¿ãƒžã‚¤ã‚ºã‚’クリック→{} デザインCSS」で開いておく
・「Minimalism」テーマのCSSソースファイル
・「サンプルエントリー」のHTMLのソースファイル

「Minimalism」テーマのサイドバーのモジュールのカスタマイズ

サイドバーのモジュールのHTMLを把握する

【解説】はてなブログのHTML/CSSの構造を解析する（2） - daisukeの技術ブログで、サイドバーの各モジュールも含めて、はてなブログの大まかなパーツの配置を特定しました。

サイドバーのモジュールのところを抜粋します。

<aside id="box2">
  <div id="box2-inner">
    
    <div class="hatena-module hatena-module-profile">プロフィール</div>
    <div class="hatena-module hatena-module-search-box">検索</div>
    <div class="hatena-module hatena-module-links">リンク</div>
    <div class="hatena-module hatena-module-recent-entries">最新記事</div>
    <div class="hatena-module hatena-module-archive"月別アーカイブ</div>
  
  </div>
</aside>

「Minimalism」のサイドバーのモジュールのCSSを理解する

具体的な進め方は、（【解説】はてなブログ：「Minimalism」テーマのコードブロックの行間を調整する - daisukeの技術ブログ）で書いたので、その通りに進めていきます。

「Minimalism」テーマのCSSソースファイルを開き、-moduleで検索しました（下図）。

「Minimalism」のサイドバーの各モジュールのCSS

検索結果の先頭はコメントアウトされていました。

検索結果の2番目は以下の通りで、全モジュールにhatena-moduleというクラスが入っています。つまり、モジュールの下側のマージン（間隔）ということです。

.hatena-module {
  margin-bottom: 60px;
}

検索結果の3から5番目までは、各モジュールのタイトル（最新記事、リンク、など）のデザインを設定しています（下図は3つの結果を合わせて表示しています）。

.hatena-module-title {
  font-weight: 600;
  margin-bottom: 15px;
  font-size: 120%;
  padding:0 0 5px 5px;
  border-bottom: 1px solid #ECEEF1;
}
.hatena-module-title a {
  color: #3f3f3f;
  text-decoration: none;
}
.hatena-module-title a:hover {
  text-decoration: underline;
}

検索結果の6から9番目までと14番目は、プロフィールモジュールについてのデザイン設定です。

検索結果の10から13番目までと15番目は、検索モジュールについてのデザインの設定です。

検索結果の16から19番目までは、スマホ、タブレットのデザインの設定です。

以降では、個別にカスタマイズした内容について説明します。

注目記事のカテゴリーに背景色を設定する

「Minimalism」テーマでは、注目記事のカテゴリーに対して、特別な指定はしていませんでした。

次に、デベロッパーツールで、注目記事のカテゴリーについて、確認していきます（下図）。

入り組んでいるが、注目記事と、注目記事のカテゴリーは分かれていて、注目記事のカテゴリーを特定するentries-access-ranking-categoriesクラスがありました。

こういう場合は、他に影響を与えないように、なるべく局所的に、目的の要素について、指定する方が望ましいです。

注目記事のカテゴリを特定、対象セレクタも特定した

では、あとは、配色を検討しやすいサイト（WEB色見本 原色大辞典 - HTMLカラーコード）を見ながら、バランスのいい色を決めて、デザインCSSに追記して確認していきます。結果は以下となりました。

デザインCSSに追記する内容

.entries-access-ranking-categories a {
  background: #f0f0f0;
};

注目記事のカテゴリーを非表示にする（追記）

次回の記事（【解説】はてなブログ：カテゴリを階層化する（補足と問題点を追記） - daisukeの技術ブログ）で、「カテゴリーの階層化」を導入しましたが、この階層化の仕組みは、注目記事のカテゴリーの表示に対応していないようでした。残念ですが、注目記事のカテゴリーの表示を無効にする内容を追記します。

※2024/4/6追記：投稿当初は、注目記事のカテゴリーを、CSSで非表示にする方法を書いていましたが、簡単な方法があったので、修正します

ブログ管理画面→デザイン→カスタマイズ→サイドバー→注目記事の編集→「カテゴリを表示する」のチェックをOFFにします

おわりに

サイドバーのモジュールについて、注目記事のカテゴリーの背景色が設定されていないことが気になっていたので、今回はカスタマイズすることにしました。

今のところは、それ以外については特に気になるところはありませんが、また、サイドバーのモジュールで、変更したい内容ができたら追記することにします。

今回は以上です！

最後までお読みいただき、ありがとうございました。