新型コロナ対策のため、密閉・密集・密接空間を避けて、こまめに石鹸で手洗いをしよう!詳細はこちら。

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

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

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

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

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

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

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

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

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

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

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

スポンサーリンク

ダークスキン

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

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

ダークエンジ

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

skin-dark-enji

ダークルリ

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

skin-dark-ruri

ダークカモノハ

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

skin-dark-kamonoha

スポンサーリンク

レイアウト

各部分はこんな感じ。

見出し

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

ダークエンジの見出し

目次

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

ダークエンジの目次

アイコンボックス

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

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

タブボックス

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

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

吹き出し

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

ダークエンジの吹き出し

ブログカード

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

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

タイムライン

タイムラインも黒背景。

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

アイコンリスト

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

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

見出しボックス

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

タブ見出しボックス

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

ラベルボックス

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

テーブル

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

ダークエンジのテーブル

引用

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

ダークエンジの引用

インライン部分

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

ダークエンジの強調文字

ダークエンジのマーカー

エントリーカード

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

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

ページネーション

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

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

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

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

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

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

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

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

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

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

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

スポンサーリンク

設定方法

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

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

ダークスキンの設定方法

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

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

スキンに不具合があればご報告ください

「デザインが崩れている」とか「ここにデザインが適用されていない」等の不具合がありましたら以下でご報告いただければ幸いです。

スキンの不具合
スキンに不具合があればご報告ください。デザイン性を保ったままなるべく修正できればと思います。

オリジナルスキンを紹介させてください

スキンを作成した場合は、是非お知らせください。

スキンを作成した際にはぜひ当サイトで紹介させてください
スキンを作成したならば、是非当サイトで紹介させていただければと思います。また、親テーマに同梱させていただければ幸いです。

当サイトの記事で紹介させていただきます。

スキン
スポンサーリンク
わいひら

無料WordPressテーマ、Simplicity、Cocoonを作成。当サイトと寝ログを運営しています。

わいひらをフォローする
わいひらをフォローする
おすすめサーバー(コスパ・バックアップ重視型)

性能も兼ね備えながら安くブログ運営を開始できる点においてのNo.1。

◎安く始められる
◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:1年10ヶ月

1年以上の契約をする場合は、クーポンコード入力でさらに10%割引(※2020/6/30まで)。

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

とにかく速い。サイトに表示スピードを求めるならココ。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎サーバ引っ越しツールあり(無料)
○サーバ引っ越し依頼が可能(有料)
◎ドメインとサーバー代のチャージ払いが可能

サービス運営期間:1年8ヶ月

プラン変更で負荷対策が行えるので、ブログ向きのレンタルサーバーです。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎ディスク容量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
○ファイルは14日以内なら無料復旧可能(※手動)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:3年

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DBは7日以内なら無料自動復旧可能
×ファイルは有料かつ手動での復旧
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可

サービス運営期間:16年

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
サイトを続けるうちにアクセスが増えれば、プランのアップグレートで対応可能です。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越し依頼が可能(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)

サービス運営期間:4年

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をコピーしました