Cocoonのダークスキンをカスタマイズする

Cocoonのダークスキンをカスタマイズするスキンをカスタマイズ

ダークスキン(エンジ、ルリ、カモノハ)をカスマイズする記事です。

ダークスキンのカスタマイズなので、右のサイドバーにある「スキン切り替え」からダークスキンを選択してください。

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

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

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

ボタンをダークに

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

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

 

ボタンをよりダークに変える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をコピーしました