2022年9月28日Wordpress2つ目のCocoonのスキンを作成してみました。「指定した4色がゆっくり入れ替わっていくスキン」です。サイトの背景色が入れ替わっていきます。引用元:Chromeまた、「記事内のタイトル」と「サイドバーのタイトル」にもその色を適応させることができます。適応させると、選択した色を順番に適応させます。(色が薄いのは「不透明度」を設定することができるためです)引用元:Wordpress>Cocoon少し扱いにくいかもしれませんが...、興味がある方はお試しください!スポンサーリンクスキンのダウンロード・アップロードまずは、下記ページから最新版をダウンロードください。Child)にアップロード子テーマをご利用の方はこちらをご確認ください。引用:Filezilla>Cocoonそうすると、Cocoon設定>「スキン」タブの「スキン一覧」に当スキンが追加されます。引用:Wordpress>Cocoon親テーマ(Cocoon)にアップロード子テーマをご利用ではない方はこちらをご確認ください。引用:Filezilla>Cocoonそうすると、Cocoon設定>「スキン」タブの「スキン一覧」に当スキンが追加されます。使い方は下記5ステップでご利用いただけます。上記「スキンのダウンロード・アップロード」で追加された「スキン一覧」の「ゆっくり色が変化」を選択して、「変更をまとめて保存」で保存します。当スキンを選択すると「表示スキン」の下に「スキンカラー」という項目が追加されます。引用:Wordpress>Cocoonそこで色を4つ選びます。選択した色は「背景アニメーション」「記事内のタイトル」「サイドバー内のタイトル」に適応されます。色選び下記サイトさんが色選びの参考になると思います。https://www.palettelist.com/ff3737/9de16fまた、下記サイトさんは、配色パターンに関するサイトをまとめてくれています(4色以外もあります)。https://webdesign-trends.net/entry/152133.背景アニメーション当スキンを選択すると「背景アニメーション」という項目も追加されます。引用:Wordpress>Cocoonそこで「一通り変化するまでの時間」と「不透明度」を設定できます。背景アニメーションでは「スキンカラー」で選択した色がゆっくり入れ替わっていきます。赤・オレンジ・青・紫を選択したとすると、「赤⇒オレンジ⇒青⇒紫⇒青⇒オレンジ⇒赤」と1回のアニメーションで変化します。この1回のアニメーションの時間を1秒~120秒の間で設定することができます。近づけるほどより透明になります。全体」の「サイト背景色」や「サイト背景画像」を設定しない場合は、不透明度を小さくするほど色が薄くなります。引用:Wordpress>Cocoon「サイト背景色」や「サイト背景画像」を設定した場合は、背景色や背景画像が透けて見えるようになります。実際に見た方が分かりやすいと思いますので、不透明度を「30」、スキンカラーを下記4色で設定したもので各パターンを試してみます。背景が白いので、単純に薄くなります。引用:Wordpress>Cocoon背景が黒いので、シックな色合いになります。雰囲気をガラッと変えることができます。引用:Wordpress>Cocoon少し不思議な雰囲気が出せます。4色ともに同じ色にすると、単純に写真の雰囲気を変えることもできます。引用元:Chrome4.記事内のタイトル当スキンを選択すると、「記事内のタイトル」という項目も追加されます。引用:Wordpress>Cocoonそこで「適応する/適応しない」と「不透明度」を設定できます。適応する/適応しない「適応する」を選ぶと下記のように記事内のタイトルに「スキンカラー」を順番に適応させます。「適応しない」を選ぶと記事内のタイトルには適応しません。近づけるほど色は薄くなります。上の「適応する/適応しない」の画像が不透明度が「20」の場合です。不透明度を「100」にすると下記のようにスキンカラーと同じ色になります。引用元:Chrome(見出し(H2)の場合)見出しH4、H5の線にもこの不透明度が適応されます。引用元:Chrome不透明度(H3タイトルの左側の線の色)Cocoonの見出し(H3)は下記のようなスタイルです。引用元:Chrome太い線(左側の線)と細い線(上・右・下の線)で色の濃さが異なります。同じスタイルで設定できるように、太い線(左側の線)用に不透明度を用意しました。内容・設定方法は「不透明度(背景と線の色)」と同じです。記事内のタイトルについて注意点があります。「スキンカラー」を赤・オレンジ・青・紫とした場合、記事内のH2に対して「1番目のH2を赤」「2番目のH2をオレンジ」・・・、H3も同様に「1番目のH3を赤」「2番目のH3をオレンジ」・・・というように色を付けています。上のような色付け方法なので、記事の構成が1段落目が「H2、H3、H3」構成、2段落目が「H2、H3」構成となると、下記色付けになります。引用元:Chrome「3番目のH3(青)」は青ではなく赤にしたいケースがあるかと思います。見出しに対して「skincolor1」~「skincolor4」のクラスを設定すると、好きなスキンカラーを適応できます。下記の場合だと「skincolor1」を指定すると赤、「skincolor2」はオレンジ、「skincolor3」は青、「skincolor4」は紫となります。引用:Wordpress>Cocoonブロックエディタでの設定方法1.見出しブロックを選択する引用:Wordpress>Cocoon2.画面右側にある「ブロック」をクリックする3.一番下に「追加CSSクラス」があるのでそこに「skincolor1」~「skincolor4」を指定する引用:Wordpress>Cocoon旧エディタでの設定方法1.「テキスト」タブをクリックする引用:Wordpress2.タグに「class=”skincolor1′′」を追記する※「skincolor1」~「skincolor4」のいずれかを指定してください引用:Wordpressブロックエディタ・旧エディタでクラスを追加することで、タイトルに好きなスキンカラーを設定することができます。引用:Wordpress>Cocoon5.サイドバー内のタイトル当スキンを選択すると「サイドバー内のタイトル」という項目も追加されます。引用:Wordpress>Cocoonそこでサイドバーのタイトルに対しても「適応する/適応しない」と「不透明度」を設定できます。内容・設定方法は上記「4.記事内のタイトル」と同じです。色の付け方サイドバーの場合は、「1つ目のウィジェットタイトルを赤」「2つ目のウィジェットタイトルをオレンジ」・・・というように色を付けます。タイトルがないウィジェットは数えないので、順番にスキンカラーが適応されます。引用:ChromeライセンスについてこのスキンはWordPressテーマ、Cocoonのスキンです。「Cocoon」はGPLとなっておりますので、このスキン「ゆっくり色が変化」もGPLとなります。Cocoonさんの利用規約がたいへん分かりやすいですので、リンクを掲載しておきます。何か不備な点等ありましたら、ご指摘いただけますと幸いです。ご要望など何かご要望がありましたら、お気軽にコメントからご連絡ください。【Wordpress】ハッキング?サイトアクセスで変なリダイレクトを調査。PMブログ初心者です。おもしろいスキンだと思いましてCocoon「ゆっくり色の変化」をダウンロードさせていただきました。ダウンロード後、現在作成中のブログのスキンをゆっくり色の変化に変更をしました。(ちなみに上記のサイトは別のスキンでの公開です)しばらくするとパソコンがチラチラ点滅し始めまして、スキンを変更しても改善されないのですが、わたしの操作かパソコン※になにか問題があるのでしょうか。※パソコンは富士通のFMVA77E3Bで、購入後1年です。以上よろしくお願いいたします。AM杉村さまご返信たいへん遅くなり申し訳ありません。私の環境では再現されませんでした。スキン開発中に長時間開いていましたが、その際も問題ありませんでした。スキンの内容としてもjavascriptというものをずっと動作させていたりはしていないため、大きな負担にはならないと思われます。色の変化はcssと呼ばれるサイトのスタイルなどを変更するもので行っています。※そちらが多少影響はあるかと思いますが、特異な設定はしていません一度ご確認いただきたい内容としては、違うブラウザで同現象が発生するかご確認いただけますか?※「Edge」を使用されているのであれば、「Chrome」を使うなどご迷惑をお掛けしてたいへん申し訳ありませんが、ご確認いただけましたら幸いです。