[cocoon]@keyframesとanimationを使って記事タイトルをオシャレにカスタマイズ

記事タイトルをフェードインで表示

WordPressのcocoonのカスタマイズです。

ページが読み込まれたとき、記事タイトルがフェードインで浮かび上がるように表示します。さらに、下から上に動きを付けましょう。

以下のコードを「追加CSS」に記述します。↓

@keyframes fadein {
    0% {
        opacity:0;
	transform:translateY(20px);
    }
    100% {
        opacity:1;
	transform:translateY(0px);
    }
}
.entry-title{
	  animation:fadein 2s;
}

この部分ですね。↓

これでカスタマイズ完了です。この記事のタイトルがそのままデモになっています。

詳細を見ていきましょう。

@keyframesについて

@keyframesはアニメーション開始から終了までをどのように動かすか指定する、CSS文法です。下記の形で使い、プロパティに名前を付けます。↓

@keyframes 名前{

0%{ 0%の時の状態}

100%{100%の時の状態}

}

波カッコで入れ子になります。

名前を付ける

好きな名前を付けましょう。ここではfadeinという名前にします。@keyframes fadein{}となります。

opacity と transform を指定する

こうすれば、文字が浮かび上がります。↓

0%の時　opacity:0;（非表示）→100%の時opacity:1;(表示）

こうすれば、文字が下から上に移動します。↓

0%の時　transform:translateY(20px); →100%の時transform:translateY(0px);

「上から下」に移動させたい場合は、0%の時を-20pxにすればOKです。

マイナス指定だと逆のような気もするのですが、大丈夫です。

左右の移動はtranslateXで指定しましょう。

セレクタにanimationプロパティと値を記述

cocoonでは記事タイトルのセレクタは.entry-titleなので、このような記述になります。↓

.entry-title{
	  animation:fadein 2s;
}

animationプロパティと、先ほど@keyframesに付けた名前のfadeinを記述。「2s」というのは「2秒かけてアニメーションを作動させる」という値です。3秒に指定する場合は「3s」ですね。

ちなみにどの要素にどのセレクタが指定されているか調べるのはGoogle Chromeの画面で右クリック→「検証」で簡単に調べられます。こちらの記事をご参照ください。↓

[cocoon]サイドバーがシンプル過ぎる！という方のためのカスタマイズの方法

サイドバーをいじりましょうcocoonのサイドバーのデフォルトはシンプルなため、もうちょっとエフェクトが欲しい！と思う方もいるかもしれません。カスタマイズありきで作られているのでしょう。ブログカード...

www.take-note.net

2020.05.09

いかがでしたか？ササっとCSSを追加しただけで記事タイトルがオシャレにカスタマイズできました。@keyframesのアニメーションは覚えると色々できて楽しいです。