Twenty Seventeen：タイトルをアニメーションでふわっと表示させる

WordPress公式テーマのTwenty Seventeenカスタマイズです。今回は「タイトルをアニメーションでふわっと表示させる」方法を解説します。

簡単な内容ですが、取り入れるとサイトがちょっとリッチな感じになるのでオススメですよ。

style.cssに追記する

スタイルシートに追記していきますが、もちろん子テーマで作業を行ってください。子テーマをまだ作っていないという方は、以下の記事を参考にTwenty Seventeenの子テーマを作ってから、作業を始めましょう。

関連記事

WordPressの子テーマを超簡単に作る方法

具体的な作業は簡単です。スタイルシート（style.css）に、以下の内容をコピペして追記してください。

/**********************************************/
/* サイトタイトルのアニメーション */
/**********************************************/
.site-branding-text {
    animation: fadeIn 3s ease 0s 1 normal;
    -webkit-animation: fadeIn 3s ease 0s 1 normal;
}
	@keyframes fadeIn {
		0% {opacity: 0}
    	100% {opacity: 1}
	}
	@-webkit-keyframes fadeIn {
    	0% {opacity: 0}
    	100% {opacity: 1}
	}

これでタイトルがふんわり表示されるようになっているはずです。
また、関連する記事として、以前にタイトルやスクロールボタンの位置を変更したり、そのデザインのカスタマイズ方法なども紹介した記事があるので、合わせて参考になさってください。
もちろん、レスポンシブ対応ですよ。

関連記事

Twenty Seventeenのタイトル位置を変更するカスタマイズ

Twenty Seventeen：スクロールしたらナビゲーションメニューに影をつけるカスタマイズ

Twenty Seventeen：ナビゲーションメニューとスクロールボタンのカスタマイズ

以上、簡単でしたが、「Twenty Seventeen：タイトルをアニメーションでふわっと表示させる」でした。