![Kura](https://i0.wp.com/umi-tuki.com/wp-content/uploads/2021/12/1CDD14FE-9EC2-4D62-8D0A-CB5B08649423-scaled.jpeg?w=1661&ssl=1)
WordPress初心者のわたしが悩みながら調べながらカスタマイズしてきた「COCOON備忘録」です。同じく悩んでいる人にお役に立てれば幸いです。
この記事は、
案内ボックスを
オリジナル色に変更する方法
を説明しています。
![案内ボックスの色選択画面](https://i0.wp.com/umi-tuki.com/wp-content/uploads/2022/04/67EC0EB5-63A9-4F60-8BA9-C26BDA6F1458.jpeg?resize=522%2C1024&ssl=1)
デフォルトでも八種類の色変更ができますが、
ブログのイメージに合わない色はないのと同じです。
わたしは、以下の5色をオリジナルカラーに変更しています。
![案内ボックス変更前の写真](https://i0.wp.com/umi-tuki.com/wp-content/uploads/2022/04/16BC5243-F4A8-4834-A22E-3DD5A189CA00.jpeg?resize=828%2C854&ssl=1)
![案内ボックス変更後の画像](https://i0.wp.com/umi-tuki.com/wp-content/uploads/2022/04/4A04C51E-9AAC-4653-B53A-81BA53E0F7AA.jpeg?resize=402%2C654&ssl=1)
![Kura](https://i0.wp.com/umi-tuki.com/wp-content/uploads/2021/12/1CDD14FE-9EC2-4D62-8D0A-CB5B08649423-scaled.jpeg?w=1661&ssl=1)
❶ 好きな色を決めて
❷ CSSコードのカラーを変更して
❸ カスタマイズCSSに追記していきましょう
好きな色を決める
変更したい色を決めましょう。
![](https://i0.wp.com/umi-tuki.com/wp-content/uploads/cocoon-resources/blog-card-cache/7c242b59eb7be4b9345ca9478d536f7c.png?resize=160%2C90&ssl=1)
![Kura](https://i0.wp.com/umi-tuki.com/wp-content/uploads/2021/12/1CDD14FE-9EC2-4D62-8D0A-CB5B08649423-scaled.jpeg?w=1661&ssl=1)
カラーコードを調べたり、好きなを探すときにお世話になっています。
✔︎ 拡張カラーとして設定した色をつかうとブログの統一感がましてお洒落ですね。
![拡張色の設定画像](https://i0.wp.com/umi-tuki.com/wp-content/uploads/2022/03/50E22316-6A21-4581-8516-3CE46C788C51.jpeg?resize=1024%2C491&ssl=1)
CSSのカラーコードを変更する
デフォルトで8色あります。
#000000のカラーコードを変更したい色のカラーコードにそれぞれ変えていきます。
✔︎ プライマリー(濃い水色)
/*プライマリー*/
.primary-box{
background-color: #000000;
}
✔︎ セカンダリー(濃い灰色)
/*セカンダリー*/
.secondary-box{
background-color: #000000;
}
✔︎ インフォ(薄い青)
/*インフォ*/
.info-box{
background-color: #000000;
}
✔︎ サクセス(薄い緑)
/*サクセス*/
.success-box{
background-color: #000000;
}
✔︎ ワーニング(薄い黄色)
/*ワーニング*/
.warning-box{
background-color: #000000;
}
✔︎ デンジャー(薄い赤色)
/*デンジャー*/
.danger-box{
background-color: #000000;
}
✔︎ ライト(白色)
/*ライト*/
.light-box{
background-color: #000000;
}
✔︎ ダーク(暗い灰色)
/*ダーク*/
.dark-box{
background-color: #000000;
}
CSSを追記するところ
❶ ダッシュボード → 外観 → カスタマイズ
![CSS追記場所の説明画像](https://i0.wp.com/umi-tuki.com/wp-content/uploads/2022/03/D30D5A6B-FF0C-45F0-B175-B2B76EE46CFE.jpeg?resize=726%2C495&ssl=1)
❷ 追記CSS
![Css追記場所の説明画像](https://i0.wp.com/umi-tuki.com/wp-content/uploads/2022/03/7B3978CE-36D4-47DB-9BED-8449A45A8447.jpeg?resize=589%2C978&ssl=1)
❸ CSSコードを入力し「公開」にて反映させる。
![CSSコードを貼り付ける場所の説明画像](https://i0.wp.com/umi-tuki.com/wp-content/uploads/2022/04/8451EA32-290D-4F27-B24F-819E7C1D0BB5.jpeg?resize=488%2C1024&ssl=1)
わたしが変更したCSSコード
/*プライマリー*/
.primary-box{
background-color: #c3d4da;
}
/*サクセス*/
.success-box{
background-color: #cdd8d8;
}
/*インフォ*/
.info-box{
background-color: #eebeb0;
}
/*ワーニング*/
.warning-box{
background-color: #d7c7bd;
}
/*デンジャー*/
.danger-box{
background-color: #dcd2c2;
}
案内ボックスの色が変更できたか確認してみよう
案内ボックスを設置したあと、
新しいプレビューを開いて案内ボックスカラーが変わっているか確認してみてくださいね。
![案内ボックスを案内ボックスを設置した写真](https://i0.wp.com/umi-tuki.com/wp-content/uploads/2022/04/E295E21E-3342-420A-9D25-8D138693CADA.jpeg?resize=1024%2C514&ssl=1)
![プレビューを開ける方法の説明画像](https://i0.wp.com/umi-tuki.com/wp-content/uploads/2022/04/403F0AD6-987F-4DD7-84B1-F089B60FD186.jpeg?resize=1024%2C451&ssl=1)
安心してください。変わっています。
![プレジューで見る案内ボックス画像](https://i0.wp.com/umi-tuki.com/wp-content/uploads/2022/04/80BDCE9F-5AB0-4DFF-BBCC-213D7D113A81.jpeg?resize=1024%2C637&ssl=1)
まとめ
案内ボックスをオリジナル色に変更するCSSカスタマイズ方法でした。
「こんなイメージのブログにしたい」とデザインが浮かんでも、
WordPressがなかなか使いこなせず、
再現するために悩みながら調べながらとここまで亀歩みでカスタマイズしてきました。
そんな自分のために備忘録をかねて書いた記事でした。