11月からは、wordpress に入ります。ホームページはそのまま使います。ただし、FC2にログインできなかった方は新たにFC2のサイトを作ってください。面倒だと思う方は、広告が入ったままでも構わないので、そのまま使用しても構いません。これからは、アニメーションなどCSSの利用を考えていきます。よろしくお願いいたします。

サイトを作成

①Yahoo　Yahooのアドレスを持っている方は、セーフティーアドレスを取得することをお勧めします。　
メールの画面で右上設定（歯車マーク）をクリック。開いたら左側の項目にセーフティーアドレスをクリックします。詳しくは下記URLで確認してください。

https://mail.yahoo.co.jp/promo/tour/safetyaddress/

②以前Xフリーで使っていたものはFC2で使えますので、新たにとらなくて良いです。

WordPressでホームページを作成の為のサーバー確保。

＝手順＝

FC2でWordPressを無料登録

FC2新規登録

1. FC2を開く https://web.fc2.com/
2. [新規登録]をクリック
3. メールアドレスと画像認証(6桁の半角数字)を入力し[利用規約に同意しFC2IDへ登録する]をクリック
4. 登録メールアドレスにメールを送信されるので,メール本文に記載しているURLから､手続きを行います

1. FC2(WordPress)を開く https://web.fc2.com/
2. ログインしていない場合は､ログインをクリックし､[登録メールアドレス]と[パスワード]を入力し[ログイン]
3. [FC2ホームページでWordPressを始める]を開くhttps://web.fc2.com/fc2html/wordpress.html
4. [FC2ホームページでWordPress(Ver.6.0)を無料登録(β提供)]をクリック
5. ホームページ管理画面が開きます
6. WordPress利用登録の画面が開きます。
   [WordPress設定] 次の項目を入力し､[WordPressを始める]をクリック
   サイトのタイトル､ユーザー名､パスワード､メールアドレス
7. [WordPressを始める]をクリック
8. [WordPressにログイン]でログイン画面となります

＜記＞
※2.で行う[登録メールアドレス]と[パスワード]が、FC2に入るログインになります。
※６で行うユーザー名とパスワードがダッシュボードログインになります。
忘れないように記録していてください。

要注意：wordpress に登録完了しても、しばらくはダッシュボードログインできません。
焦らず数時間待ちましょう！

アニメーションの　style　です。

<style>
/animation/
.aniback {animation:aniback 1.4s ease backwards;} /後ろから/
@keyframes aniback{0%{ transform:scale(0); opacity:0;} 100%{
transform:scale(1); opacity:1;}}
.aniup {transform-origin:center top; animation:aniup 1s both;}
/上へ/
@keyframes aniup {0%
{transform:translate(0,3em);opacity:0;text-shadow:0 0 0 #0f0;} 50%
{text-shadow:0 0 1.0em #0f0;opacity:0.5;} 100%
{transform:translate(0,0);opacity:1;text-shadow:none;}}
.anidown {transform-origin:center top; animation:anidown 1s both;} /下へ/
@keyframes anidown {0%
{transform:translate(0,-3em);opacity:0;text-shadow:0 0 0 #0f0;} 50%
{text-shadow:0 0 1.0em #0f0;opacity:0.5;} 100%
{transform:translate(0,0);opacity:1;text-shadow:none;}}
.anileft {transform-origin:left center; animation:anileft 1s both;}
/左から/
@keyframes anileft {0%
{transform:translate(-3em,0);opacity:0;text-shadow:0 0 0 #0f0;} 50%
{text-shadow:0 0 1.0em #0f0;opacity:0.5;} 100%
{transform:translate(0,0);opacity:1;text-shadow:none;}}
.aniright {transform-origin:right center; animation:aniright 1s both;}
/右から/
@keyframes aniright {0% {transform:translate(3em,0);opacity:0;
text-shadow:0 0 0 #0f0;} 50% {text-shadow:0 0 1.0em #0f0;
opacity:0.5;}
100% {transform:translate(0,0); opacity:1;text-shadow:none;}} .anirotate
{animation:anirotate 2s;} /1回転/
@keyframes anirotate {0% { transform: rotate(0deg);} 100% { transform:
rotate(360deg);}}
/delay/
.d1 {animation-delay:1s;}
.d2 {animation-delay:2s;}
.d3 {animation-delay:3s;}
.d4 {animation-delay:4s;}
.d5 {animation-delay:5s;}
.d6 {animation-delay:6s;}
.d7 {animation-delay:7s;}
.d8 {animation-delay:8s;}
.d9 {animation-delay:9s;}
.d10{animation-delay:10s;}
.d11{animation-delay:11s;}
.d12{animation-delay:12s;}
.d02 {animation-delay:.2s;}
.d04 {animation-delay:.4s;}
.d06 {animation-delay:.6s;}
.d08 {animation-delay:.8s;}
/animation anilineクラス/
.aniline > a, .aniline > a:visited, .aniline > a:hover, .aniline >
a:active, .aniline2 > a, .aniline2 > a:visited, .aniline2 > a:hover,
.aniline2 >
a:active{-webkit-backface-visibility:hidden;backface-visibility:hidden;position:relative;transition:.24s
all ease;text-decoration:none;color:#57ad68;}
.aniline > a:hover, .aniline2 > a:hover{color:#383838;font-weight:700}
.aniline > a:after{content:””;transition:.24s all
ease;-webkit-backface-visibility:hidden;backface-visibility:hidden;position:absolute;bottom:-.3em;height:16px;height:.35rem;width:0;background:rgba(226,122,114,.69);left:0}
.aniline > a:hover:after, .aniline2 > a:hover:after{width:100%}
.aniline2 > a:after{content:””;transition:.24s all
ease;-webkit-backface-visibility:hidden;backface-visibility:hidden;position:absolute;bottom:0;
height:16px;height:1.0rem;width:0;background:rgba(226,122,114,.69);left:0}
/aホバーの画像アニメーション/
a img.alpha, .alpha a img{ opacity:1.0; filter: alpha(opacity=100);}
a:hover img.alpha, .alpha a:hover img{ opacity:0.6; filter: alpha(opacity=60);}
/tilt/
a img.tilt, .tilt a img{transition: all 0.5s ease;}
a:hover img.tilt, .tilt a:hover img{transform: rotate(5deg);}
/scale/
a img.scale, .scale a img{transition: all 0.5s ease;}
a:hover img.scale, .scale a:hover img{transform: scale(1.1,1.1); opacity:0.6; filter:alpha(opacity=60);}

/text-align/
.textleft {text-align:left;}
.textright {text-align: right;}
.textcenter {text-align: center;}

.wp-block-columns{_border:1px solid red;}
.wp-block-column{margin:.25em 0!important; _border:1px solid aqua;}
</style>