【はてなブログ】タイトルを『ふんわり』アニメーションで表示する方法【コピペで簡単】

ブログのデザインがほぼほぼ完成しました🙌
スマホで見たときの表示はかなり変えたけど、だいぶ見やすくなったかな？😊

ブログのタイトルをアニメーションでふんわり表示させるようにしてみました。

コピペで簡単に設定できますよ♬

はてなブログCSSの使い方

既にわかる方は次に進んでね！

①	パソコンから、はてなブログのダッシュボードへアクセスする。 (細かい作業になりますがスマホのブラウザをPC設定にすることで、スマホから作業することも可能です。)
②	左側にある【デザイン】ページに移動する。
③	🔧カスタマイズ→{}デザインCSSに、下に記載されているコードを貼り付け→【変更を保存する】ボタンを押して完了です。

不明な点がある場合はヘルプページも一度ご覧下さい。
デザインCSSを記述する - はてなブログ ヘルプ

CSSを編集する前にバックアップを取っておくことをおすすめします！

コピペで使えるCSS

サンプルはわかりやすいように
アニメーションを繰り返すように設定しています。
実際は1回表示されるとそのまま停止します。
(⇧当ブログのタイトルも参考にしてね)

その場でふんわり

サンプルです。
こんな風に表示されます。

/* その場でふんわり */
#blog-title-content{
animation-name:funwari;
animation-duration:1.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes funwari{
from { opacity: 0; }
to { opacity: 1; }
}

上からふんわり

サンプルです。
こんな風に表示されます。

/* 上からふんわり */
#blog-title-content{
animation-name:uekara;
animation-duration:1.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes uekara{
from {
opacity: 0;
transform: translatey(-100px); }
to {
opacity: 1;
transform: translatey(0); }
}

下からふんわり

サンプルです。
こんな風に表示されます。

/* 下からふんわり */
#blog-title-content{
animation-name:shitakara;
animation-duration:1.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes shitakara{
from {
opacity: 0;
transform: translatey(100px); }
to {
opacity: 1;
transform: translatey(0); }
}

右からふんわり

サンプルです。
こんな風に表示されます。

/* 右からふんわり */
#blog-title-content{
animation-name:migikara;
animation-duration:1.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes migikara{
from {
opacity: 0;
transform: translatex(100px); }
to {
opacity: 1;
transform: translatex(0); }
}

左からふんわり

サンプルです。
こんな風に表示されます。

/* 左からふんわり */
#blog-title-content{
animation-name:hidarikara;
animation-duration:1.5s;
animation-fill-mode:forwards;
opacity:0;
animation-iteration-count:infinite;
}

@keyframes hidarikara{
from {
opacity: 0;
transform: translatex(-100px);
}
to {
opacity: 1;
transform: translatex(0); }
}

コード解説と応用

#blog-title-content

はてなブログのタイトル部分を指定しています。
他に適用させたい箇所がありましたらここを変更します。

animation-duration:1.5s;

『1.5秒でアニメーションが完結する』ということです。
素早くしたいなら数字を小さく、ゆっくりにしたいなら数字を大きくしてね。

transform: translatey(100px);
transform: translatex(100px);

アニメーションの開始位置を指定しています。
yで縦軸・xで横軸を選択します。

例	…y(100px)←100ピクセル下の位置から開始。 …x(-100px)←100ピクセル左の位置から開始。

transform: translatey(0);

アニメーションが完結する位置を指定しています。
基本はゼロのままで良いと思います😊

おわりに

タイトルなどにちょこっと使うとアクセントになると思います。
色々な場所にたくさん使うとゴチャつくので注意です😅

ご不明な点はお気軽にコメントください。
素人なので分かる範囲にはなりますが…
一生懸命 回答させてもらいます( ･`ω･´)✊

お読みいただき、ありがとうございます。
それではまたね🧸◌𓈒𓐍