ブログカスタマイズの第5回目です！
今回は、「Minimalism 」テーマのサイドバーの各モジュール（プロフィール、検索、注目記事、最新記事など）をカスタマイズしていきます。
このブログでは、「Minimalism 」テーマを使用していますが、なるべく、どのテーマの場合でも対応ができる方法で説明していきます。
特に、「Minimalism」テーマでは、注目記事に表示されるカテゴリーのボタンは、背景色が設定されていなくて、文章との区別がつきにくいので、カテゴリーボタンの背景色を設定します。
※2024/3/31追記：次回の記事（【解説】はてなブログ：カテゴリを階層化する（補足と問題点を追記） - daisukeの技術ブログ）で、「カテゴリーの階層化」を導入しましたが、この階層化の仕組みは、注目記事のカテゴリーの表示に対応していないようです。残念ですが、注目記事のカテゴリーの表示を無効にする内容を追記します。
この記事が、誰かの助けになってくれたら嬉しく思います。
参考文献
はじめに
ブログカスタマイズの一覧です。良かったら参考にしてください。
ブログカスタマイズのまとめ
最初に、今回のまとめとして、外観のビフォーアフターと、デザイン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にします
おわりに
サイドバーのモジュールについて、注目記事のカテゴリーの背景色が設定されていないことが気になっていたので、今回はカスタマイズすることにしました。
今のところは、それ以外については特に気になるところはありませんが、また、サイドバーのモジュールで、変更したい内容ができたら追記することにします。
今回は以上です！
最後までお読みいただき、ありがとうございました。
