cocoonカスタムCSS

/************************************
** ■ 見出しカスタマイズ（h1-6）
************************************/
.article h1,
.article h2,
.article h3,
.article h4,
.article h5,
.article h6 {
  padding: 0;
  margin: 0;
  font-size: medium;
  line-height: 1.6;
  font-weight: bold;
  border: none;
  position: relative;
}

/* h1 - 大見出し（タイトル） */
.article h1 {
  background: #ffa000; /* 濃いめのオレンジ */
  font-size: 24px;
  color: #ffffff;
  padding: 15px;
  border-left: 10px solid #ff8000; /* 濃いオレンジで強調 */
  border-radius: 6px;
  margin: 40px 0 20px; /* 見出しの前後に余白を確保 */
}

/* h2 - セクション見出し（黒文字 + フォント少し大きめ） */
.article h2 {
  font-size: 24px; /* h4より少し大きく */
  color: #000000; /* 黒文字 */
  padding: 15px;
  border-left: 10px solid #ff9900; /* 左の枠 */
  border-bottom: 3px solid #ff9900; /* 下のライン */
  margin: 40px 0 20px;
}

/* h3 - 小見出し（黒文字） */
.article h3 {
  font-size: 20px; /* 以前より少し小さめ */
  color: #000000; /* 黒文字 */
  padding: 15px;
  border-bottom: 3px solid #ffa000; /* h1と同じ色で下線 */
  margin: 40px 0 20px;
}

/* h4 - さらに小さい見出し（黒文字） */
.article h4 {
  font-size: 18px;
  color: #000000; /* 黒文字 */
  background: #fff5cc; /* 元の背景色 */
  padding: 15px;
  border-left: 6px solid #ffcc33; /* 元の左枠 */
  border-radius: 6px;
  margin: 40px 0 20px;
}

/* h5 - 左寄せ */
.article h5 {
  font-size: 18px;
  color: #000000; /* 黒文字 */
  text-align: left; /* 左寄せ */
  background: #ffeb99; /* 元の背景色 */
  padding: 15px;
  border-radius: 6px;
  margin: 40px 0 20px;
}

/* h6 - 装飾つき（黒文字） */
.article h6 {
  font-size: 16px;
  color: #000000; /* 黒文字 */
  background: #ff9900; /* 元の背景色 */
  padding: 15px;
  margin: 40px 0 20px;
  position: relative;
}

.article h6::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 15px;
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-top-color: #ff9900; /* 元の色に戻す */
}

/************************************
** ■ サイドバーカテゴリカスタマイズ
************************************/
/* サイドバー全体 */
/* サイドバー内の文字を黒に変更 */
.widget_sidebar {
  padding: 20px;
  background-color: #fff8e1; /* サイドバーの背景色（パイナップル風） */
  border: 1px solid #ddd; /* 枠線 */
  border-radius: 8px; /* 角丸 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 影 */
  margin-bottom: 30px; /* 下部余白 */
}

/* サイドバー内の各ウィジェット */
.widget {
  margin-bottom: 20px; /* 各ウィジェット間の余白 */
}

/* 見出し（h2, h3） */
.widget h2, .widget h3 {
  font-size: 16px; /* 小さめのフォントサイズ */
  color: #000; /* 文字色を黒に変更 */
  padding: 8px 12px;
  background-color: #fff2d9; /* 背景色（パイナップルの薄い色） */
  border-left: 6px solid #ff9f4d; /* 左ラインの太さとカラー（オレンジ） */
  border-bottom: 1px solid #ff9f4d; /* 下のライン */
  border-radius: 4px; /* 角丸 */
  line-height: 24px; /* 行間 */
  margin: 0 0 15px 0; /* 余白 */
}

/* 入力フォーム（検索フォームなど） */
.widget input[type="search"], .widget input[type="text"] {
  width: 100%;
  padding: 10px;
  font-size: 14px;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-bottom: 10px; /* 下部余白 */
}

/* ボタン（検索ボタンなど） */
.widget button {
  background-color: #ff9f4d; /* ボタン色（オレンジ） */
  color: #fff; /* 文字色 */
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

/* リスト（最近の投稿やカテゴリなど） */
.widget ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.widget ul li {
  margin-bottom: 15px; /* アイテム間の余白 */
}

.widget ul li a {
  font-size: 16px;
  font-weight: bold;
  color: #000; /* 文字色を黒に変更 */
  text-decoration: none;
  transition: color 0.3s ease;
}

/* リストアイテムのホバー */
.widget ul li a:hover {
  color: #ff9f4d; /* リンクホバー時の色（オレンジ） */
}

/* サイドバー内のリストやテキストのフォントサイズ調整 */
.widget ul li a, 
.widget .textwidget, 
.widget_search .wp-block-search__label, 
.widget_search .wp-block-search__input {
  font-size: 14px; /* 少し小さめのフォントサイズ */
  color: #000; /* 文字色を黒に変更 */
}

.widget button {
  font-size: 14px; /* ボタン内の文字も小さくする */
}

.widget ul li a {
  font-weight: normal; /* リストリンクの太さを通常に */
  color: #000; /* 文字色を黒に変更 */
}