サイドバーの『スキン切り替え』よりスキンを切り替えることができます!

Cocoonのスキンをカスタマイズしてみる

Cocoonのスキンをさらにカスタマイズしてみるカスタマイズ

Cocoonのスキンを使えば、ブログのデザインを簡単に変えることができます。

その反面、同じスキンを使っているブログと見た目がまったく同じになってしまうのが悩ましいところ。

少しでもオリジナリティを出すために、スキンの一部を自分の好きなように変えたい場合がありますよね。

この記事では、ここで紹介しているスキンのカスタマイズ例を紹介したいと思います。

ただし、簡単にカスタマイズできる方法が中心になるので、ご了承ください。

カラフルラインのグローバルメニューの色を変えてみる

カラフルラインは、「赤」、「緑」、「黄」の順番での配色になっています。

Cocoonのスキン「カラフルライン」のグローバルメニューの色

国旗の色に変更するCSS

これを例えば、国旗の色に変えてみます。

イメージとしては、こんな感じになります。

上から、「イタリア」、「フランス」、「ブラジル」

Cocoonのスキンのグローバルメニューの色をカスタマイズ

正確にはブラジルの国旗には濃い青も使われているんですが、サッカーのユニホーム(カナリアカラー?)の印象が強いので、緑と黄色の組み合わせにしてみました。
よく見ると、ミックスグリーンのボーダーとほぼ同じだった(笑

 

実際にメニューの色を変更するCSSです。

◯イタリアの国旗

.navi-in>ul>li:nth-of-type(3n + 1) {
  border-bottom: ridge 3px #00ad1a;
}
.navi-in>ul>li:nth-of-type(3n + 2) {
  border-bottom: ridge 3px white;
}
.navi-in>ul>li:nth-of-type(3n + 3) {
  border-bottom: ridge 3px #ff0010;
}

 

◯フランスの国旗

.navi-in>ul>li:nth-of-type(3n + 1) {
  border-bottom: ridge 3px #003cf2;
}
.navi-in>ul>li:nth-of-type(3n + 2) {
  border-bottom: ridge 3px white;
}
.navi-in>ul>li:nth-of-type(3n + 3) {
  border-bottom: ridge 3px #ff020f;
}

 

◯ブラジルの国旗

.navi-in>ul>li:nth-of-type(3n + 1),
.navi-in>ul>li:nth-of-type(3n + 2),
.navi-in>ul>li:nth-of-type(3n + 3){
  border:none;
}
.navi-in>ul>li:nth-of-type(even) {
  border-bottom: ridge 3px #f7ca00;
}
.navi-in>ul>li:nth-of-type(odd) {
  border-bottom: ridge 3px #009e1c;
}

 

◯日本の国旗

.navi-in>ul>li:nth-of-type(3n + 1),
.navi-in>ul>li:nth-of-type(3n + 2),
.navi-in>ul>li:nth-of-type(3n + 3){
  border:none;
}
.navi-in>ul>li:nth-of-type(even) {
  border-bottom: ridge 3px white;
}
.navi-in>ul>li:nth-of-type(odd) {
  border-bottom: ridge 3px #d71345;
}

上記CSSを、子テーマのstyle.cssに追加すればOKです。

追加の方法がわからない人は、次の記事を参考に追加してください。

同系色でまとめる

赤、青、緑のそれぞれの系統でまとめる場合です。

◯赤系統2色

.navi-in>ul>li:nth-of-type(3n + 1),
.navi-in>ul>li:nth-of-type(3n + 2),
.navi-in>ul>li:nth-of-type(3n + 3){
  border:none;
}
.navi-in>ul>li:nth-of-type(even) {
  border-bottom: ridge 3px #e1a5cb;
}
.navi-in>ul>li:nth-of-type(odd) {
  border-bottom: ridge 3px #a52175;
}

 

◯青系統2色

.navi-in>ul>li:nth-of-type(3n + 1),
.navi-in>ul>li:nth-of-type(3n + 2),
.navi-in>ul>li:nth-of-type(3n + 3){
  border:none;
}
.navi-in>ul>li:nth-of-type(even) {
  border-bottom: ridge 3px #aec1e3;
}
.navi-in>ul>li:nth-of-type(odd) {
  border-bottom: ridge 3px #3261ab;
}

 

◯緑系統2色

.navi-in>ul>li:nth-of-type(3n + 1),
.navi-in>ul>li:nth-of-type(3n + 2),
.navi-in>ul>li:nth-of-type(3n + 3){
  border:none;
}
.navi-in>ul>li:nth-of-type(even) {
  border-bottom: ridge 3px #91dbb9;
}
.navi-in>ul>li:nth-of-type(odd) {
  border-bottom: ridge 3px #009250;
}

自分好みのメニューの色にしたい場合は?

以下の「XXX」、「YYY」、「ZZZ」の部分に好きな色を指定すればいいです。

.navi-in>ul>li:nth-of-type(3n + 1) {
  border-bottom: ridge 3px XXX;
}

.navi-in>ul>li:nth-of-type(3n + 2) {
  border-bottom: ridge 3px YYY;
}

.navi-in>ul>li:nth-of-type(3n + 3) {
  border-bottom: ridge 3px ZZZ;
}

色にはカラーコードか、カラーネームを指定でき、カラーコードの場合は、#ff0000(赤)のように、16進コードで指定します。

カラーネームの場合、例えばgreenとか、色の名前を指定します。

色を探す場合は、次のサイトが参考になりますよ。

 

ここは、配色とかの参考になるかも。

 

ちなみに、僕がよく参考にしているサイト。

配色を2色にしたい場合は?

カラフルラインの配色は3色ですが、2色だけで配色したい場合は次のCSSを使ってください。(ブラジルのメニューや日本のメニューが2色です)

.navi-in>ul>li:nth-of-type(3n + 1),
.navi-in>ul>li:nth-of-type(3n + 2),
.navi-in>ul>li:nth-of-type(3n + 3){
  border:none;
}
.navi-in>ul>li:nth-of-type(even) {
  border-bottom: ridge 3px XXX;
}
.navi-in>ul>li:nth-of-type(odd) {
  border-bottom: ridge 3px YYY;
}

一旦3色の定義(3n + n)を「border:none」で打ち消す必要があります。

その後の「even」(偶数番目)、「odd」(奇数番目)で、好みの色を指定してください。

カラフルラインのフッターの背景色を変える

カラフルラインのフッター(3色)はちょと派手なので、シンプルな単色にしたい人もいるでしょう。

その場合は、面倒なCSSの変更ではなく、Cocoon設定の「フッター」から好きな背景色、文字の色を指定すればOKです。

ダークスキンをよりダークに

ダークスキンは背景が黒の暗色系となっていますが、それでも見出しやボタンなどはアクセントとして比較的目立つ色を使っています。

でも、よりダークにしてもおもしろそうだなと思い、目立つ色の部分をダークに変えていきたい思います。

ボタンをダークに

まずは、「コメントを書き込む」などのボタンをダークにするとこうなります。

ダークスキンのボタンをよりダークに変える

 

ボタンをよりダークに変えるCSSです。

/* □■--------------------------
/ 『ボタン』
---------------------------■□ */
.comment-btn,
.container input[type='submit'] {
color: #ccc;
  background: none;
  border: 1px solid #424242;
  box-shadow: none;
  border-radius: 4px;
}

.comment-btn:hover,
.container input[type='submit']:hover {
  color: #ccc;
  background: none;
  border: 1px solid #a5a4a4;
}

このCSSでは、マウスを乗せた時に、囲まれているボーダーがジワっと明るくなるようにしています。

コメント

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