【Cocoon】スキン「ふわっと追加」を作成しました

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

概要は「好きなスキンにふわっとした動き（フェイドイン）を追加できるスキン」です。

「スキン」とは少し違うかもしれませんが…、興味がある方はお試しください！

スポンサーリンク

作った理由

Cocoonのスキンには様々なデザインがありますが、動きが少ないかなと思いました。

情報提供がメインのブログであれば、動きは不要かなと思います。ですが、少しブランディングしたい場合であれば、ふわっと表示されるだけで雰囲気が出たりします。

たとえば、LP（ランディングページ）などで商品を販売するサイトなどでは利用されます。ですので、そのような方が運営するブログであれば、「雰囲気を合わせたい」などで使いたい方もいらっしゃるかなと思い作ってみました^^

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

まずは、下記ページから最新版をダウンロードください。
スキン「ふわっと追加」

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

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

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

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

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

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

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

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

使い方

使い方はシンプルで、下記３ステップでご利用いただけます。

１．当スキン「ふわっと追加」を選択

上記「スキンのダウンロード・アップロード」で追加された「スキン一覧」の「ふわっと追加」を選択して、「変更をまとめて保存」を押して保存します。

２．使いたいスキンを選択

当スキンを選択すると、「スキン一覧」の下に「表示スキン（ベース）」という項目が追加されます。

そこで使いたいスキンを選択し、上記１同様に「変更をまとめて保存」をクリックし保存します。
※保存は下記「３．ふわっとタイプを選択」を選択した後でOKです

３．ふわっとタイプを選択

当スキンを選択すると、「スキン一覧」の下に「ふわっとタイプ」という項目が追加されます。

そこで「ふわっとタイプ」を選択し、上記１同様に「変更をまとめて保存」をクリックし保存します。

動きについて

動画も載せていますので、簡単にですが動きを確認してみてください。

■１．ふわっと

全体的にふわっと表示されます。

■２．下からふわっと

メインの中身が下からふわっと表示されます。

■３．メインは左から、サイドは右からふわっと

メインが左から、サイドが右からふわっと表示されます。

■４．ヘッダー部分は上から、メインは左から、サイドは右からふわっと

メインが左から、サイドが右からふわっと表示され、最後にヘッダーが上からふわっと表示されます。

ライセンスについて

このスキンはWordPressテーマ、Cocoonのスキンです。「Cocoon」はGPLとなっておりますので、このスキン「ふわっと追加」もGPLとなります。

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

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

使用しているCDN

スクロールしてコンテンツが表示されたタイミングでclassを追加するために使わせていただいています。
jquery.inview

（2023/1/17）ブラウザへの負荷を軽減するためにCDNの読み込みを止めました。

調査・対応・テストについて

スキンを作成する上で行ったことです。スキンを使う上では関係ありません。参考までに書いておきますが、読む必要は特にありません。

調査

Cocoon 2.4.4を調査しました。使用するスキンIDを取得する関数「get_skin_url」が使用されている箇所を調査しました。

上述した「表示スキン（ベース）」を適応させる必要があるためです。

対応

調査で確認した使用箇所でスキン表示に必要な処理を当スキンの「functions.php」で「表示スキン（ベース）」も同様に読み込まれるよう対応を行いました。

テスト

選択できる全スキン（下記テンプレートは除く）のトップページ、固定ページ、投稿ページ、カテゴリ一覧ページの各4ページに対して下記を確認しました。

普通に各スキンを選択した場合と、「ふわっと追加」を選択し「表示スキン（ベース）」で各スキンを選択した場合を比較しました。

比較内容はページの見た目とソースの違いです。ページの見た目はすべて同じで「ふわっとした動き」のみ追加されていました。また、ソースも「表示スキン（ベース）」が必要な個所で読み込まれているだけでそれ以外の違いはありませんでした。

どちらも問題ありませんでしたので、記事にしました。

ご要望など

もし他のパターンも追加してほしいなどありましたら、お気軽にコメントからご連絡ください。

スポンサーリンク