１. ステップ７～Web Fonts with CSS編その４
Font Awesome Animation 前半でアイコンアニメーションのほとんどが、transform プロパティの translate 関数と rotate 関数で占められていることがわかったかと思います。これら移動と回転に加えて、scale 関数と skew 関数でアイコンを拡大縮小・変形することで、動きの表現は十分できるでしょう。これに、アイコンの色を変えるだとか、影を付けるだとか、点滅させるだとか、スタイリングの変化もキーフレームに加えることでさらに表現は豊かになります。
２．Font Awesome Animation 後半
2-8. faa-float クラス
faa-float クラスは、 faa-vertical クラスや faa-bound クラスと同じく transform プロパティの translate 関数で上下移動します。faa-float クラスは上に移動した時間と同じ時間で元の場所に戻ってきます。animation-duration プロパティで時間を長めにして、浮いてる感を出すのでしょうかね。
<i class="fa-3x fas fa-ship faa-float animated"></i>
/* faa-float クラスの原型 */
.faa-float.animated,
.faa-float.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-float {
animation: float 2s linear infinite;
}
@keyframes float {
0% {transform: translateY(0);}
50% {transform: translateY(-6px);}
100% {transform: translateY(0);}
}
下の例は、text-shadow プロパティと border-shadow プロパティを使って、万歳してるアイコンをオーラみたいなの？で覆ってみました。空中浮遊をする超能力者は、浮遊中はオーラを発散するらしいので…。私はオーラを見たことはありません。あ、空中浮遊する人も見たことはありません。できる人、います？
<i class="fas fa-child faa-float animated"></i>
.faa-float {
font-size: 3em;
color: gray;
background-color: #fff;
border-radius: 50%;
}
.faa-float.animated {
animation: kfs38ar-float 40s linear infinite;
}
@keyframes kfs38ar-float {
0%, 10%{transform: translateY(0.5em);}
41%, 59% {transform: translateY(-0.5em);}
44%,50%, 56% {transform: translateY(-0.4em);}
47%, 53% {transform: translateY(-0.5em);}
90%, 100% {transform: translateY(0.5em);}
0%, 15%{
color: gray;
text-shadow: 0 0 0.0em #fff;
background-color: #fff;
box-shadow: 0px 0px 0.2em 0.2em rgba(255,0,0,0.0);
}
41%, 59% {
color: lightgray;
text-shadow: 0 0 0.5em rgba(255,0,0,1.0);
background-color: rgba(255,0,0,0.2);
box-shadow: 0px 0px 0.6em 0.6em rgba(255,0,0,0.2);
}
44%{
color: blue;
text-shadow: 0 0 0.5em rgba(0,255,0,1.0);
background-color: rgba(0,255,0,0.2);
box-shadow: 0px 0px 0.6em 0.6em rgba(0,255,0,0.2);
}
47% {
color: lightgray;
text-shadow: 0 0 0.5em rgba(255,255,128,1.0);
background-color: rgba(255,255,128,0.2);
box-shadow: 0px 0px 0.6em 0.6em rgba(255,255,128,0.2);
}
50% {
color: blue;
text-shadow: 0 0 0.5em rgba(128,255,128,1.0);
background-color: rgba(128,255,128,0.2);
box-shadow: 0px 0px 0.6em 0.6em rgba(128,255,128,0.2);
}
53% {
color: lightgray;
text-shadow: 0 0 0.5em rgba(0,0,255,1.0);
background-color: rgba(0,0,255,0.2);
box-shadow: 0px 0px 0.6em 0.6em rgba(0,0,255,0.2);
}
85%, 100% {
color: gray;
text-shadow: 0 0 0.0em #fff;
background-color: #fff;
box-shadow: 0px 0px 0.2em 0.2em rgba(255,0,0,0.0);
}
}
2-9. faa-pulse クラス
faa-pulse クラスは、transform プロパティの scale 関数によって アイコンの拡大縮小を行います。0%キーフレームと 100%キーフレームに同じものを用意するこで、繰り返しの時につながりのあるアニメーションを作っています。
<i class="fa-3x fas fa-heart faa-pulse animated"></i>
/* faa-pulse クラスの原型 */
.faa-pulse.animated,
.faa-pulse.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-pulse {
animation: pulse 2s linear infinite;
}
@keyframes pulse {
0% {transform: scale(1.1);}
50% {transform: scale(0.8);}
100% {transform: scale(1.1);}
}
次の例は、transform プロパティの rotate 関数で回転を加えてみました。
<i class="fas fa-trophy faa-pulse animated"></i>
.faa-pulse {
font-size: 2em;
color: #e9bc00;
}
.faa-pulse.animated {
animation: kfs39ar-pulse 10s linear infinite;
}
@keyframes kfs39ar-pulse {
0% {transform: scale(1.1);}
10% {transform: scale(0.8);}
20% {transform: scale(1.4);}
30% {transform: scale(1.1);}
40% {transform: scale(1.7);}
50% {transform: scale(1.4) rotate(-15deg);}
60% {transform: scale(2.0) rotate(15deg);}
70% {transform: scale(2.8) rotate(0deg);}
80% {transform: scale(2.0) rotate(-30deg);}
90% {transform: scale(3.8) rotate(0deg);}
100% {transform: scale(1.1) rotate(0deg);}
}
2-10. faa-shake クラス
fa-shake クラスで使われているのは、transform プロパティの rotate 関数です。時計回りの回転と反時計回りの回転を交互に繰り返しています。transform-orgin プロパティの値の指定がない fa-wrench クラスと同じ動きです。キーフレームは fa-wrench クラスのものがそのまま使われています。
<i class="fa-3x fas fa-heart faa-shake animated"></i>
/* faa-shake クラスの原型 */
.faa-shake.animated,
.faa-shake.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-shake {
animation: wrench 2.5s ease infinite;
}
@keyframes wrench {
0% {transform: rotate(-12deg);}
8% {transform: rotate(12deg);}
10% {transform: rotate(24deg);}
18% {transform: rotate(-24deg);}
20% {transform: rotate(-24deg);}
28% {transform: rotate(24deg);}
30% {transform: rotate(24deg);}
38% {transform: rotate(-24deg);}
40% {transform: rotate(-24deg);}
48% {transform: rotate(24deg);}
50% {transform: rotate(24deg);}
58% {transform: rotate(-24deg);}
60% {transform: rotate(-24deg);}
68% {transform: rotate(24deg);}
75%, 100% {transform: rotate(0deg);}
}
下の例は、アイコン８個を並べてみました。それぞれに 遅延（animation-delay）にマイナス値を指定して少しずつタイミングをずらしています。プラス値だとアニメーションが始まる時間にズレが生じますが、マイナス値指定だとアニメーションが一斉に始まります。
<i class="faa-shake ani delay01 fas fa-beer"></i>
<i class="faa-shake ani delay02 fas fa-cocktail"></i>
<i class="faa-shake ani delay03 fas fa-glass-cheers"></i>
<i class="faa-shake ani delay04 fas fa-glass-martini-alt"></i>
<i class="faa-shake ani delay05 fas fa-glass-whiskey"></i>
<i class="faa-shake ani delay06 fas fa-wine-bottle"></i>
<i class="faa-shake ani delay07 fas fa-wine-glass-alt"></i>
<i class="faa-shake ani delay08 fas fa-ice-cream"></i>
.faa-shake {
font-size: 2em;
}
.faa-shake.ani{animation: wrench 2.4s infinite;}
.faa-shake.ani.delay01{animation-delay: -2.4s;}
.faa-shake.ani.delay02{animation-delay: -2.1s;}
.faa-shake.ani.delay03{animation-delay: -1.8s;}
.faa-shake.ani.delay04{animation-delay: -1.5s;}
.faa-shake.ani.delay05{animation-delay: -1.2s;}
.faa-shake.ani.delay06{animation-delay: -0.9s;}
.faa-shake.ani.delay07{animation-delay: -0.6s;}
.faa-shake.ani.delay08{animation-delay: -0.3s;}
@keyframes kfs3aar-wrench {
0% {
transform: rotate(-12deg);
color:#7f7fff;
}
8% {
transform: rotate(12deg);
color:#bf7fff;
}
10% {
transform: rotate(24deg);
color:#ff7fff;
}
18% {
transform: rotate(-24deg);
color:#ff7fbf;
}
20% {
transform: rotate(-24deg);
color:#ff7f7f;
}
28% {
transform: rotate(24deg);
color:#ff7f7f;
}
30% {
transform: rotate(24deg);
color:#ffbf7f;
}
38% {
transform: rotate(-24deg);
color:#ffbf7f;
}
40% {
transform: rotate(-24deg);
color:#bfff7f;
}
48% {
transform: rotate(24deg);
color:#bfff7f;
}
50% {
transform: rotate(24deg);
color:#7fff7f;
}
58% {
transform: rotate(-24deg);
color:#7fffbf;
}
60% {
transform: rotate(-24deg);
color:#7fffff;
}
68% {
transform: rotate(24deg);
color:#7fbfff;
}
75%, 100% {
transform: rotate(0deg);
color:#7f7fff;
}
}
2-11. faa-tada クラス
faa-tada クラスは transform プロパティの scale 関数で拡大縮小をして、同時に rotate 関数で回転を加えています。おもしろい動きをしてますね。transform プロパティに複数の関数を指定する場合は、１つの transform プロパティに複数の関数を指定します。複数の transform プロパティに分けて書くと最後に指定した transform プロパティの値だけが反映されます。
<i class="fa-lg fab fa-angellist faa-tada animated"></i>
/* faa-tada クラスの原型 */
.faa-tada.animated,
.faa-tada.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-tada {
animation: tada 2s linear infinite;
}
@keyframes tada {
0% {transform: scale(1);}
10%, 20% {transform: scale(.9) rotate(-8deg);}
30%, 50%, 70% {transform: scale(1.3) rotate(8deg);}
40%, 60% {transform: scale(1.3) rotate(-8deg);}
80%, 100% {transform: scale(1) rotate(0);}
}
さて、ピースアイコンの脇に女の子の画像を置きました。やりたいことはピースアイコンを女の子の手に見えるように位置関係を調整したいわけです。
<i class="faa-tada animated fab fa-angellist"></i>
<img src="sobokona26.gif" alt="">
.faa-tada {
color: #daa520;
}
.faa-tada.animated {
animation: tada 2s linear infinite;
}
faa-tada クラスに position: relative を指定し、ピースアイコンのクラス fa-angellist の疑似要素 before に position: absolute を指定して、top と left でピースアイコンの位置を調整します。
<i class="faa-tada animated fab fa-angellist"></i>
<img src="sobokona26.gif" alt="">
.fa-angellist::before{
position: absolute;
top: -1.0em;
left: 0.3em;
}
.faa-tada {
position: relative;
color: #daa520;
}
.faa-tada.animated {
animation: tada 2s linear infinite;
}
女の子の画像も動かしたいので、faa-tada クラスに display: inline-block; を指定して画像が動くようにして、親のHTML要素に、faa-tada.animated クラスを追加するとアイコンと画像が両方とも動くようになります。
<span class="faa-tada animated">
<i class="faa-tada animated fab fa-angellist"></i>
<img src="sobokona26.gif" alt="">
</span>
.fa-angellist::before{
position: absolute;
top: -1.0em;
left: 0.3em;
}
.faa-tada {
position: relative;
display: inline-block;
color: #daa520;
}
.faa-tada.animated {
animation: tada 2s linear infinite;
}
女の子の左手も追加しましょう。疑似要素の before は右手の設定で使われているので after に左手の設定をします。Font Awesome 公式で fa-angellist アイコンのユニコードを調べて、content プロパティで指定します。 transform プロパティの scale 関数で左右反転させて右手アイコンを左手アイコンにして、後は top と left で位置調整します。
<span class="faa-tada animated">
<i class="faa-tada animated fab fa-angellist"></i>
<img src="sobokona26.gif">
</span>
.fa-angellist::before{
position: absolute;
top: -1.0em;
left: 0.3em;
}
.fa-angellist::after{
position: absolute;
content: "\f209";
transform: scale(-1,1);
top: -1.0em;
left: 1.8em;
}
.faa-tada {
position: relative;
display: inline-block;
color: #daa520;
}
.faa-tada.animated {
animation: tada 2s linear infinite;
}
2-12. faa-passing クラス
faa-passing クラスは、transform プロパティの traslateX 関数で右に移動を行っています。translateX( x ) 関数は、translate( x , y ) の y = 0 のときと同じ値になります。opacity プロパティで不透明度を 0% と100%キーフレームでゼロにして、アニメーションが突然に消えたり現れたりする不自然な途切れ方を避けています。
<i class="fa-3x fas fa-dragon faa-passing animated"></i>
/* faa-passing クラスの原型 */
.faa-passing.animated,
.faa-passing.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-passing {
animation: passing 2s linear infinite;
}
@keyframes passing {
0% {
transform: translateX(-50%);
opacity: 0;
}
50% {
transform: translateX(0%);
opacity: 1;
}
100% {
transform: translateX(50%);
opacity: 0;
}
}
HTML は上下に比べて左右の幅は広げやすいですよね。左右に幅を大きく広げて、2台の車アイコンを競走させてみました。下の車は途中から本気を出させました。
<i class="fas fa-car-side faa-passing animated"></i>
.faa-passing {
font-size: 3em;
color: #b94047;
}
.faa-passing.animated {
animation: passing 10s linear infinite;
}
@keyframes passing {
0% {
transform: translateX(-50%);
opacity: 0.4;
}
50% {
transform: translateX(300%);
opacity: 1;
}
100% {
transform: translateX(700%);
opacity: 0.2;
}
}
<i class="fas fa-car-side faa-passing animated"></i>
.faa-passing {
font-size: 3em;
color: #0095d9;
border-radius: 0 50% 50% 0;
}
.faa-passing.animated {
animation: passing 10s linear infinite;
}
@keyframes passing {
0% {
transform: translateX(-50%);
opacity: 1;
}
75% {
transform: translateX(300%);
opacity: 1;
background-color: rgba(200,200,200,0);
box-shadow: 0 0 0 0 rgba(200,200,200,0);
}
95% {
transform: translateX(700%);
opacity: 0.8;
background-color: rgba(200,200,200,0.5);
box-shadow: 0 0 .4em .3em rgba(200,200,200,0.5);
}
100% {
transform: translateX(700%);
opacity: 0;
}
}
2-13. faa-passing-reverse クラス
faa-passing-reverse クラスは、transform プロパティの translateX で左方向に移動させています。faa-passing クラスの translateX の数値に -1 をかけて左右反転させただけです。
<i class="fa-3x fas fa-swimmer faa-passing-reverse animated"></i>
/* faa-passing-reverse クラスの原型 */
.faa-passing-reverse.animated,
.faa-passing-reverse.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-passing-reverse {
animation: passing-reverse 2s linear infinite;
}
@keyframes passing-reverse {
0% {
transform: translateX(50%);
opacity: 0;
}
50% {
transform: translateX(0%);
opacity: 1;
}
100% {
transform: translateX(-50%);
opacity: 0;
}
}
Font Awesome のアイコンは右向きが多く左向きは少ないのでが、transform プロパティの scale 関数でアイコンの左右を反転してやれば、行ったり来たりの連続動作をつくることができます。
<i class="fas fa-running faa-passing-reverse animated"></i>
.faa-passing-reverse {
font-size: 3em;
color: #f39800;
}
.faa-passing-reverse.animated {
animation: passing-reverse 6s linear infinite;
}
@keyframes passing-reverse {
0% {transform: translateX(250%) scaleX(-1);}
40% {transform: translateX(0%) scaleX(-1);}
50% {transform: translateX(0%) scaleX(1);}
90% {transform: translateX(250%) scaleX(1);}
100% {transform: translateX(250%) scaleX(-1);}
}
2-14. faa-burst クラス
faa-burst クラスは、transform プロパティの scale 関数でアイコンを拡大し、同時に opacity プロパティで不透明度をゼロにしています。
<i class="fa-3x fas fa-bomb faa-burst animated"></i>
/* faa-falling クラスの原型 */
.faa-burst.animated,
.faa-burst.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-burst {
animation: burst 2s infinite linear;
}
@keyframes burst {
0% {opacity: .6;}
50% {
transform: scale(1.8);
opacity: 0;
}
100% {opacity: 0;}
}
Font Awesome Animation は、アイコンだけでなく文字へも適用できます。ただし、transform プロパティを使用している場合は、display: inline-block; でインラインブロック指定を忘れないでください。
<span class="faa-burst ani color1">S</span>
<span class="faa-burst ani color2">O</span>
<span class="faa-burst ani color3">B</span>
<span class="faa-burst ani color4">O</span>
<span class="faa-burst ani color5">K</span>
<span class="faa-burst ani color6">O</span>
<span class="faa-burst ani color7">N</span>
<span class="faa-burst ani color8">A</span>
.faa-burst{
font-size: 3em;
display: inline-block;
}
.faa-burst.ani {
animation: burst 6s infinite linear;
}
.faa-burst.color1{ color: #5FD3BC;}
.faa-burst.color2{ color: #D42AFF;}
.faa-burst.color3{ color: #0000FF;}
.faa-burst.color4{ color: #87DEAA;}
.faa-burst.color5{ color: #FFE676;}
.faa-burst.color6{ color: #FF0000;}
.faa-burst.color7{ color: #00FFFF;}
.faa-burst.color8{ color: #FF55DD;}
@keyframes burst {
0% {opacity: .8;}
40% { opacity: 1.0; }
50% {
transform: scale(1.5);
opacity: 0.6;
}
90%, 100% {
transform: scale(2.0);
opacity: 0;
}
}
2-15. faa-falling クラス
faa-falling クラスは、transform プロパティの translateY 関数で下に移動します。translateY( y ) は translate( x , y ) で x = 0 のときと同じ値になります。opacity プロパティでアニメーションの始まりと終わりの不透明度をゼロにしています。
<i class="fa-3x fas fa-snowboarding faa-falling animated"></i>
/* faa-falling クラスの原型 */
.faa-falling.animated,
.faa-falling.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-falling {
animation: falling 2s linear infinite;
}
@keyframes falling {
0% {
transform: translateY(-50%);
opacity: 0;
}
50% {
transform: translateY(0%);
opacity: 1;
}
100% {
transform: translateY(50%);
opacity: 0;
}
}
次の例は、translate 関数の y 成分で下に移動させ、x 成分で左右に散らし、rotate 関数で少しだけ時計回り・反時計の回転をを加えて、ぱっぱアイコンが落ちる様子を表現してみました。
<i class="fas fa-leaf faa-falling animated"></i>
.faa-falling {
color: #c89932;
font-size: 2em;
}
.faa-falling.animated {
animation: falling 4s linear infinite;
}
@keyframes falling {
0% {transform: translateX(-30%) translateY(-50%) rotate(30deg);}
25% {transform: translateX(30%) translateY(-25%) rotate(55deg);}
50% {transform: translateX(-30%) translateY(0%) rotate(30deg);}
75% {transform: translateX(30%) translateY(25%) rotate(55deg);}
100% {transform: translateX(-30%) translateY(50%) rotate(30deg);}
0% {opacity: 0;}
25% {opacity: 1;}
50% {opacity: 1;}
75% {opacity: 1;}
100% {opacity: 0;}
}
2-16. faa-rising クラス
faa-rising クラスは、transform プロパティの translateY 関数で上に移動します。faa-falling クラスの translateY( y ) を translateY( -y ) に置き換えただけですね。 opacity プロパティで 0%キーフレームと 100%キーフレームの不透明度をゼロにしています。
<i class="fa-3x fas fa-sun faa-rising animated"></i>
/* faa-rising クラスの原型 */
.faa-rising.animated,
.faa-rising.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-rising {
animation: rising 2s linear infinite;
}
@keyframes rising {
0% {
transform: translateY(50%);
opacity: 0;
}
50% {
transform: translateY(0%);
opacity: 1;
}
100% {
transform: translateY(-50%);
opacity: 0;
}
}
Font Awesome Animation の複数の アニメーション用クラスを１つのアイコンに同時に使用する場合は入れ子にするだけでＯＫです。または、１つの @keyframes にまとめて動かすこともできます。どちらの方法が良いかはその時々によります。例えば、複数のクラスの所要時間（ animation-duration ）が違う場合などは入れ子のほうが楽です。
<span class="faa-rising animated">
<i class="fas fa-sun faa-spin animated"></i>
</span>
.faa-rising {
display: inline-block;
}
.faa-rising.animated {
animation: kfs3gar-rising 2s linear infinite;
}
@keyframes rising {
0% {
transform: translateY(50%);
opacity: 0;
}
50% {
transform: translateY(0%);
opacity: 1;
}
100% {
transform: translateY(-50%);
opacity: 0;
}
}
.faa-spin {
color: #ec6d51;
font-size: 3em;
}
.faa-spin.animated {
animation: spin 1.5s ease infinite;
}
@keyframes spin {
0% {transform: rotate(0deg);}
100% {transform: rotate(359deg);}
}
すでにキーフレームにプロパティを色々追加することはやきましたが、最後に上へ移動する faa-rising クラスと右へ移動する faa-passing クラスを合体させ、１つの @keyframes を作りましょう。当然ですが、右斜め上に移動するクラスができあがります。
<i class="fas fa-rocket faa-passing-rising animated"></i>
.faa-passing-rising {
color: #afafb0;
text-shadow: 0.03em 0.03em 0.03em #9ea1a3;
font-size: 2em;
}
.faa-passing-rising.animated {
animation: kfs3gbr-passing-rising 2s linear infinite;
}
@keyframes kfs3gbr-passing-rising {
0% {
transform: translateX(-50%) translateY(50%);
opacity: 0;
}
50% {
transform: translateX(0%) translateY(0%);
opacity: 1;
}
100% {
transform: translateX(50%) translateY(-50%);
opacity: 0;
}
}
３．tranform プロパティの matrix 関数
Font Awesome Animation では、tranform プロパティの matrix 関数が使われていませんが、慣れるとラクなのでここで紹介しておきます。他の関数と同様に、matrix 関数は次の形で使われます。
transform : matrix( a, b, c, d, e, f ) ;
引数の a, b, c, d, e, f は
transform : matrix( scaleX , skewX , skewY , scaleY , translateX, translateY ) ;
なので、すでに当ステップ７、ステップ６で扱った関数ばかりです。
<i class="color1 fas fa-cat faa-matrix animated"></i>
<i class="color2 fas fa-hippo faa-matrix animated"></i>
<i class="color3 fas fa-dog faa-matrix animated"></i>
<i class="color4 fas fa-horse faa-matrix animated"></i>
.color1{color: #00608d;}
.color2{color: #9999cc;}
.color3{color: #e29676;}
.color4{color: #a50082;}
.faa-matrix {
font-size: 2em;
}
.faa-matrix.animated {
animation: kfs-matrix 5s ease infinite;
}
@keyframes kfs-matrix {
0% {transform: matrix(1.1,0.5,-0.4,0.8,0,0);}
10%{transform: matrix(1,0,0,1,20,0);}
20%{transform: matrix(1.2,-0.4,0.7,0.8,40,-10);}
30%{transform: matrix(1,0,0,1,60,0);}
40%{transform: matrix(1.1,0.5,-0.4,0.8,80,0);}
50%{transform: matrix(1.0,0,0,0.8,100,0);}
60%{transform: matrix(1.2,-0.4,0.7,0.8,120,-10);}
70%{transform: matrix(1,0,0,1,140,0);}
80%{transform: matrix(1.1,0.5,-0.4,0.8,160,0);}
90%{transform: matrix(1,0,0,1,180,0);}
to {transform: matrix(1.2,-0.4,0.7,0.8,200,-10);}
80%{opacity: 0.6;}
to {opacity: 0;}
}
SVG画像の中身でもよく見かけるマトリックスですね。詳しくはアフィン変換を調べてみてください。
４．Font Awesome Animation の著作権について
Font Awesome のライセンスについては「私が Font Awesome 様だ！」と名乗る以外は、改造・再配布・商用等、なんでもOKですが、Font Awesome Animation の使用については注意が必要です。Font Awesome Animation には、MITライセンスが適用されます。MITライセンスは、Font Awesome 同様なんでもOKのゆるゆるライセンスなのですが、義務が１つあります。それは MITライセンスを使っていることを明示すること。では、具体的に何をすればよいかですが、以下の文をスタイルシートの一番上に書けばよいだけです。sobokona と URL の部分は、自分のに変えて下さいね。
/*
*Copyright (c) 2020 sobokona http://sobokona.net
*Released under the MIT license
*http://opensource.org/licenses/mit-license.php
*/
コメント