PR

案内ボックスを好きな色に変更/CSSカスタマイズ/cocoon備忘録

備忘録アイキャッチ
記事内に広告が含まれています。
スポンサーリンク
Kura
Kura

WordPress初心者のわたしが悩みながら調べながらカスタマイズしてきた「COCOON備忘録」です。同じく悩んでいる人にお役に立てれば幸いです。

この記事は、

案内ボックスを

オリジナル色に変更する方法

を説明しています。

案内ボックスの色選択画面
案内ボックスカラー選択

デフォルトでも八種類の色変更ができますが、

ブログのイメージに合わない色はないのと同じです。

わたしは、以下の5色をオリジナルカラーに変更しています。

案内ボックス変更前の写真
変更前
案内ボックス変更後の画像
変更後
     \\Let’s try!//
Kura
Kura

❶ 好きな色を決めて

❷ CSSコードのカラーを変更して

❸ カスタマイズCSSに追記していきましょう

スポンサーリンク

好きな色を決める

変更したい色を決めましょう。

WEB色見本 原色大辞典 - HTMLカラーコード
色の名前とカラーコードが一目でわかるWEB色見本
Kura
Kura

カラーコードを調べたり、好きなを探すときにお世話になっています。

✔︎ 拡張カラーとして設定した色をつかうとブログの統一感がましてお洒落ですね。

拡張色の設定画像
ダッシュボード→cocoon設定→エディッター

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追記場所の説明画像
ダッシュボード→外観→カスタマイズ

❷ 追記CSS

Css追記場所の説明画像
追加CSS

❸ CSSコードを入力し「公開」にて反映させる。

CSSコードを貼り付ける場所の説明画像
CSSをペースト→公開

わたしが変更した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;
}

案内ボックスの色が変更できたか確認してみよう

案内ボックスを設置したあと、

新しいプレビューを開いて案内ボックスカラーが変わっているか確認してみてくださいね。

案内ボックスを案内ボックスを設置した写真
変更したのに変わらない?
プレビューを開ける方法の説明画像
新しいプレビューを開く

安心してください。変わっています。

プレジューで見る案内ボックス画像
オリジナル色に変更した案内ボックス

まとめ

案内ボックスをオリジナル色に変更するCSSカスタマイズ方法でした。

「こんなイメージのブログにしたい」とデザインが浮かんでも、

WordPressがなかなか使いこなせず、

再現するために悩みながら調べながらとここまで亀歩みでカスタマイズしてきました。

そんな自分のために備忘録をかねて書いた記事でした。

この記事をかいた人
Kurage

41歳主婦
刺し子をはじめて数年、その奥深さに震えています。
海にそばに住んで、たゆたう月を眺めて12年。
刺し子のこと、のんびり暮らしを言葉に紡いだ、雑記ブログ

Kurageをフォローする
Cocoons備忘録
スポンサーリンク
Kurageをフォローする

コメント

タイトルとURLをコピーしました