この記事は、新たに追加したダーク系スキンについて書いています。（Cocoonには同梱されていないスキンです）
追加ダークスキンの特徴
既にCocoonに同梱済みのダークスキン（ダークエンジ、ダークルリ、ダークカモノハ）は、背景が黒の暗色系となっていますが、それでも見出しやボタンなどはアクセントとして比較的目立つ色を使っています。
でも、もうちょっとアクセントが控えめでシンプルでもいいかなと思い、「ダークレッド」、「ダークシアン」、「ダークイエロー」を追加しました。
※逆に、「ダークゴールド」はあえて派手目に作りました。
以降は、スキンの特徴的なパーツについて書いています。
右のサイドバーにある「スキン切り替え」から、「ダークレッド」、「ダークシアン」、「ダークイエロー」、「ダークゴールド」を選択すると、各スキンが確認できます。
見出し
まずは、記事本文でよく使われる見出しです。
見出し（H2）
↑はH2の見出しです。
見出し（H3）
↑はH3の見出しです。
見出し（H4）
↑はH4の見出しです。
見出し（H5）
↑はH5の見出しです。
見出し（H6）
↑はH6の見出しです。
ページネーション
ページネーションです。
「次のページ」ボタンは非表示にし、ページ番号のみのページネーションになります。
目次
目次は上の方で確認できます。
テーブル（表）
テーブル（表）です。
| ヘッダー | 項目 |
|---|---|
| 項目左１ | 項目右１ |
| 項目左２ | 項目右２ |
| 項目左３ | 項目右３ |
| 項目左４ | 項目右４ |
引用
引用です。
Cocoonは、SEO・高速化・モバイルフレンドリーに最適化した無料テーマです。
見た目はシンプルですが、初めての方でも感覚的に使えるように便利な機能を織り込んで作りました。
100％GPLテーマなので自由にご利用いただけます。
ブログカード
ブログカードです。
SNSシェア、SNSフォロー
SNSのシェア、フォローボタンはこの記事の上や下で確認できます。
ランキング
カードに表示されるランキングは、サイドバーで確認できます。
追加ダークスキンのダウンロード
追加したダークスキンは、以下のボタンよりダウンロードできます。
2023.08.06）
Cocoon同梱のダークスキンの累積修正にあわせて、ダークレッド、シアン、イエローも修正。
2023.09.26）
親テーマのテーブル枠線の色変更に対応。
このスキンはCocoonに同梱されていないので、サーバーにスキンファイルをアップロードする必要があります。
ダークスキンの色を変更する方法
ここでダウンロードできるダークスキンは、キーとなる色（キーカラー）は１色だけなので、自分好みの色に簡単に変更できます。
スキンのCSSファイル（style.css）の中のキーカラーを好きな色に一括置換するだけです。
各スキンのstyle.cssの先頭部分にはキーカラーの情報が書かれていて、例えば、ダークレッドのstyle.cssは以下のように書かれています。
/* -------------------------------------------------
/ ＜キーカラー＞
/ redまたは、rgba(255, 0, 0, .X)
/ ※Xは透過率
/* -------------------------------------------------ダークレッドのキーカラーは「赤」で、style.cssには「red」または、「rgba（255, 0, 0, .X）」と指定しています。
ダークレッドを例に色について詳しく解説すると、
色を名前で表現したものがカラーネームで、ダークレッドは「red」というカラーネームになります。
また、赤をカラーコードで表現（rgba形式）したものが、rgba(255, 0, 0, .X)です。
rgbaの最後の「.X」は透過率を表し、「1」となっている場合は透過率100%となります。
透過率が100%の場合は、下に他の色があっても下の色が全く透けない指定で、透過率が100%から下がっていくと、徐々に下の色が透けるようになります。
ダークスキンではところどころ透過率を変更しているため、その場合は「rgba（255, 0, 0, .X）」と指定しています。（「.X」の部分が例えば「.5」だと50%の透過率）
繰り返しますが、ダークスキンではキーカラーをカラーネームとカラーコードの2つの形式で指定しています。
なので、好きな色に変更したい場合は、スキンのCSSファイル（style.css）の中のカラーネームとカラーコードを一括置換すればいいです。
カラーネームで変更する場合
以下は赤→緑に変更する場合の例です。（透過率の「.X」の部分は変更しません）
| カラーの表現形式 | 置換前文字列 | 置換後文字列 |
|---|---|---|
| カラーネーム | red | green |
| カラーコード「rgba（N, N, N, .X）」 | rgba（255, 0, 0, | rgba（0, 255, 0, |
色を探す場合は、以下のサイトが参考になります。（カラーネーム、カラーコード、rgb形式あり）
カラーコードで変更する場合
変更したい色がカラーネームで表現できない色の場合は、カラーネームをカラーコードの#rrggbb形式で置換することなります。
例として赤→#d45d87に変更する場合は、以下のように一括置換します。（透過率の「.X」の部分は変更しません）
| カラーの表現形式 | 置換前文字列 | 置換後文字列 |
|---|---|---|
| カラーネーム | red | #d45d87 |
| カラーコード「rgba（N, N, N, .X）」 | rgba（255, 0, 0, | rgba（212, 93, 135, |
カラーネームで表現できない色を探す時は、以下のサイトが便利です。
マウスを動かすだけで色が変わり、好みの色になったらクリックすると色が決定されます（下の方に#rrggbb形式のコードが表示されるので、それをコピー）
以下のサイトで、カラーコード→rgba形式に変換できます。
コメント
お世話になっております。
ダークシアン、イエローを適応したところ、サイドバーのメニュー（h2）CSSが作動していないようです。ご確認をお願いします。
さとしさん
お問い合わせありがとうございます。ヒロアキといいます。
早速ですが、問い合わせ内容を調査したところ、さとしさんが使われているWordPressのバージョンはおそらく古いバージョンで、「ブロックウィジェット」が採用されているバージョンだと思われます。
WordPress5.8のバージョンから、サイドバーは「ブロックウィジェット」と呼ばれるウィジェットを採用していますが、
ブロックウィジェットの場合、サイドーバーの見出しがH3からH2に変更されています。
スキンが想定しているのはあくまでもH3のため、ブロックウィジェットの場合はCSSが正しく適用されません。、
なお、Cocoonは「ブロックウィジェット」には未対応です。（他のテーマでも対応していないものがあります）
対応としては、WordPressを最新のバージョン（6.2）にアップし、Cocoonもそれにあわせて最新にアップすればこの件は解決するかと思います。（もしかして、CocoonのバージョンアップだけでもOKかもしれません）
参考までに、この問題についてはCocoonのフォーラムでも議論にあがりました。
[解決済] ブロックウィジェットへのスタイルの適用について
※ちなみに、この中で僕も発言しています。
以上ですが、WordPressのバージョンアップを試してもらえないでしょうか。
ヒロアキ様
ご回答ありがとうございます。
実はWPは本日インストールした最新のものです。
カスタマイズの知識が無く困っております。
さとしさん
ヒロアキです。
さとしさんが使われているサイトを調べてみたところ、確かにWordPressは最新版のようですね。
WordPressが「ブロックウィジェット」を採用した関連だと思いますが、同梱済のスキンはそれにあわせて修正されていることがわかりました。
（Cocoonの開発者のわいひらさんの方で修正されていたようです）
僕がその修正に気づかず、ダークシアンなどは未修正の状態だったために表示がおかしくなっていたようです。すみません。
さきほど修正版の確認をして、サーバーのスキンファイルを置き換えました。
お手数ですが、再度上のボタンからダウンロードしてもらえないでしょうか。
よろしくお願いします。
ヒロアキ様
ご対応ありがとうございます！
無事に表示されました。
これからじっくり使わせて頂きます。
さとしさん
頑張ってください！