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

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

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

引用元:Chrome

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

引用元:Wordpress>Cocoon

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

スポンサーリンク

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

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

子テーマ(Cocoon Child)にアップロード

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

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

引用:Filezilla>Cocoon

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

引用:Wordpress>Cocoon

親テーマ(Cocoon)にアップロード

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

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

引用:Filezilla>Cocoon

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

引用:Wordpress>Cocoon

使い方

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

  1. 当スキン「ゆっくり色が変化」を選択
  2. スキンカラーを4色選択
  3. 背景アニメーションの「一通り変化するまでの時間」「不透明度」を設定
  4. 記事内のタイトルの「不透明度」を設定
  5. サイドバー内のタイトルの「不透明度」を設定

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

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

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

引用:Wordpress>Cocoon

2.スキンカラーを4色選択

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

引用:Wordpress>Cocoon

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

 色選び

下記サイトさんが色選びの参考になると思います。
https://www.palettelist.com/ff3737/9de16f

また、下記サイトさんは、配色パターンに関するサイトをまとめてくれています(4色以外もあります)。
https://webdesign-trends.net/entry/15213

3.背景アニメーション

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

引用:Wordpress>Cocoon

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

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

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

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

不透明度

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

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

引用:Wordpress>Cocoon

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

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

引用:Wordpress>Cocoon

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

引用元:Chrome

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

引用:Wordpress>Cocoon

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

引用元:Chrome

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

引用:Wordpress>Cocoon

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

引用元:Chrome

4.記事内のタイトル

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

引用:Wordpress>Cocoon

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

適応する/適応しない

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

引用元:Chrome

不透明度(背景と線の色)

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

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

引用元:Chrome(見出し(H2)の場合)

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

引用元:Chrome

不透明度(H3タイトルの左側の線の色)

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

引用元:Chrome

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

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

注意点と対処法

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

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

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

引用元:Chrome

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

対処法

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

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

引用:Wordpress>Cocoon
ブロックエディタでの設定方法

1.見出しブロックを選択する

引用:Wordpress>Cocoon

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

引用:Wordpress>Cocoon
旧エディタでの設定方法

1.「テキスト」タブをクリックする

引用:Wordpress

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

引用:Wordpress

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

引用:Wordpress>Cocoon

5.サイドバー内のタイトル

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

引用:Wordpress>Cocoon

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

色の付け方

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

引用:Chrome

ライセンスについて

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

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

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

ご要望など

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

スポンサーリンク