ブログのデザインがほぼほぼ完成しました🙌
スマホで見たときの表示はかなり変えたけど、だいぶ見やすくなったかな?😊
ブログのタイトルをアニメーションでふんわり表示させるようにしてみました。
コピペで簡単に設定できますよ♬
はてなブログ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);
アニメーションが完結する位置を指定しています。
基本はゼロのままで良いと思います😊
おわりに
タイトルなどにちょこっと使うとアクセントになると思います。
色々な場所にたくさん使うとゴチャつくので注意です😅
ご不明な点はお気軽にコメントください。
素人なので分かる範囲にはなりますが…
一生懸命 回答させてもらいます( ・`ω・´)✊
お読みいただき、ありがとうございます。
それではまたね🧸◌𓈒𓐍