やりたいこと・やってみたこと

やりたいこと:アピールエリアを自作したいです。

自作したいアピールエリアのイメージ

アピールエリアにフルワイドでアニメーションが入った画像を入れたいです。
画像は、無料のイラストを2つ組み合わせたものです。
背景の画像と、食パンの画像をcssで重ねて、食パンの画像がふわふわ動くようにcssで動きをつけています。

ファイルの状態

デスクトップにあるファイルの状態です。
html、css、画像の入ったフォルダに分けています。

やってみたこと

①まず、アピールエリアのコードの場所を探しました。
自分のhtmlファイルと同じコードをこの場所に入れて、子テーマのcss編集画面で該当の画像のcss(背景画像に対するポジションとアニメーションの動き)を追加したら、可能なのではないかと思ったのですが、そもそもアピールエリアのコードをどこから編集できるのか分かりませんでした。

アピールエリアのコードの場所が分からなかったので、投稿ページならできるのか試してみました。
(下の図で固定ページと書いていますが、投稿の間違いです。すいません)

投稿名『テスト』が試した結果です。

ビジュアルエディターで画像を2つ挿入してから、コードエディターにして、自分の作ったhtmlと同じようなコードになるように(画像が1つのブロックに入っていれば、cssで重ねることができるのではないかと考えたため画像のコードの位置が連続になるように)編集してみました。

以下、コードエディターで編集した内容です。

<!– wp:columns –>
<div class=”wp-block-columns”><!– wp:column –>
<div class=”wp-block-column”><!– wp:image {“id”:18,”width”:853,”height”:367,”sizeSlug”:”large”,”linkDestination”:”none”} –>
<figure class=”wp-block-image size-large is-resized”><img src=”https://trotro.site/wp-content/uploads/2021/05/kumo-1-1024×442.jpg” alt=”” class=”wp-image-18″ width=”853″ height=”367″/></figure>画像を並べたほうがいいかと考えたので、ここに赤マーカーの箇所を移動させましたが、保存すると元の状態にもどります。
<!– /wp:image –></div>
<!– /wp:column –>

<!– wp:column –>
<div class=”wp-block-column”><!– wp:image {“id”:19,”sizeSlug”:”large”,”linkDestination”:”none”,”className”:”shokupan”} –>
<figure class=”wp-block-image size-large shokupan“><img src=”https://trotro.site/wp-content/uploads/2021/05/shokupan-1024×1024.png” alt=”” class=”wp-image-19″/></figure>
<!– /wp:image –></div>
<!– /wp:column –></div>
<!– /wp:columns –>

☆後でcssでいじりたい画像に固有の名前を付けたほうがいいかと考え、クラス名に”shokupan”と追記しました。

ビジュアルエディターでは一見、成功したかのように見えましたが、プレビューすると出来ていませんでした。

その後、『外観』⇒『テーマの編集』から子テーマのcssの編集を行いました。
食パンの画像に対する記述を入力しました。

以下、追加したcssのコードですが、そもそも画像のクラスの記述(赤マーカーの部分)がこれでいいのか?というのも自信がありません。

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/*画像を背景に重ねて動きをつける*/
.wp-block-image size-large shokupan
{
width: 30px;
height: 30px;
margin: 50px;
position: absolute;
top: 5%;
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) }
}

よろしくお願いいたします

cocoonを使わせてもらっています。ありがとうございます。

今年に入ってからウェブサイトの勉強を始めて、cocoonを使用して2つサイトを作成しました。
サイドバーのカスタマイズなどはそこそこやっています(子テーマのCSSにコピペしているだけですが)

アピールエリアのカスタマイズで、好きな画像を背景にしてアニメーションを入れることが出来たら楽しいだろうなと思って始めましたが、完全に分からなくなってしまいました。

お教えいただければ嬉しいです。どうぞよろしくお願いいたします。

コメント

タイトルとURLをコピーしました