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では、マウスを乗せた時に、囲まれているボーダーがジワっと明るくなるようにしています。

Cocoonスキン「ダークブラック」のダウンロード

各部分のカスタマイズ方法を記載するつもりでしたが、なんか面倒になってきたので、全体的に黒で統一した「ダークブラック」を作ってみました。

どんなスキンなのか興味がある人は、サイドバーの「スキン切り替え」より「ダークブラック」を選んで確認してみてください。

なお、「ダークブラック」は下のボタンからダウンロードできます。

このスキンはCocoonに同梱されていないため、公式にはサポートされていないものとなります。

なので、このスキンに対して不具合や質問がある場合は、Cocoonのフォーラムに投稿しないで、こちらのブログのコメントか、「お問い合わせ」で問い合わせてください。
よろしくお願いします。

ダークブラック

コメント

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