Cocoonスキン『ダークスキン』の特徴

ダークスキン
このページは「ダークスキン」について書いているので、サイドバーの「スキン切り替え」から「ダークエンジ」、「ダークルリ」、「ダークカモノハ」を選択してください。
このサイトのヘッダーはグラデーションされていますが、スキンを適用してもグラデーションはされません。(実際に適用するとヘッダーは黒になります)

久々に気合い入れてスキンを作ってみました。

ダークモードというのが流行っている(?)ようなので、それっぽいのにしています。

以下に特徴をまとめます。

Cocoonスキン 見出し

H2~H6の見出しは次の通り。

 

見出し(H2)

H2の見出しです。

 

見出し(H3)

H3の見出しです。

 

見出し(H4)

H4の見出しです。

 

見出し(H5)

H5の見出しです。

 

見出し(H6)

H6の見出しです。

 

 

ページネーション

ページネーションでは「次のページ」ボタンを廃止して、ページボタンを変更。

マウスを乗せると、ちょっとだけ変わったアニメーションします。

※下のページボタンを押してもページ移動はしません。

目次

目次はリンクにマウスを乗せると背景色が変わるようにし、枠はグラデーションしてみました。

テーブル

テーブルはこんな感じ。

テーブルのキャプション
ヘッダーヘッダー
項目左1項目右1
項目左2項目右2
項目左3項目右3
項目左4項目右4

引用

引用も変更。

Cocoonは、SEO・高速化・モバイルフレンドリーに最適化した無料テーマです。

見た目はシンプルですが、初めての方でも感覚的に使えるように便利な機能を織り込んで作りました。

100%GPLテーマなので自由にご利用いただけます。

インデックスページのエントリーカード

エントリーカードは今回最もこだわったところで、カスタマイズにも一番時間がかかっています。

「エントリーカードにはなんかアクセントが欲しいな~」と思っていたところに「板チョコ」が頭に浮かんだので、「板チョコ」のように凸型のカード+背景2色にし、さらに交互で背景が変わるように変更しました。

個人的にはお気に入りの部分です。

ダークスキンのエントリーカード

ウィジェットの変更

ウィジェットも以下のものを主に変更しています。

どんなウィジェットになっているかは、サイドバーで確認できます。

  1. プロフィール
  2. 新着記事
  3. 人気記事
  4. カテゴリ
  5. カレンダー

フッター

フッターの背景を緑とエンジのストライプに変更。

ブログカード

ブログカードはこんな感じです。

テキストカラー

インライン

インラインです。(太字)

インラインです。(赤字)

インラインです。(赤太字)

インラインです。(赤アンダーライン)

インラインです。(青)

インラインです。(青太字)

インラインです。(緑)

インラインです。(緑太字)

インラインです。(打ち消し線)

インラインです。(キーボード)

マーカー

これは黄色マーカーで書いています。

これは赤色マーカーで書いています。

これは青色マーカーで書いています。

黄色アンダーラインマーカー

赤色アンダーラインマーカー

青色アンダーラインマーカー

ボックス

ボックス(アイコン)

ボックス(アイコン)補足情報(i)
ボックス(アイコン)補足情報(?)
ボックス(アイコン)注意喚起(!)
ボックス(アイコン)メモ
ボックス(アイコン)コメント
ボックス(アイコン)OK
ボックス(アイコン)NG
ボックス(アイコン)GOOD
ボックス(アイコン)BAD
ボックス(アイコン)プロフィール

 

ボックス(案内)

ボックス(案内)プライマリー(濃い水色)
ボックス(案内)セカンダリー(濃い灰色)
ボックス(案内)サクセス(薄い緑)
ボックス(案内)インフォ(薄い青)
ボックス(案内)ワーニング(薄い黄色)
ボックス(案内)デンジャー(薄い赤色)
ボックス(案内)ライト(白色)
ボックス(案内)ダーク(暗い灰色)

 

ボックス(タブ)

 

ボックス(白抜き) ※正確には黒抜き

ボックス(白抜き)
ボックス(白抜き)
ボックス(白抜き)
ボックス(白抜き)
ボックス(白抜き)

 

ボックス(付箋風)

ボックス(付箋風)
ボックス(付箋風)
ボックス(付箋風)
ボックス(付箋風)
ボックス(付箋風)

バッジ

バッジ

バッジ

バッジ

バッジ

バッジ

バッジ

バッジ

バッジ

バッジ

マイクロコピー

マイクロコピー

 

マイクロコピー

 

マイクロコピー

その他

フッターのリンクやエントリカードなど、細かい部分も含めると、いろいろ変更しているので、気になるところを確認してみてください。

Cocoonスキン『ダークエンジ』を作ってみて

とあるアプリで『ダークモード』を使っている人がいて、その画面を見た時にかっこいいな~と思ったのが、このスキンを作ったきっかけです。

基本的には、背景色と文字の色をひっくり返すだけのはずだったんですけど、予想以上に大変なことに後から気づきました。

それでも、そのまま進めてなんとか完成までにこぎつけましたが、かなりの範囲でCSSを修正しているので、ちょっと重たいスキンになったかもしれません。

 

スキン作る時には、だいたいこんな見出しにしようかな?とか、ボタンはこういう形がいいかな?と頭に描いたイメージがあるんですけど、いざCSSを修正するとほとんどはそのイメージ通りにはなりません(笑

逆に、CSSの修正をしくじった時の方が、予想外にいいものができたりします。

 

物を作るなんてのは、あまり事前にあれこれ考えずに、どんどん試行錯誤でいろんな形を試す方が、思いがけずいいものが出来たりするかもしれません。

なんか偉そうな講釈をたれてしまいましたが。

 

最後に、さきほども書きましたが、このスキンは背景色が黒になったことで、そのままではボックスの赤や黄色の色がかなりきつく見えます。

そのため、ある程度は目に優しくなるように、こんな感じに修正しています

「これは黄色のマーカーで書きました」

 

ただ、ボタンは種類が多すぎて修正する気力が出ませんでした。

なので、ボタンの色や文字の色が好みの色になっていないかもしれませんが、そのあたりは好きな色にどんどん修正していってください。

あと、ビジュアルエディタでは背景色など一部が実際の色と異なるようなので、注意してください。

よろしくお願いします。

最後の最後に!

今回のスキンは確かにベースは僕が作りましたが、いろんな部分で「ダークモード」に仕上げてくれたのは、実はわいひらさんです(笑

わいひらさん、いろいろありがとうございました!

おかげで、楽しくスキンを作ることができました。

 

スキンに不具合などあれば、Cocoonのフォームからお願いします。

コメント

  1. BB より:

    ヒロアキ様

    お世話になっております。
    私はヒロアキさんのテーマ「ダークカモノハ」を使用しているBBという者です。
    「ダークカモノハ」とてもかっこよく、気にっています!

    3ヶ月以上使用していて気づいたことがあります。
    私はブラウザをFirefoxで使用しています。
    Chromeで自身のサイトを開けると色合いが変になります(白くなる)。
    サイトカラー等はすべてデフォルトです。
    いろいろ試したのですが、原因が分かりません。

    ご相談にのっていただけると幸いです。
    よろしくお願いします。

    • ヒロアキヒロアキ より:

      お問い合わせありがとうございます、ヒロアキです!

      いろいろ確認したいことがあったので、メールしました。

      よろしくお願いします!

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