Cocoonでコンテンツエリアをフェードイン表示させるカスタマイズ

Cocoon

今回はアニメーションを使って、Cocoonのコンテンツエリアをフェードイン表示させるカスタマイズを行います。
CSSだけでカスタマイズできるので、難しいことはありません。

コピペだけでできるのでお試しください~

スポンサーリンク

子テーマを使用しましょう

カスタマイズをするので子テーマを使いましょう!
子テーマの使い方がわからない場合は、こちらの記事を参考にしてください。

【WordPress】テーマをカスタマイズをするときは、子テーマを使うべし!
WordPressの機能の一つとして、 「子テーマ」というものがあります。 ブログを書き始めた方の場合や、 WordPressを使い始めた方の場合は、 「子テーマ?なんだそれ」とか 「親テーマにそのままコードを書けばいいじゃん...
【WordPress】子テーマの導入方法と使い方を覚えてガンガンカスタマイズする!
前回こちらの記事で、 子テーマの重要性について説明しました。 今回はその子テーマの導入方法と、 使い方についてご説明します。 子テーマを導入する! 子テーマを導入する方法は2通りあります。 1つは親テーマと一緒にダウ...

Cocoonの子テーマ導入方法はこちらの記事で紹介しています。

【初心者向け】Cocoonの導入方法と子テーマの使い方だよ!
高機能無料WordPressテーマ「Cocoon」 3月頃からβ版が公開され、作成者である「わいひら」さんが、利用者の意見を広く取り入れ、先月7月から正式公開となりました。 β版は会員登録をしなければ、ダウンロードできませんでしたが...

実際にカスタマイズされる個所

今回のカスタマイズでアニメーションがつく個所はこちらです。

下からふわっと出てくるようになるので、おしゃれ感が増す気がします。
それではカスタマイズしていきましょう。

コードを公開

カスタマイズを実施する場合は、以下のコードをstyle.cssに追記してください。

.main,.sidebar{
		animation-name:fadein;
    animation-duration: 2s;

}
@keyframes fadein{
from {
    opacity: 0;
    transform: translateY(20px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

コード解説

ほとんど以前記事にした以下の記事と仕組みは同じです。

【WordPress】Cocoonのヘッダーロゴ表示に動きを付けるカスタマイズ
今回は流行のアニメーションのカスタマイズです。 ページが表示された際にロゴが上から出てくるような動きを付けたり、下から上にフェードインで表示されるカスタマイズです。 このようなアニメーションを付けるときは、一昔前までjavascri...

アニメーションを加えたい個所を指定するために名前を付けて、その名前を付けた個所に加えたい変化・アニメーションの数値を入力するというのが大まかな流れです。

ちなみに記事エリアのみフェードイン・サイドバーは固定のままというようにしたい場合は、上記コードで【.sidebar】のclass名を削除して下さい。

まとめ

少しずつカスタマイズしていますが、自分の思い通りのサイトにまでするにはなかなか時間がかかります。
皆さんも少しずつカスタマイズを進めて、自分好みのサイトにカスタマイズしていきましょう~

コピペも良いですが・・・

Cocoonは高機能で人によってはカスタマイズなんて必要ないかもしれませんが、HTMLやCSSの知識あるとないとでは、トラブルがあった時に大きく違ってきます。
コピペも便利ですが、専門の本などを併せて使用すると、理解度がぐっと深まりますよ!

私が使用したおすすめの本はこちらです。

コメント