【THE SONIC】ふわっと浮かび上がるタイトルにするカスタマイズ

バビ
バビ

ごきげんよう。バビです。

このページにも導入している、ページが表示されたときに最初に目に入るタイトル・アイキャッチまわりをふわっと浮かび上がるようにするカスタマイズのTHE SONICバージョンです。

動作を確認したい方は私のメインブログ「バビ論」の記事を開いてみてください。

例によってSEO対策的には無意味ですが、浮かび上がるまでの間、思わず待ってしまう効果で多少滞在時間が伸びるかもしれないと思ってます。

CSS

以下のCSSをコピペして貼り付けるだけです。

だいぶ前に作ったコードなので自分でも内容を忘れてます。

なので、いらない行があるかもです。

/*--------------------------------------
  フワっと浮かぶタイトル
--------------------------------------*/
@keyframes fadein {
0% {
opacity: 0;/* 透明 */
transform: translateY(30px);/* Y軸方向に30px */
}
100% {
opacity: 1;/* 不透明 */
transform: translateY(0px);/* Y軸方向に0px */
}
}
.entry-header,.pickup,.top-fuku{
animation-name: fadein;
animation-duration: 2s;
}

外観→テーマの編集(子テーマの)「style.css」に貼り付けます。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です