Cocoon初のダークスキン!「ダークエンジ」含む暗色スキン3種追加

スキン
この記事は約3分で読めます。

ダークスキンは、前々から欲しい欲しいと思っていました。

理由は、結構需要があるから。

都市伝説系、オカルト、占いサイトなど、暗色系の雰囲気が大事なジャンルもあるので一定数の需要があります。

けれど、その需要は知りつつも自作でスキン作りを実行するまでには至りませんでした。

というのも、暗色系のスキンを作るのは、滅茶苦茶手間がかかるからです。普通のスキンの労力の何倍もかかるんじゃなかろうか。

ダークスキンは単に色を反転すればよいということではなく、サイトのパーツすべてにくまなく目配せする必要があるので、とても大変なんです。

そんな、とにかく手間のかかるダークスキンを50代の副業ブログを運営されているヒロアキさんが作ってくださいました。

Cocoonスキン『ダークスキン』の特徴
このページは「ダークスキン」について書いているので、サイドバーの「スキン切り替え」から「ダークエンジ」、「ダークルリ」、「ダークカモノハ」を選択してください。 久々に気合い入れてスキンを作ってみました。 ダークモードというのが流行っている(

今回、この「ダークエンジ(赤系)」スキンの他に、「ダークルリ(青系)」、「ダークカモノハ(緑系)」の全3種類をCocoonに同梱させていただきました。

\エックスサーバー開発のWordPressテーマ/
エックスサーバー開発のWordPressテーマ

ダークスキン

今回同梱した「ダークエンジ」「ダークルリ」「ダークカモノハ」は、Cocoon待望のダークスキン第一号になります。

名前の由来は、「ダーク + 色名」となっています。えんじ色と、瑠璃色、鴨の羽色の3種類です。

ダークエンジ

ダークエンジは、臙脂色(えんじいろ)のダークスキンです。黒みをおびた深く艶やかな紅色がキーカラーになっています。

skin-dark-enji

ダークルリ

ダークルリは、 瑠璃色(るりいろ)のダークスキンです。濃い紫みの鮮やかな青色がキーカラーになっています。

skin-dark-ruri

ダークカモノハ

ダークカモノハは、鴨の羽色(かものはいろ)のダークスキンです。真鴨 の頭の羽色に由来する少し暗い青緑色がキーカラーになっています。

skin-dark-kamonoha

レイアウト

各部分はこんな感じ。

見出し

h2-h6の見出しはこんな感じ。

ダークエンジの見出し

目次

目次は、キーカラーと補色系の色が半々です。

ダークエンジの目次

アイコンボックス

アイコンボックスもしっかりと暗色対応。

ダークエンジのアイコンボックス

タブボックス

タブボックスもしっかりと黒抜き。

ダークエンジのタブボックス

吹き出し

吹き出しもダーク感を損ないません。

ダークエンジの吹き出し

ブログカード

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

ダークエンジのブログカード

タイムライン

タイムラインも黒背景。

ダークエンジのタイムライン

アイコンリスト

アイコンリストも当然対応。

ダークエンジのアイコンリスト

見出しボックス

ダークエンジのの見出しボックス

タブ見出しボックス

ダークエンジのタブ見出しボックス

ラベルボックス

ダークエンジのラベルボックス

テーブル

テーブルは行ごとにほのかに色が違います。

ダークエンジのテーブル

引用

引用は、大幅にデザイン変更してあります。

ダークエンジの引用

インライン部分

強調文字や、マーカー色もダークテーマに合わせて色を調整してあります。

ダークエンジの強調文字

ダークエンジのマーカー

エントリーカード

インデックスのエントリーカードも、奇数と偶数でデザインに変化をつけてあります。

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

ページネーション

細かな部分ですが、ページネーションには、金環日食のようなエフェクトがつけてあり、細部までカッコイイです。

ダークスキンのページネーション

上記は、「ダークルリ」のもの。

ダークスキンは作成がとにかく大変

ここまでで紹介した部位は、ほんの一部です。

変化のあった部分すべては、とてもじゃないけど紹介しきれません。

ダークスキンを作る場合、それぞれのパーツ一つ一つを暗色に合わせてCSSを書く必要があり、滅茶苦茶大変です。

暗色系のカスタマイズをしたことがある人は、この大変さがわかるのではないかと思います。

Cocoonは、機能の多いテーマですので、大変なのは、なおさらのこと。

作者様の苦労が容易に想像できます((((;゚Д゚))))

ということで、その他の部位については、実際にスキンを適用して確認してみてください。

設定方法

今回紹介したダークスキンは、Cocoon親テーマに同梱されています。

利用するには、Cocoon設定の「スキン」タブからスキンを適用して保存してみてください。

ダークスキンの設定方法

スキンの詳細については、以下のページをご確認ください。

Cocoonスキン『ダークスキン』の特徴
このページは「ダークスキン」について書いているので、サイドバーの「スキン切り替え」から「ダークエンジ」、「ダークルリ」、「ダークカモノハ」を選択してください。 久々に気合い入れてスキンを作ってみました。 ダークモードというのが流行っている(

コメント テーマの質問はフォーラムへ

  1. 木村 昌洋 より:

    ダークエンジ(赤系)を使っているのですが、ワードプレスがアップされたらパソコンでも携帯でも最初の表示がおかしくなりました。どうしたらいいのでしょうか?

    お忙しいところ申し訳ありませんがよろしくお願いします。

    サイト名:【愛媛&周辺】100万ドルの夜景を求めて!
    サイトURL:https://www.mk-ehimenight.com
    ホームURL:https://www.mk-ehimenight.com
    コンテンツURL:/wp-content
    インクルードURL:/wp-includes/
    テンプレートURL:/wp-content/themes/cocoon-master
    スタイルシートURL:/wp-content/themes/cocoon-child-master
    子テーマスタイル:/wp-content/themes/cocoon-child-master/style.css
    スキン:/wp-content/themes/cocoon-master/skins/skin-dark-enji/style.css
    WordPressバージョン:5.4.1
    PHPバージョン:7.2.27
    ブラウザ:Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.61 Safari/537.36
    サーバーソフト:Apache
    サーバープロトコル:HTTP/1.1
    言語:ja,en-US;q=0.9,en;q=0.8
    ----------------------------------------------
    テーマ名:Cocoon
    バージョン:2.1.5.4
    カテゴリ数:5
    タグ数:11
    ユーザー数:1
    ----------------------------------------------
    子テーマ名:Cocoon Child
    バージョン:1.1.0
    style.cssサイズ:827バイト
    functions.phpサイズ:203バイト
    ----------------------------------------------
    Gutenberg:1
    AMP:1
    PWA:0
    Font Awesome:4
    Auto Post Thumbnail:0
    Retina:0
    ホームイメージ:/wp-content/themes/cocoon-master/screenshot.jpg
    ----------------------------------------------
    ブラウザキャッシュ有効化:1
    HTML縮小化:1
    CSS縮小化:1
    JavaScript縮小化:1
    Lazy Load:1
    WEBフォントLazy Load:1
    ----------------------------------------------
    利用中のプラグイン:
    All In One SEO Pack 3.4.3
    Classic Editor 1.5
    Contact Form 7 5.1.6
    Easy FancyBox 1.8.18
    Google Analytics for WordPress 1.4.6
    Invisible reCaptcha 1.2.3
    Media Library Assistant 2.81
    Menu Image 2.9.5
    Movable Type and TypePad Importer 0.4
    PS Auto Sitemap 1.1.9
    TinyMCE Advanced 5.3.0
    TypeSquare Webfonts for エックスサーバー 1.2.1

    • わいひら わいひら より:

      大変申し訳ないですがコメントの案内にありますようにテーマへの質問は、お手数ですがフォーラムの方に書き込んでいただけると助かります。

      こちらから、「トピックを追加」ボタンを押してコピペで同様のことを書き込んでいただければ幸いです。

      ※フォーラムの書き込みは登録不要です。

      コメント機能だと機能が貧弱で、画像アップロード機能などがなく、対応(案内)が大変なのでご協力よろしくお願いいたします。
      ほんとトピックを立ててコピペするだけで良いので。

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