テーマ「Cocoon」を使ってアピールエリアにアニメーションっぽい動きをつけることに成功したので、やり方を紹介します！
（正確に言うと、Cocoonのアピールエリアにあたる場所＝サイトのトップページのページ上部です。）
成功した最終形をこの食パン手帖のトップページに載せているのですが、ここに至るまでにはかなり試行錯誤がありました。
あれこれやって、Cocoonのフォーラムでも色々教えてもらって、最終的になんとか成功しました。
同じことをやってみたい方に、やり方を紹介します！
難しそうやなー
大丈夫、一緒にやってみましょう。
１．まず、使いたいイラストを用意して、ワードプレスのメディアにアップロードしておきます。
（今回は背景の空のイラストと、食パンのイラストの２つね）
この時に、この２つのイラスト画像のURLをコピペしてメモっておきます。
ワードプレスにアップロードした画像のURLの確認方法
２．次に、Cocoonのダッシュボードから、「外観」→「ウィジェット」→「カスタムHTML」を選択し、コンテンツ上部に挿入します。
その後に右側にある「コンテンツ上部」を選択し、下三角▼をクリックするとカスタムHTMLのエリアが表示されるので、ここにHTMLを入力します。
ちなみに食パンのサイトではこのようにHTMLを記述しています。
<figure class=”sky-and-cloud”>
<img src=”https://shokupan-k.com/wp-content/uploads/2021/05/cropped-shokupan.png” alt=”” ></figure>
</div>
赤マーカーの部分は、ふわふわさせる食パンのイラストの部分です。手順１でアップロードしたイラストのURLをメモっていたと思うので、それを張り付けてください。
次にCSSを記述します。
ダッシュボードの「外観」→「テーマエディター」でCocoonChildになっていることを確認し、CSSの記述を入力します。
CSSの記述は以下のとおりです。
#content-top {/*上方向の隙間を無くす*/
margin: 0;
}
#content-top-in {/*画面幅いっぱいに広げる*/
width: auto;
}
.anime-box {
height: 25vw;
background-image: url(https://shokupan-k.com/wp-content/uploads/2021/06/kumo-3.jpg);
background-position: top center;
background-size: cover;
position: relative;
}
/*画像を背景に重ねて動きをつける*/
.sky-and-cloud {
width: 150px;
height: 150px;
position: absolute;
top: 50%;
left: 20%;
animation: shokupan 4s ease infinite;
}
/*アニメーションの動き*/
@keyframes shokupan {
0% { transform:translateY(0) }
5% { transform:translateY(-10px) }
10% { transform:translateY(-15px) }
15% { transform:translateY(-20px) }
20% { transform:translateY(-30px) }
25% { transform:translateY(-35px) }
30% { transform:translateY(-40px) }
35% { transform:translateY(-45px) }
40% { transform:translateY(-50px) }
45% { transform:translateY(-45px) }
50% { transform:translateY(-40px) }
60% { transform:translateY(-35px) }
70% { transform:translateY(-30px) }
80% { transform:translateY(-20px) }
90% { transform:translateY(-15px) }
100% { transform:translateY(-0px) }
}
CSSの黄色いマーカーの部分は、背景（私の場合は空）のイラストです。これも手順１でアップロードした背景イラストのURLに変えてください。
どうですか？これでイラストが２つ重なって、ふわふわしたアニメーションの動きを付けることができたと思います。
もし、前面にあるイラスト（ここではふわふわ動いている食パンのイラスト）の位置を変えたければ、緑色の文字になっている部分を変えたら位置が変わります。
left: 20%; ← 左端からの間隔
どの手順も、「変更を保存」や「完了」といった保存のボタンを押すことを忘れないでね！
トップページに動きが付くと結構楽しいです。良かったらやってみてください。
