모두 주목! 눈에 띄는 버튼 애니메이션 비법 공개(feat. 워드프레스)

サイトの第一印象はユーザーに大きな影響を与えます。特に、目立つボタンのアニメーションはそれだけで注目され、それによって訪問者は好奇心でそのボタンをクリックしてしまうかもしれません。

ところで、ボタンを目立たせるためには、どのようにする必要がありますか？今日は WordPress デザインの観点から 斜めに光が通過するアニメーション効果をボタンに適用してユーザーの目を引く方法を紹介します。

このポストを通じて、皆さんはWordPressで使うボタンに命を吹き込む方法を学びます。HTMLとCSS、そしてJavaScriptを使って初心者でも簡単に輝くボタンを作ることができるように詳しく説明しますので、ぜひ最後まで読んでみてください！

本ポストの内容は WordPress 本文に適用するコードを紹介したもので、関連スキルが不足している方は注意してください。既存に作成したポストの削除、変更などのリスクを考慮して、そのポストをコピーして一時保存の状態で置いてみることをお勧めします。

お忙しい方のために要約します。2番のソースコードを'追加CSS'に貼り付けて、好きな本文の位置に'ユーザーhtml'を挿入して1番と3番のソースコードを続けて貼り付けます。(以下では'ユーザーhtml'ではなく、コードエディタでする方法を説明します)。

ボタンアニメーションを適用する3ステップ

1.ボタン作り

まず、 WordPress 本文にボタンを追加します。

右上の点3つのボタンを押して コードエディタに入ると、HTMLモードに切り替わります(Ctrl + Shift + Alt + Mショートカットをご利用ください)

ここで下のコードをコピーして好きな位置に貼り付けます。

<a href="https://example.com" class="shining-button">クリックしてください</a>

このコードは「クリックしてください」というテキストが入ったシンプルなボタンを作成します。クリックするとexample.comに移動するようになっています。

"もっと詳しく見る"など、ボタンのテキスト内容はお好きなものに、リンクアドレスもお好きなものに変更してください。

2.CSSスタイルの適用

それでは、ボタンのスタイルとアニメーションを追加してみましょう。

WordPressのカスタムCSSエディタ（ルックス>ユーザー定義>追加CSS）に、以下のCSSコードを追加します。

好みに応じて色を変更してお使いください。（現在：通常-オレンジ、ボタンオン-青）色の部分において情報は好きな色を見つける」技術-画像からの色抽出から調和のとれたカラーマッチングまでポストで確認してみてください。

.shining-button {
    position: relative；
    display: inline-block；
    パディング：10px 20px；
    font-size: 16px；
    color: #fff；
    background-color: #ff9800; /*オレンジ色 */ /* orange
    border: none；
    border-radius: 5px；
    overflow: hidden；
    cursor: ポインタ；
    text-decoration: none；

    transition: background-color .3s；
}
.shining-button::before {
    content: ''；
    position: absolute；
    top: 0；
    left：-200%；
    width: 200%；
    height: 100%；
    transform: skewX(-45deg)；
    background: linear-gradient(135deg, transparent 75%, rgba(255,255,255,255,.5) 75%, rgba(255,255,255,255,.5) 80%, transparent 80%)；
    transition: left 1s, opacity 1s；
    不透明度: 0；
}
.shining-button:hover { background-color: #0073aa; }
.shining-button.shine::before {
    left: 100%；
    opacity: 1；
}

このCSSコードは、ボタンにデフォルトのスタイルを設定し、マウスを上げたときに、背景色がオレンジ色から青色に変更され、斜めの光のアニメーション効果が表示されます。

3.JavaScriptでアニメーションを繰り返す

アニメーションが周期的に繰り返されるようにするには、JavaScriptを使用します。コードエディタのHTMLモードで下記のコードを上記の1番コードの下に追加してください。

<script>
document.addEventListener('DOMContentLoaded', () => {
    const button = document.querySelector('.shining-button');
    setInterval(() => {
        button.classList.toggle('shine');
    }, 1500); 
});
</script>

このスクリプトは、ページがロードされた後、ボタンに対して周期的に 輝き クラスを追加・削除してアニメーションを繰り返します。

setInterval 関数を使用して1.5秒(1500)ごとにアニメーションを繰り返すように設定しました。

オンライン適用前にローカルでテストしてみる

ボタン効果を WordPressに適用する前に、まず、ローカル（マイコンピュータ）でテストしてみることをお勧めします。

ポストのデザインと自分の希望する形が合うかどうかを事前に確認するためです。以下の手順に従って進めてみてください。

HTMLファイル（完全な形式）

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shining Button Test</title>
    <style>
        .shining-button {
            position: relative;
            display: inline-block;
            padding: 10px 20px;
            font-size: 16px;
            color: #fff;
            background-color: #ff9800; /* 오렌지색 */
            border: none;
            border-radius: 5px;
            overflow: hidden;
            cursor: pointer;
            text-decoration: none;
            transition: background-color .3s;
        }
        .shining-button::before {
            content: '';
            position: absolute;
            top: 0;
            left: -200%; 
            width: 200%;
            height: 100%;
            transform: skewX(-45deg);
            background: linear-gradient(135deg, transparent 75%, rgba(255,255,255,.5) 75%, rgba(255,255,255,.5) 80%, transparent 80%);
            transition: left 1s, opacity 1s;
            opacity: 0;
        }
        .shining-button:hover { background-color: #0073aa; }
        .shining-button.shine::before { 
            left: 100%; 
            opacity: 1;
        }
    </style>
</head>
<body>
    <a href="https://example.com" class="shining-button">クリックしてください</a>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const button = document.querySelector('.shining-button');
            setInterval(() => {
                button.classList.toggle('shine');
            }, 1500); 
        });
    </script>
</body>
</html>

実行方法

上記のコードをコピーしてメモ帳を開いて貼り付けてhtml文書として保存します(メモ帳保存時の例)：ファイル名button_test.htmlファイル形式-すべてのファイル)
保存したフォルダに移動して button_test.html ファイルをクリックして、ボタンが正常に動作し、希望する形状であることを確認します。

このコードでボタンがオレンジ色から青色に変更され、斜め光のアニメーションが適用される様子が確認できるはずです。

上記をポスト本文に適用してみると下記のようになります。一度クリックしてコーディングに慣れるにはどうすればいいのか、ちょっと見てみましょう^^。

人工知能でコーディングする - 🤞に慣れる

整理する

上記のように作成したボタンアニメーションは、普段はオレンジ色の背景に斜めの光が通り過ぎる効果を持ち、マウスを上げると背景色が青色に変わり、斜めの光のアニメーションが続く形で動作します。

光るボタンの実装により、ユーザーの視線をより効果的に集めることができます。このようなWordPressのデザインを初めて試す方も、少しずつやってみると簡単に実装することができますので、ぜひ一度試してみてください！

# ボタンアニメーションのソースコードの解析を見る

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shining Button Test</title>
    <style>
        .shining-button {
            position: relative; /* 버튼 내부에 위치한 요소를 상대적으로 배치 */
            display: inline-block; /* 인라인 요소처럼 표시되지만, 블록 요소의 속성도 가짐 */
            padding: 10px 20px; /* 버튼 내부의 여백 설정 */
            font-size: 16px; /* 글자 크기 설정 */
            color: #fff; /* 글자 색상 흰색으로 설정 */
            background-color: #ff9800; /* 버튼 배경색을 오렌지색으로 설정 */
            border: none; /* 테두리 제거 */
            border-radius: 5px; /* 버튼 모서리를 둥글게 설정 */
            overflow: hidden; /* 자식 요소가 버튼 영역을 벗어나지 않도록 설정 */
            cursor: pointer; /* 마우스를 올리면 커서가 포인터로 변경 */
            text-decoration: none; /* 링크의 밑줄 제거 */
            transition: background-color .3s; /* 배경색 변경에 부드러운 전환 효과 설정 */
        }
        .shining-button::before {
            content: ''; /* 가상 요소에 내용을 비워둠 */
            position: absolute; /* 절대 위치로 배치 */
            top: 0; /* 상단에 위치 */
            left: -200%; /* 왼쪽 밖으로 시작 위치 설정 */
            width: 200%; /* 가로 길이를 두 배로 설정 */
            height: 100%; /* 버튼의 높이와 동일하게 설정 */
            transform: skewX(-45deg); /* X축을 기준으로 45도 기울이기 */
            background: linear-gradient(135deg, transparent 75%, rgba(255,255,255,.5) 75%, rgba(255,255,255,.5) 80%, transparent 80%); /* 사선 빛 효과 설정 */
            transition: left 1s, opacity 1s; /* 위치와 투명도 변화에 부드러운 전환 효과 설정 */
            opacity: 0; /* 초기 투명도를 0으로 설정 */
        }
        .shining-button:hover { 
            background-color: #0073aa; /* 마우스를 올리면 배경색을 푸른색으로 변경 */
        }
        .shining-button.shine::before { 
            left: 100%; /* 가상 요소를 오른쪽으로 이동 */
            opacity: 1; /* 투명도를 1로 설정하여 보이게 함 */
        }
    </style>
</head>
<body>
    <a href="https://example.com" class="shining-button">クリックしてください</a> <!-- 링크가 걸린 버튼 -->
    <script>
        document.addEventListener('DOMContentLoaded', () => { 
            const button = document.querySelector('.shining-button'); /* 클래스명이 shining-button인 요소 선택 */
            setInterval(() => {
                button.classList.toggle('shine'); /* 1.5초마다 shine 클래스를 추가/제거하여 애니메이션 실행 */
            }, 1500); /* 1.5초마다 실행 */
        });
    </script>
</body>
</html>

もっと詳しい内容をご覧になりたい方はこちらをクリックしてもっと勉強してみてください。こちらの世界も本当にすごいですね。

みんな注目！目立つボタンアニメーションの秘訣を公開（feat.WordPress)

ボタンアニメーションを適用する3ステップ

1.ボタン作り

2.CSSスタイルの適用

3.JavaScriptでアニメーションを繰り返す

オンライン適用前にローカルでテストしてみる

HTMLファイル（完全な形式）

実行方法

整理する

# ボタンアニメーションのソースコードの解析を見る

초보자를 위한 품질 커맨드 3편: py_compile_all.py로 python syntax check 검사하기

Django 아키텍처 2부: Container Diagram으로 백엔드 구조 정리하기

초보자를 위한 품질 커맨드(quality command) 2편: quality check 배치파일 안에서는 무슨 일이 벌어질까?

초보자를 위한 품질 커맨드(quality command) 1편: 한 번에 돌리는 코드 건강검진이란?

Python Project Packer － 폴더 덩어리 프로젝트를 파이썬 스크립트 1개로 만들어서 통으로 옮기는 방법

mdto.page 사용법: 마크다운을 ‘만료 링크’로 10초 만에 공유하기

ボタンアニメーションを適用する3ステップ

1.ボタン作り

2.CSSスタイルの適用

3.JavaScriptでアニメーションを繰り返す

オンライン適用前にローカルでテストしてみる

HTMLファイル（完全な形式）

実行方法

整理する

# ボタンアニメーションのソースコードの解析を見る

類似の投稿