ワードプレスで使えるコード
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> #my-area { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #ffebf0; } #my-area .heart { width: 100px; height: 100px; background-color: red; position: relative; transform: rotate(-45deg); animation: heartbeat 1s infinite alternate; /* アニメーションプロパティを追加 */ } #my-area .heart::before, #my-area .heart::after { content: ""; width: 100px; height: 100px; background-color: red; position: absolute; border-radius: 50%; } #my-area .heart::before { border-radius: 50%; top: -50px; left: 0; } #my-area .heart::after { border-radius: 50%; top: 0; left: 50px; } @keyframes heartbeat { /* キーフレームを定義 */ from { transform: rotate(-45deg) scale(1); } to { transform: rotate(-45deg) scale(1.2); } } </style> </head> <body> <div id="my-area"> <div class="heart"></div> </div> </body> </html>
プロンプトのポイント
最初のChatGPTへのプロンプトは日本語でOK。つまり、ノー・コードで構いません:(例)「CSSやJavaScriptを使った可愛い仕掛けのHTMLカスタムコードを教えて」→複数のコードを出してくれます。
「ワードプレス全体の装丁が崩れないように」などのプロンプトが必要。ワードプレスの特定のエリアにのみ影響を与えるためには、CSSのスコープを限定する必要があります。一般的な方法は、特定のエリアに一意のクラス名またはIDを追加し、そのクラス名またはIDをCSSセレクタに含めることです。これにより、スタイルルールはその特定のエリアにのみ適用されます。今回の例では、ハート形のアニメーションを含むエリアに’my-area’というIDを追加しました。
(例)「ハートのコードのアニメーションが動きません。どうしたらいいでしょう」→新しいコードを解説付きで答えてくれます;ハートをアニメーションさせるためには、CSSのアニメーションプロパティとキーフレームを使用することができます。このコードでは、新しい’@keyframes’ルール’heartbeat’を定義して、ハートのスケールを変更します。そして、’.heart’クラスに’animation’プロパティを追加し、このアニメーションを無限に交互に実行するように設定します。この変更により、ハートは1秒間隔で拡大・縮小するアニメーションを表示します。
会話は引き継いでるように見える時と、全く前の内容が見えてない時があるので、面倒でももう一度欲しいコードの詳しい内容を一緒に書き込むこと;ハートのアニメーションを’#my-area’内に限定するには、先に提供したアニメーションのコードを、この新しいスコープに合わせて変更する必要があります。