【Cocoon】スキン「ゆっくり色が変化」を作成しました

2つ目のCocoonのスキンを作成してみました。

「指定した4色がゆっくり入れ替わっていくスキン」です。サイトの背景色が入れ替わっていきます。

また、「記事内のタイトル」と「サイドバーのタイトル」にもその色を適応させることができます。適応させると、選択した色を順番に適応させます。（色が薄いのは「不透明度」を設定することができるためです）

少し扱いにくいかもしれませんが…、興味がある方はお試しください！

スポンサーリンク

スキンのダウンロード・アップロード

まずは、下記ページから最新版をダウンロードください。
スキン「ゆっくり色が変化」

子テーマ（Cocoon Child）にアップロード

子テーマをご利用の方はこちらをご確認ください。

ダウンロードしたファイルを解凍し、その「raku-color-changing」フォルダを下記のように「wp-content > themes > cocoon-child-master > skins 」に入れてください。

そうすると、Cocoon設定＞「スキン」タブの「スキン一覧」に当スキンが追加されます。

親テーマ（Cocoon）にアップロード

子テーマをご利用ではない方はこちらをご確認ください。

ダウンロードしたファイルを解凍し、その「raku-color-changing」フォルダを下記のように「wp-content/themes/cocoon-master/skins 」に入れてください。

そうすると、Cocoon設定＞「スキン」タブの「スキン一覧」に当スキンが追加されます。

使い方

使い方は下記５ステップでご利用いただけます。

※3、4、5はそのままの設定でも問題ありません
※4、5は適応させないことも可能です

１．当スキン「ゆっくり色が変化」を選択

上記「スキンのダウンロード・アップロード」で追加された「スキン一覧」の「ゆっくり色が変化」を選択して、「変更をまとめて保存」で保存します。
※保存は下記１～４の設定後でOKです

２．スキンカラーを4色選択

当スキンを選択すると「表示スキン」の下に「スキンカラー」という項目が追加されます。

そこで色を4つ選びます。選択した色は「背景アニメーション」「記事内のタイトル」「サイドバー内のタイトル」に適応されます。

３．背景アニメーション

当スキンを選択すると「背景アニメーション」という項目も追加されます。

そこで「一通り変化するまでの時間」と「不透明度」を設定できます。

一通り変化するまでの時間

背景アニメーションでは「スキンカラー」で選択した色がゆっくり入れ替わっていきます。赤・オレンジ・青・紫を選択したとすると、「赤⇒オレンジ⇒青⇒紫⇒青⇒オレンジ⇒赤」と1回のアニメーションで変化します。

この1回のアニメーションの時間を1秒～120秒の間で設定することができます。
時間を長くするとゆっくり変化し、短くすると早く変化します。

不透明度

不透明度は 1 ～ 100 を設定できます。100 にすると透明ではなくなり、1 に近づけるほどより透明になります。

「Cocoon 設定 ＞ 全体」の「サイト背景色」や「サイト背景画像」を設定しない場合は、不透明度を小さくするほど色が薄くなります。

「サイト背景色」や「サイト背景画像」を設定した場合は、背景色や背景画像が透けて見えるようになります。

実際に見た方が分かりやすいと思いますので、不透明度を「30」、スキンカラーを下記4色で設定したもので各パターンを試してみます。

---

「サイト背景色」「サイト背景画像」の設定なしの場合
背景が白いので、単純に薄くなります。

---

「サイト背景色」を黒に設定した場合

背景が黒いので、シックな色合いになります。雰囲気をガラッと変えることができます。

---

「サイト背景画像」を設定した場合

少し不思議な雰囲気が出せます。4色ともに同じ色にすると、単純に写真の雰囲気を変えることもできます。

４．記事内のタイトル

当スキンを選択すると、「記事内のタイトル」という項目も追加されます。

そこで「適応する/適応しない」と「不透明度」を設定できます。

適応する/適応しない

「適応する」を選ぶと下記のように記事内のタイトルに「スキンカラー」を順番に適応させます。「適応しない」を選ぶと記事内のタイトルには適応しません。

不透明度（背景と線の色）

不透明度は 1 ～ 100 を設定できます。100 にするとスキンカラーで設定した色になり、1 に近づけるほど色は薄くなります。

上の「適応する/適応しない」の画像が不透明度が「20」の場合です。不透明度を「100」にすると下記のようにスキンカラーと同じ色になります。

見出しH4、H5の線にもこの不透明度が適応されます。

不透明度（H3タイトルの左側の線の色）

Cocoonの見出し（H3）は下記のようなスタイルです。

太い線（左側の線）と細い線（上・右・下の線）で色の濃さが異なります。

同じスタイルで設定できるように、太い線（左側の線）用に不透明度を用意しました。内容・設定方法は「不透明度（背景と線の色）」と同じです。

注意点と対処法

記事内のタイトルについて注意点があります。

たとえば、「スキンカラー」を赤・オレンジ・青・紫とした場合、記事内のH2に対して「1番目のH2を赤」「2番目のH2をオレンジ」・・・、H3も同様に「1番目のH3を赤」「2番目のH3をオレンジ」・・・というように色を付けています。H4以降も同様です。

上のような色付け方法なので、記事の構成が1段落目が「H2、H3、H3」構成、2段落目が「H2、H3」構成となると、下記色付けになります。

「3番目のH3（青）」は青ではなく赤にしたいケースがあるかと思います。

対処法

見出しに対して「skincolor1」～「skincolor4」のクラスを設定すると、好きなスキンカラーを適応できます。

下記の場合だと「skincolor1」を指定すると赤、「skincolor2」はオレンジ、「skincolor3」は青、「skincolor4」は紫となります。

ブロックエディタでの設定方法

１．見出しブロックを選択する

２．画面右側にある「ブロック」をクリックする
３．一番下に「追加CSSクラス」があるのでそこに「skincolor1」～「skincolor4」を指定する

旧エディタでの設定方法

１．「テキスト」タブをクリックする

２．タグに「class=”skincolor1″」を追記する
※「skincolor1」～「skincolor4」のいずれかを指定してください

ブロックエディタ・旧エディタでクラスを追加することで、タイトルに好きなスキンカラーを設定することができます。

５．サイドバー内のタイトル

当スキンを選択すると「サイドバー内のタイトル」という項目も追加されます。

そこでサイドバーのタイトルに対しても「適応する/適応しない」と「不透明度」を設定できます。内容・設定方法は上記「４．記事内のタイトル」と同じです。

色の付け方

サイドバーの場合は、「1つ目のウィジェットタイトルを赤」「2つ目のウィジェットタイトルをオレンジ」・・・というように色を付けます。タイトルがないウィジェットは数えないので、順番にスキンカラーが適応されます。

ライセンスについて

このスキンはWordPressテーマ、Cocoonのスキンです。「Cocoon」はGPLとなっておりますので、このスキン「ゆっくり色が変化」もGPLとなります。

Cocoonさんの利用規約がたいへん分かりやすいですので、リンクを掲載しておきます。
Cocoon 利用規約

何か不備な点等ありましたら、ご指摘いただけますと幸いです。

ご要望など

何かご要望がありましたら、お気軽にコメントからご連絡ください。

スポンサーリンク