このサイトでは、サイドバーの「スキン切り替え」メニューからスキンを切り替えることができます。

Cocoonのダークスキンを新たに追加!

Cocoonのダークスキンを新たに追加 ダークスキン

この記事は、新たに追加したダーク系スキンについて書いています。(Cocoonに標準では同梱されていないスキンです)

右のサイドバーにある「スキン切り替え」から、「ダークレッド」、「ダークシアン」、「ダークイエロー」を選択すると、各スキンが確認できます。

Cocoonスキン「ダークレッド」

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

でも、もうちょっとアクセントが控えめでシンプルでもいいかなと思い、赤がアクセントの「ダークレッド」を追加しました。

「ダークレッド」は、以下のページよりスキンのダウンロードができます。

※「ダークシアン」、「ダークイエロー」も追加しました。

Cocoonスキン「ダークレッド」の特徴

「ダークレッド」は、「ダークエンジ」をベースにところどころ変更しています。

基本の色は黒で変わらず、アクセントとして「赤」を使ってかなりシンプルなスキンに仕上げました。

ちなみに、アクセントのカラーが映えるように、背景はさらに黒を強くしています。

ベースの「ダークエンジ」から変更された部分は、以降を参考にしてください。

ここでは、「ダークレッド」の特徴を書いていますが、アクセントの色が変わるだけで、「ダークシアン」、「ダークイエロー」も、特徴は全く同じです。

「ダークレッド」のグローバルメニュー

グローバルメニューにマウスを乗せると、下の方から赤いボーダーが「ニュッ」と浮き上がるようにしました。

ダークレッドのグローバルメニュー

「ダークレッド」のタブ一覧のタブとエントリカードのホバー

Cocoonのトップページの「タブ一覧」は背景はなしにして「ボーダー」のみ赤くしました。

また、トップページの「エントリーカード」にマウスを乗せると、左上と右下にボーダーの一部が「ビョーン」って感じで中心から広がるようにしました。

ダークレッドのタブ一覧とエントリーカード

「ダークレッド」のサイドバー見出し

サイドバーの見出し(H3)はシンプルに2色のボーダ(赤+シルバー)にしました。

ダークレッドのサイドバーの見出し

「ダークレッド」のSNSフォロー、SNSシェア

SNSのフォロー、シェアのボタンにマウスを乗せると、背景が黒で、文字が赤くなるようにjしました。

「ダークレッド」のSNSフォロー、SNSシェア

「ダークレッド」のコメントボタンなど

コメントのボタンや、問い合わせの送信ボタンなどに、マウスを乗せるとボーダーが赤くなるようにしました。

「ダークレッド」のコメントボタンなど

「ダークレッド」の見出し

各見出しは以下の通り。

見出し(H2)

見出し(H2)です。

 

見出し(H3)

見出し(H3)です。

 

見出し(H4)

見出し(H4)です。

 

見出し(H5)

見出し(H5)です。

 

見出し(H6)

見出し(H6)です。

 

以上、「ダークレッド」の特徴でした。

「ダークレッド」は、以下のページよりスキンのダウンロードができます。

※「ダークシアン」、「ダークイエロー」も追加しました。

ここでは、「ダークレッド」の特徴を書いていますが、アクセントの色が変わるだけで、「ダークシアン」、「ダークイエロー」も、特徴は全く同じです。

 

コメント

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