fbpx

【動画】最近よくある動くボタンの設置方法を丁寧に説明します!(HTML+CSS)

ウェブサイト制作

最近よくある動くボタンを丁寧に説明します!

こんなボタン↓、最近よくみませんか?
コンバージョン(成果)が上がるボタンってすごくすごく大事なんですよ。
FTP不要で簡単に設置できるので初心者にも分かるように説明していきたいと思います。

スケジュールを確認する

【ワードプレス】動くボタンの作り方手順

①投稿画面で、メディアを追加してボタンを配置します。

②ボタンにリンクをつけます。
(ツールバーの挿入からもリンクを貼ることができます。)

③エディタタブをテキストにして、ボタンのコードを下記のHTMLではさみます。

HTML

<div class=”fluffy”>ボタンのコード</div>

④左サイドバーの外観→カスタマイズ→追加CSSに、下記のコードを入力します。

CSS

.fluffy {
animation: fluffy1 3s ease infinite;
}@keyframes fluffy1 {
0% { transform:translateX(0) }
5% { transform:translateX(0) }
10% { transform:translateX(0) }
20% { transform:translateX(-15px) }
25% { transform:translateX(0) }
30% { transform:translateX(-15px) }
50% { transform:translateX(0) }
100% { transform:translateX(0) }
}

⑤上の公開のボタンを押して、先ほどの投稿画面に戻ります。

動くボタンの設置は以上になります、プレビューして確認しましょう!

とっても簡単に設置できました!

他にもバリエーションを紹介します

縦に動くボタン

縦に動くボタン

CSS

.fluffy-tate {
animation: fluffy2 3s ease infinite;
}@keyframes fluffy2 {
0% { transform:translateY(0) }
5% { transform:translateY(0) }
10% { transform:translateY(0) }
20% { transform:translateY(-15px) }
25% { transform:translateY(0) }
30% { transform:translateY(-15px) }
50% { transform:translateY(0) }
100% { transform:translateY(0) }

}

HTML・CSSについての基本を知りたい方は下記の記事で説明していますので基礎を勉強してくださいね。

【初心者・これだけでOK】HTML・CSSとは?
ワードプレスは簡単と言えど、自分好みのカスタマイズをしたい場合にHTMLとCSSの知識は必要となってきます。 ここでは、最低限これだけ知っておけば問題ないHTMLとCSSの基本を説明したいと思います。 HTMLの基本はこれだけでOK...

 

コメント

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