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日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越しオプションあり(有料)

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

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

クーポンコード:PK4JK4RJ

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

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

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

サービス運営期間:16年

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

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

サービス運営期間:3年

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

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DB復旧は無料(ファイルは有料)
○サーバ引っ越しツールあり
○サーバー料金をチャージ払いが可能
△新しいサービスなので運営櫪がまだ短い

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

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

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

サービス運営期間:4年

Cocoon

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

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