くまお、遊ぶ。

いい歳こいたおっさんの遊び。

くまお、遊ぶ。

トップ > ブログカスタマイズ > 【まとめ】ブログカスタマイズ：Brooklynデザイン風のタブ選択表示切り替え部品をサイドバーに設置する方法

【まとめ】ブログカスタマイズ：Brooklynデザイン風のタブ選択表示切り替え部品をサイドバーに設置する方法

ブログカスタマイズ 自分メモ

スポンサーリンク

サイドバーにいろいろ追加して行くと縦にどんどん長くなるので見栄えが悪くなる。

これを改善したく、独自追加したHTMLをタブ選択で表示を切り替えられるようにカスタマイズをしたので、忘れないよう書き残しておきます。

3TABと2TABの2パターンそれぞれに、Brooklyn標準の見出しと黒背景白文字見出しの２パターンで全部で4パターンのCSSを以下に記載した。また、HTMLは3TABと2TABの2パターンのテンプレートを記載した。

（TABを実装する記事はこちらに集約し、過去の記事の内容は削除済み）

やったこと

  • タブ切り替えの部品（CSSのコード）を作成し、デザインCSSに適用した。
  • デザインCSSに適用したTAB選択表示切り替えを使ったコンテンツをサイドバーにHTMLで埋め込んだ。
  • Brooklyn標準風に加え、黒背景白文字見出しにも対応した。

参考にしたサイトは末尾の出典・参考の章に記載してあるので、必要に応じて参照いただきたい。

デザインCSSに埋め込むものは、ラジオボタンを上書きしてTAB表示にするコード

CSSに記述するコードの基本部分はこちらのサイトを参考にさせていただき、デザインの変更（Brooklyn風に改変）を施した。

デザインCSSに埋め込むコード（3TAB）

Brooklyn標準風CSS
  1. /* サイドバー用タブ設定：Brooklyn対応 */
  2. /* タブ切り替え全体のスタイル */
  3. .side_tabs {
  4. margin-top: 0px;
  5. padding-bottom: 0px;
  6. background-color: #fff;
  7. width: 100%;
  8. hight: auto;
  9. margin: 0 auto;
  10. }
  11. /* タブのスタイル */
  12. .side_tab_item {
  13. transition: all 0.2s ease;
  14. position: relative;
  15. width: calc(100%/3 - 6px);
  16. height: 36px;
  17. background-color: #d9d9d9;
  18. line-height: 18px;
  19. font-size: 16px;
  20. text-align: center;
  21. color: #565656;
  22. display: block;
  23. float: left;
  24. font-weight: bold;
  25. border: 2px solid #d9d9d9;
  26. margin-left: 1px;
  27. margin-right: 1px;
  28. }
  29. .side_tab_item:first-child, {
  30. width: calc(100%/3 - 5px);
  31. margin-left: 0px;
  32. margin-right: 1px;
  33. }
  34. .side_tab_item:last-child {
  35. width: calc(100%/3 - 5px);
  36. margin-left: 1px;
  37. margin-right: 0px;
  38. }
  39. /* タブの下に吹き出しを付ける */
  40. .side_tab_item:before, .side_tab_item:after {
  41. content: "";
  42. position: absolute;
  43. right: 0;
  44. left: 0;
  45. width: 0px;
  46. height: 0px;
  47. margin: auto;
  48. }
  49. /* タブの吹き出し部分 */
  50. .side_tab_item:before {
  51. display: none;
  52. bottom: -10px;
  53. border-style: solid;
  54. border-color: #000000 transparent transparent transparent;
  55. border-width: 10px 10px 0 10px;
  56. }
  57. /* タブの中抜き部分 */
  58. .side_tab_item:after {
  59. display: none;
  60. bottom: -7px;
  61. border-style: solid;
  62. border-color: #ffffff transparent transparent transparent;
  63. border-width: 8px 8px 0 8px;
  64. }
  65. /* マウスオーバーの動作 */
  66. .side_tab_item:hover {
  67. /* opacity: 0.75;*/
  68. text-decoration: underline;
  69. }
  70. /* ラジオボタンを消す */
  71. input[name="side_tab_item"] {
  72. display: none;
  73. }
  74. /* タブ切り替えの中身のスタイル */
  75. .side_tab_content {
  76. display: none;
  77. padding: 12px 0px 2px;
  78. clear: both;
  79. overflow: hidden;
  80. }
  81. /* 選択されているタブのコンテンツのみを表示 */
  82. #my_recommended:checked ~ #my_recommended_content,
  83. #my_category:checked ~ #my_category_content,
  84. #my_tweet:checked ~ #my_tweet_content {
  85. display: block;
  86. }
  87. /* 選択されているタブのスタイルを変える */
  88. .side_tabs input:checked + .side_tab_item {
  89. width: calc(100%/3 - 4px);
  90. height: 36px;
  91. background-color: white;
  92. color: black;
  93. border: 2px solid black;
  94. margin-left: 0px;
  95. margin-right: 0px;
  96. }
  97. /* 吹き出し部分の表示 */
  98. .side_tabs input:checked + .side_tab_item:before {
  99. display: block;
  100. }
  101. /* 吹き出し部分の中抜きの表示 */
  102. .side_tabs input:checked + .side_tab_item:after {
  103. display: block;
  104. }

 

  • 7行目：テーマ「Brooklyn」のサイドバーの見出しの幅、モバイル表示のいずれにも合うように設定。
  • 15行目：幅を3等分して6px（borderの2pxの2倍（左右）と左右タブとの隙間1pxの2倍（左右）の合計）を引いた幅にする。左端、右端タブの調整はそれぞれ29〜33行目、34〜38行目で実施している。
  • 16行目：borderの2pxの2倍（上下）を足して40pxになるように36pxを指定。
  • 18〜19行目：タブ表示文字のフォントサイズ16で上下に1pxずつ隙間を開ける（2行表示が前提）ように設定（なので、line-heightが16+2=8）。
  • 25行目：非選択状態のタブの外枠描画を2pxで背景と同色を指定。
  • 31〜32行目：左端タブは右マージンだけ1px取って隣接タブとの隙間を作る。
  • 36〜37行目：右端タブは左マージンだけ1pt取って隣接タブとの隙間を作る。
  • 51、59行目：非選択状態では吹き出しと吹き出し中抜き部分は非表示にする。吹き出し部分の表示についてはこちらのサイトを参考にさせて頂いた。
  • 68行目：マウスオーバーの動作はテキストにアンダーライン表示させる。指定方法はこちらのサイトを参考にさせて頂いた。
  • 82〜84行目：HTMLで指定するタブのIDを適切に設定し、選択されたタブのコンテンツのみを表示するように設定。
  • 89行目：3等分からborderの分（左右合わせて4px)を引いた幅を設定。
  • 90行目：選択されたタブの高さがborderの分（上下合わせて4px)を足して40pxになるように36pxを設定。
  • 91〜92行目：黒背景白文字を指定する。
  • 93行目：外枠の描画を黒色2px指定する。
  • 103行目：Brooklyn標準のサイドバー見出しは黒枠白抜きのため吹き出しの中抜き（白抜き）を表示する。吹き出し部分の表示についてはこちらのサイトを参考にさせて頂いた。

 

Brooklynカスタム見出し黒背景白文字風CSS

Brooklyn黒背景白文字見出しに合わせた3TAB表示切り替えの表示例

Brooklyn黒背景白文字見出しに合わせた3TAB表示切り替えの表示例
  1. /* サイドバー用タブ設定：Brooklyn対応 */
  2. /* タブ切り替え全体のスタイル */
  3. .side_tabs {
  4. margin-top: 0px;
  5. padding-bottom: 0px;
  6. background-color: #fff;
  7. width: 100%;
  8. hight: auto;
  9. margin: 0 auto;
  10. }
  11. /* タブのスタイル */
  12. .side_tab_item {
  13. transition: all 0.2s ease;
  14. position: relative;
  15. width: calc(100%/3 - 6px);
  16. height: 36px;
  17. background-color: #d9d9d9;
  18. line-height: 18px;
  19. font-size: 16px;
  20. text-align: center;
  21. color: #565656;
  22. display: block;
  23. float: left;
  24. font-weight: bold;
  25. border: 2px solid #d9d9d9;
  26. margin-left: 1px;
  27. margin-right: 1px;
  28. }
  29. .side_tab_item:first-child {
  30. width: calc(100%/3 - 5px);
  31. margin-left: 0px;
  32. margin-right: 1px;
  33. }
  34. .side_tab_item:last-child {
  35. width: calc(100%/3 - 5px);
  36. margin-left: 1px;
  37. margin-right: 0px;
  38. }
  39. /* タブの下に吹き出しを付ける */
  40. .side_tab_item:before, .side_tab_item:after {
  41. content: "";
  42. position: absolute;
  43. right: 0;
  44. left: 0;
  45. width: 0px;
  46. height: 0px;
  47. margin: auto;
  48. }
  49. /* タブの吹き出し部分 */
  50. .side_tab_item:before {
  51. display: none;
  52. bottom: -10px;
  53. border-style: solid;
  54. border-color: #000000 transparent transparent transparent;
  55. border-width: 10px 10px 0 10px;
  56. }
  57. /* タブの中抜き部分 */
  58. .side_tab_item:after {
  59. display: none;
  60. bottom: -7px;
  61. border-style: solid;
  62. border-color: #ffffff transparent transparent transparent;
  63. border-width: 8px 8px 0 8px;
  64. }
  65. /* マウスオーバーの動作 */
  66. .side_tab_item:hover {
  67. /* opacity: 0.75;*/
  68. text-decoration: underline;
  69. }
  70. /* ラジオボタンを消す */
  71. input[name="side_tab_item"] {
  72. display: none;
  73. }
  74. /* タブ切り替えの中身のスタイル */
  75. .side_tab_content {
  76. display: none;
  77. padding: 12px 0px 2px;
  78. clear: both;
  79. overflow: hidden;
  80. }
  81. /* 選択されているタブのコンテンツのみを表示 */
  82. #my_recommended:checked ~ #my_recommended_content,
  83. #my_category:checked ~ #my_category_content,
  84. #my_tweet:checked ~ #my_tweet_content {
  85. display: block;
  86. }
  87. /* 選択されているタブのスタイルを変える */
  88. .side_tabs input:checked + .side_tab_item {
  89. width: calc(100%/3 - 4px);
  90. height: 36px;
  91. background-color: black;
  92. color: white;
  93. border: 2px solid black;
  94. margin-left: 0px;
  95. margin-right: 0px;
  96. }
  97. /* 吹き出し部分の表示 */
  98. .side_tabs input:checked + .side_tab_item:before {
  99. display: block;
  100. }
  101. /* 吹き出し部分の中抜きの表示 */
  102. .side_tabs input:checked + .side_tab_item:after {
  103. display: none;
  104. }

 

  • 91〜92行目：白背景黒文字を指定する。
  • 103行目：Brooklynカスタム見出し（黒背景白文字）に合わせて吹き出しの中抜き（白抜き）を表示しない。

 

コンテンツのテンプレートHTML（例） 
  1. <div class="side_tabs">
  2.   <input id="my_recommended" type="radio" name="side_tab_item" checked>
  3.   <label class="side_tab_item" for="my_recommended">オススメ<br>記事</label>
  4.   <input id="my_category" type="radio" name="side_tab_item">
  5.   <label class="side_tab_item" for="my_category">主要<br>カテゴリ</label>
  6.   <input id="my_tweet" type="radio" name="side_tab_item">
  7.   <label class="side_tab_item" for="my_tweet">My<br>Tweet</label>
  9.   <!-- TAB1：オススメ記事 -->
  10.   <div class="side_tab_content" id="my_recommended_content">
  11.     <div class="tab_content_description">
  13.       <!-- ここにオススメ記事のリンクを記載する -->
  15.     </div>
  16.   </div>
  18.   <!-- TAB2：主要カテゴリ -->
  19.   <div class="side_tab_content" id="my_category_content">
  20.     <div class="tab_content_description">
  22.       <!-- ここに主要カテゴリのリンクを記載する -->
  24.     </div>
  25.   </div>
  27.   <!-- TAB3：My Tweet -->
  28.   <div class="side_tab_content" id="my_tweet_content" style="text-align:center;">
  29.     <div class="tab_content_description">
  31.       <!-- ここにTwitterのリンクを記載する -->
  33.     </div>
  34.   </div>
  35. </div>

 

  • 1行目：タブ選択表示切り替えを使うことを宣言。
  • 2行目：TAB1の設置。idにはCSSの82行目に記述したものを指定する。nameにはCSSに記述したタブ表示のクラス「side_tab_item」を指定する。
  • 3行目：TAB1の表示内容の指定。classにはCSSに記述したタブ表示のクラス「side_tab_item」を指定する。forには2行目のidと同じものを指定する。なお3TABは幅が狭いため表示内容を<BR>タグで２段に区切っている。CSSの18行目でline-heightを18pxにしているため2段で36pxとなるため、上下枠線と合わせて高さ40pxちょうどとなる。
  • 4行目：TAB2の設置。idはCSSの83行目に記述したものを指定する。nameにはCSSに記述したタブ表示のクラス「side_tab_item」を指定する。
  • 5行目：TAB2の表示内容の指定。classにはCSSに記述したタブ表示のクラス「side_tab_item」を指定する。forには4行目のidと同じものを指定する。
  • 6行目：TAB3の設置。idはCSSの84行目に記述したものを指定する。nameにはCSSに記述したタブ表示のクラス「side_tab_item」を指定する。
  • 7行目：TAB3の表示内容の指定。classにはCSSに記述したタブ表示のクラス「side_tab_item」を指定する。forには6行目のidと同じものを指定する。
  • 10行目：TAB1のコンテンツの開始。classにはCSSに記述したタブ表示のクラス「side_tab_content」を指定する。idにはCSSの83行目に記述したものを指定する。CSSの82行目に記述した「#my_recommended:checked ~ #my_recommended_content」は、HTMLの4行目で指定した"my_recommended"からHTML本行の"my_recommended_content"の終わり、つまり該当コンテンツ部分を示している。
  • 12〜14行目：TAB1のコンテンツ部分。任意のHTMLを記述する。
  • 19行目：TAB2のコンテンツの開始。classにはCSSに記述したタブ表示のクラス「side_tab_content」を指定する。idにはCSSの84行目に記述したものを指定する。原理は10行目の説明と同じ。
  • 21〜23行目：TAB2のコンテンツ部分。
  • 28行目：TAB3のコンテンツの開始。classにはCSSに記述したタブ表示のクラス「side_tab_content」を指定する。idにはCSSの85行目に記述したものを指定する。ここではコンテンツの横幅が短めのため、画面中央寄せするようにstyle指定をしている（そのような使い方も可能、という例）。
  • 30〜32行目：TAB3のコンテンツ部分。
  • 11、20、29行目：tab_content_descriptionはCSSに記述していないが、恐らく標準実装されているものと思われるため、お作法としてこのまま使っている。

 

デザインCSSに埋め込むコード（2TAB）

Brooklyn標準風CSS

Brooklyn標準風に合わせた2TAB表示切り替えの表示例

Brooklyn標準風に合わせた2TAB表示切り替えの表示例
  1. /* サイドバー用タブ設定：Brooklyn対応 */
  2. /* タブ切り替え全体のスタイル */
  3. .side_tabs {
  4. margin-top: 1px;
  5. padding-bottom: 1px;
  6. background-color: #fff;
  7. width: 100%;
  8. hight: auto;
  9. margin: 0 auto;
  10. }
  11. /* タブのスタイル */
  12. .side_tab_item {
  13. transition: all 0.2s ease;
  14. position: relative;
  15. width: calc(100%/2 - 6px);
  16. height: 36px;
  17. border-left: 1px solid white;
  18. background-color: #d9d9d9;
  19. line-height: 36px;
  20. font-size: 16px;
  21. text-align: center;
  22. color: #565656;
  23. display: block;
  24. float: left;
  25. font-weight: bold;
  26. border: 2px solid #d9d9d9;
  27. margin-left: 1px;
  28. margin-right: 1px;
  29. }
  30. /* タブの下に吹き出しを付ける */
  31. .side_tab_item:before, .side_tab_item:after {
  32. content: "";
  33. position: absolute;
  34. right: 0;
  35. left: 0;
  36. width: 0px;
  37. height: 0px;
  38. margin: auto;
  39. }
  40. /* タブの吹き出し部分 */
  41. .side_tab_item:before {
  42. display: none;
  43. bottom: -10px;
  44. border-style: solid;
  45. border-color: #000000 transparent transparent transparent;
  46. border-width: 10px 10px 0 10px;
  47. }
  48. /* タブの中抜き部分 */
  49. .side_tab_item:after {
  50. display: none;
  51. bottom: -7px;
  52. border-style: solid;
  53. border-color: #ffffff transparent transparent transparent;
  54. border-width: 8px 8px 0 8px;
  55. }
  56. /* マウスオーバーの動作 */
  57. .side_tab_item:hover {
  58. /* opacity: 0.75;*/
  59. text-decoration: underline;
  60. }
  61. /* ラジオボタンを消す */
  62. input[name="side_tab_item"] {
  63. display: none;
  64. }
  65. /* タブ切り替えの中身のスタイル */
  66. .side_tab_content {
  67. display: none;
  68. padding: 12px 0px 2px;
  69. clear: both;
  70. overflow: hidden;
  71. }
  72. /* 選択されているタブのコンテンツのみを表示 */
  73. #my_recommended:checked ~ #my_recommended_content,
  74. /* #my_category:checked ~ #my_category_content, */
  75. #my_tweet:checked ~ #my_tweet_content {
  76. display: block;
  77. }
  78. /* 選択されているタブのスタイルを変える */
  79. .side_tabs input:checked + .side_tab_item {
  80. width: calc(100%/2 - 5px);
  81. height: 36px;
  82. background-color: white;
  83. color: black;
  84. border: 2px solid black;
  85. margin-left: 0px;
  86. }
  87. /* 吹き出し部分の表示 */
  88. .side_tabs input:checked + .side_tab_item:before {
  89. display: block;
  90. }
  91. /* 吹き出し部分の中抜きの表示 */
  92. .side_tabs input:checked + .side_tab_item:after {
  93. display: block;
  94. }  

 

  • 15行目：幅を2等分して6px（borderの2pxの2倍（左右）と左右タブとの隙間1pxの2倍（左右）の合計）を引いた幅にする。左端、右端タブの調整はそれぞれ29〜33行目、34〜38行目で実施している。
  • 19行目：2TABは横幅が確保できるためタブに表示する文字は1行を前提に、line-heightを36としている。
  • 74行目：2TABのため切り替え表示対象を1つ削っている。ここではオススメ記事とMy Tweetを残し、主要カテゴリを削除している。
  • 80行目：2TABに最適な幅を設定。ここは選択されたTABの幅となるため非選択TABより1px大きくしている。

 

Brooklynカスタム見出し黒背景白文字風CSS
  1. /* サイドバー用タブ設定：Brooklyn対応 */
  2. /* タブ切り替え全体のスタイル */
  3. .side_tabs {
  4. margin-top: 1px;
  5. padding-bottom: 1px;
  6. background-color: #fff;
  7. width: 100%;
  8. hight: auto;
  9. margin: 0 auto;
  10. }
  11. /* タブのスタイル */
  12. .side_tab_item {
  13. transition: all 0.2s ease;
  14. position: relative;
  15. width: calc(100%/2 - 6px);
  16. height: 36px;
  17. border-left: 1px solid white;
  18. background-color: #d9d9d9;
  19. line-height: 36px;
  20. font-size: 16px;
  21. text-align: center;
  22. color: #565656;
  23. display: block;
  24. float: left;
  25. font-weight: bold;
  26. border: 2px solid #d9d9d9;
  27. margin-left: 1px;
  28. margin-right: 1px;
  29. }
  30. /* タブの下に吹き出しを付ける */
  31. .side_tab_item:before, .side_tab_item:after {
  32. content: "";
  33. position: absolute;
  34. right: 0;
  35. left: 0;
  36. width: 0px;
  37. height: 0px;
  38. margin: auto;
  39. }
  40. /* タブの吹き出し部分 */
  41. .side_tab_item:before {
  42. display: none;
  43. bottom: -10px;
  44. border-style: solid;
  45. border-color: #000000 transparent transparent transparent;
  46. border-width: 10px 10px 0 10px;
  47. }
  48. /* タブの中抜き部分 */
  49. .side_tab_item:after {
  50. display: none;
  51. bottom: -7px;
  52. border-style: solid;
  53. border-color: #ffffff transparent transparent transparent;
  54. border-width: 8px 8px 0 8px;
  55. }
  56. /* マウスオーバーの動作 */
  57. .side_tab_item:hover {
  58. /* opacity: 0.75;*/
  59. text-decoration: underline;
  60. }
  61. /* ラジオボタンを消す */
  62. input[name="side_tab_item"] {
  63. display: none;
  64. }
  65. /* タブ切り替えの中身のスタイル */
  66. .side_tab_content {
  67. display: none;
  68. padding: 12px 0px 2px;
  69. clear: both;
  70. overflow: hidden;
  71. }
  72. /* 選択されているタブのコンテンツのみを表示 */
  73. #my_recommended:checked ~ #my_recommended_content,
  74. /* #my_category:checked ~ #my_category_content, */
  75. #my_tweet:checked ~ #my_tweet_content {
  76. display: block;
  77. }
  78. /* 選択されているタブのスタイルを変える */
  79. .side_tabs input:checked + .side_tab_item {
  80. width: calc(100%/2 - 5px);
  81. height: 36px;
  82. background-color: black;
  83. color: white;
  84. border: 2px solid black;
  85. margin-left: 0px;
  86. }
  87. /* 吹き出し部分の表示 */
  88. .side_tabs input:checked + .side_tab_item:before {
  89. display: block;
  90. }
  91. /* 吹き出し部分の中抜きの表示 */
  92. .side_tabs input:checked + .side_tab_item:after {
  93. display: none;
  94. }

 

 

コンテンツのテンプレートHTML（例）
  1. <div class="side_tabs">
  2.   <input id="my_recommended" type="radio" name="side_tab_item" checked>
  3.   <label class="side_tab_item" for="my_recommended">オススメ<br>記事</label>
  4.   <input id="my_tweet" type="radio" name="side_tab_item">
  5.   <label class="side_tab_item" for="my_tweet">My<br>Tweet</label>
  7.   <!-- TAB1：オススメ記事 -->
  8.   <div class="side_tab_content" id="my_recommended_content">
  9.     <div class="tab_content_description">
  11.       <!-- ここにオススメ記事のリンクを記載する -->
  13.     </div>
  14.   </div>
  16.   <!-- TAB2：My Tweet -->
  17.   <div class="side_tab_content" id="my_tweet_content" style="text-align:center;">
  18.     <div class="tab_content_description">
  20.       <!-- ここにTwitterのリンクを記載する -->
  22.     </div>
  23.   </div>
  24. </div>

 

 

デザインCSS反映方法

デザインCSSの書き換え方は以下を参照のこと。

kumao130z.hatenablog.com

サイドバーに追加するには、CSSに追加した部品を使ったHTMLコンテンツを追記する

サイドバーのHTMLに埋め込むコード

デザインCSSに3TABのタブ表示切り替えCSSコードを埋め込んだ場合は3TAB用HTML、2TABのタブ表示切り替えCSSコードを埋め込んだ場合は2TAB用のHTMLを以下の手順に従ってサイドバー に適切に配置する。

 

サイドバーへ設置する方法

  1. [デザイン-詳細設定-サイドバー]を開く

    はてなブログの設定画面左の「デザイン」をクリックする。

    はてなブログの設定画面左の「デザイン」をクリックする。

    工具アイコン（詳細設定）をクリックする。

    工具アイコン（詳細設定）をクリックする。

    「サイドバー」をクリックする。

    「サイドバー」をクリックする。

  2. [サイドバー]枠一番下[＋モジュールを追加]を開く

    「サイドバー」枠一番下の「＋モジュールを追加」をクリックする。

    「サイドバー」枠一番下の「＋モジュールを追加」をクリックする。

  3. [モジュールを追加]画面左側の[</>HTML]を開く。

    「モジュールを追加」画面左の「</>HTML」をクリックする。

    「モジュールを追加」画面左の「</>HTML」をクリックする。

  4. [</>HTML]画面右側のHTML入力欄にコードを貼り付け、[適用ボタン]を押して設定を反映する。

    「</>HTML」画面右側のHTML記述欄にコードを貼り付ける。

    「</>HTML」画面右側のHTML記述欄にコードを貼り付ける。

    「適用」ボタンを押し、貼り付けたHTMLをサイドバーに設定する。

    「適用」ボタンを押し、貼り付けたHTMLをサイドバーに設定する。

（おまけ）Brooklynのサイドバー見出しを黒背景白文字に変える

テーマ「Brooklyn」標準のサイドバーのデザインは黒枠で白背景に黒文字だが、黒背景白文字が自分の好みに合うためテーマのデザインをカスタマイズした。

デザインCSSにサイドバーの設定を変更するコードを埋め込む

こちらのサイトを参考に、色の設定を変更した。

 

  1. /* サイドバー タイトル部の設定変更 */
  2. /* 四角部分 */
  3. .hatena-module-title { color: white; background: black; }
  4. /* 文字 */
  5. .hatena-module-title a { color: white; }
  6. /* 吹き出しの枠線 */
  7. .hatena-module-title:before { border-top-color: black; }
  8. /* 吹き出しの背景 */
  9. .hatena-module-title:after { border-top-color: black; }

 

  • 3行目：見出しの外枠部分に白文字、黒背景を指定。
  • 5行目：見出しの文字に白を指定。（3行目だけだと文字色が白にならない模様）
  • 7行目：見出しの枠の下にある吹き出し（V）に黒を指定。
  • 9行目：見出しの枠の下にある吹き出し（V）に黒背景を指定。

 

出典・参考

下記リンク先の情報を参考にさせていただきました。

リンク先のブログ管理者の皆さまに感謝申し上げます。

大変助かりました！ありがとうございます！

TAB選択で表示するコンテンツを切り替える方法

bagelee.com

テーマ「Brooklyn」のサイドバーの見出しをカスタマイズする方法

mmorley.hatenablog.com

マウスオーバーの動作の指定方法

www.schaft-japan.com

吹き出し部分の表示方法

www.granfairs.com

TAB選択（ラジオボタン、チェックボックスの:checked）に連動して要素を表示する方法

www.koikikukan.com