コピペ一発！記事タイトルをフワッと浮かび上がらせるカスタマイズ【WordPress】

人間は止まっているものより、動いているもののほうが目に付きやすい。

そこで、訪問者が記事を開いた時。
記事のタイトルをフワっと浮かび上がらせて表示させる。

すると、訪問者の視線は否が応にも、そこに注目してしまう。

（´・ω・｀）フフ･･･思惑どおり･･･？

おそらく、本記事のタイトルもフワっと浮かび上がっていることと思います。
見逃した方はもう一度、再読み込みを試してみてくださいね。

実は、このアニメーション。
すごく簡単にできるんです。

本記事は、それをご紹介したいと思います。
WordPressで記事タイトルをフワッと浮かび上がらせるカスタマイズです。

CSSの編集画面を開く
CSSを貼り付ける
CSSをカスタマイズするには
まとめ

CSSの編集画面を開く

ＣＳＳをイジりますので、ＣＳＳの編集画面を開きます。

１．WordPressにログインして、管理画面を開きます。

２．［外観］→［テーマの編集］をクリックします。

３．子テーマのスタイルシートを表示しておきます。
※下図は「Cocoon」というテンプレートの場合です。テンプレートによって、表記は微妙に異なります。

「子テーマって何？」と言う方は、下記で解説しております。

WordPressの親テーマと子テーマとは？子テーマの必要性を解説

WordPressのテンプレートは、「親テーマ」と「子テーマ」があります。大抵は、テンプレートの配布サイトで、両方が公開されていることが多いのでないかと思います。例えば、テンプレート「Cocoon」のサイトでは、こんな感じで公開されて...

CSSを貼り付ける

CSSを記述する欄に、以下のCSSを貼り付けます。
※CSSの編集は自己責任でお願いします。編集が不安な方は、編集前の状態をコピペして、どこかに保存してから行ってみてください。

/* フワっと浮かぶタイトル */
@keyframes fadein {
0% {
    opacity: 0;/* 透明 */
    transform: translateY(30px);/* Y軸方向に30px */
}
100% {
    opacity: 1;/* 不透明 */
	transform: translateY(0px);/* Y軸方向に0px */
}
}

h1 {
animation-name: fadein;
animation-duration: 2s;
}

貼り付けた後、［ファイルを更新］をクリックします。
これで完了です。

これで記事を表示すると、タイトルがフワっと浮かび上がります。