デザインの変更⑤（トップにCSSで動く七色文字）

アメブロカスタマイズ

自分専用のオリジナルデザインにするための『ステップ⑤』です。
トップページに下記のような動く七色の WELLCOM を表示します。

WELLCOM

カスタマイズ前の準備

この記事を読む前に、こちらの設定をしておいてくださいね。

デザインの変更①（CSS編集用デザインを適用する）

変更に失敗し元に戻したい場合、こちらの記事をご覧ください。

デザインの変更（初期化用CSS）

カスタマイズ手順

『ブログ管理』画面を開きます。
https://blog.ameba.jp/ucs/top.do
『設定・管理』ボタンをクリックします。

https://blog.ameba.jp/ucs/guide.do
『メッセージボード』メニューをクリックします。

https://blog.ameba.jp/ucs/msgboard/srvmsgboardinput.do

『メッセージボード』に下記のコードをコピーして、『公開』をクリックします。

<link href="https://fonts.googleapis.com/css2?family=Aclonica&display=swap" rel="stylesheet">
<div class="wellcom_ani" style="font-family:Aclonica, sans-serif;font-size:36px;text-shadow:4px 5px 6px #333333;text-align:center;animation:pounding 1.0s linear infinite alternate;"><span style="color:#E60012;">W</span><span style="color:#F39800;">E</span><span style="color:#FFF100;">L</span><span style="color:#009944;">L</span><span style="color:#0068B7;">C</span><span style="color:#1D2088;">O</span><span style="color:#920783;">M</span></div>

『デザインの設定』ボタンをクリックします。

https://blog.ameba.jp/ucs/skin/skinselecttop.do
「デザインの変更」の「適用中のデザイン」にある『CSSの編集』をクリックします。

https://blog.ameba.jp/ucs/editcss/srvcssupdateinput.do
「現在使用中のプロぐデザインCSS」をスクロールし、一番最後に下記のコードを
コピーし、『保存』をクリックします。
```
/* オリジナルデザイン
--------------------------------------------*/
/* メッセージボード WELLCOM */
.wellcom_ani {
  font-size:100px !important;
}

/* 拡大縮小アニメーション */
@keyframes pounding {
  0% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(1);
  }
}
```