ブログサイドバー（汎用）

このパーツの使いどころと実装ポイント

このパーツは、ブログの脇によくある「プロフィール・カテゴリー・人気記事・タグクラウド」を一式そろえた汎用サイドバーです。全体は display:flex;flex-direction:column;gap:24px で各ウィジェットを縦に積み、ひとつひとつを白いカード（border-radius と薄い box-shadow）で区切って情報のまとまりを明確にしています。見出しは下線付きの小さなラベル、人気記事は番号付きの ol で順位を表現しています。

向いている場面

個人ブログ、オウンドメディア、企業のお役立ちコラムなど、記事一覧の横に回遊導線を置きたいサイト全般に向きます。プロフィールで書き手を伝え、カテゴリーやタグで関連記事へ誘導し、人気記事で滞在を伸ばす、という王道の構成がそのまま入っています。

カスタマイズの勘所

• 必要なウィジェットだけ残し、不要な sb-bw__w ブロックは丸ごと削れる
• カテゴリー横の件数 span は記事数に合わせて差し替える
• タグクラウドの a はリンクなので実際のタグページへ href を付ける

実装上は、各リンクに href を補い、アバターのダミーグラデーションを実写へ差し替えます。max-width:320px 前提なので、本体記事との 2 カラムに組み込む際は親グリッド側で幅を決めます。スマホでは本文の下に回り込ませる縦積みが自然です。見出しの h4 がページ内で階層的に矛盾しないよう、本文の見出しレベルと整合させてください。