バビ
ごきげんよう。バビです。
「ブログはオワコン！これからは動画よ！」
みたいな話をよく聞くんですが、うーん、そうですかね？
私は動画コンテンツって、時間を取られるのでほとんど見ないです。
文字&画像コンテンツのほうが短時間でたくさん見ることができますし。
というか、テレビが普及しても漫画も本もなくなってないんですよね。
ただ、これからのサイト（ブログ）にも変化の波は来ていて、今後は動画に近い、動的なコンテンツが求められていくだろうとは思っています。
例えばiPhone12の公式サイトみたいな。
スクロールに合わせてコンテンツが動くのは目を引きます。
さすがにここまでのものをWordPressで作り込むのはかなり大変ですが、多少の動きが欲しいところ。
そこで、ページが表示されたときに最初に目に入るタイトル・アイキャッチまわりをふわっと浮かび上がるようにしてみました。
バビ
このページでも実装されているので、動作を確認したい方は読み込み直してみてください。
例によってSEO対策的には無意味ですが、浮かび上がるまでの間、思わず待ってしまう効果で多少滞在時間が伸びるかもしれません。
知らんけど。
CSS
以下のCSSをコピペして貼り付けるだけです。
だいぶ前に作ったコードなので自分でも内容を忘れてます。
なので、いらない行があるかもです。
/*--------------------------------------
フワっと浮かぶタイトル
--------------------------------------*/
@keyframes fadein {
0% {
opacity: 0;/* 透明 */
transform: translateY(30px);/* Y軸方向に30px */
}
100% {
opacity: 1;/* 不透明 */
transform: translateY(0px);/* Y軸方向に0px */
}}
#entry header{
animation-name: fadein;
animation-duration: 2s;
}外観→テーマの編集→（子テーマの）「style.css」に貼り付けます。
