画面をクリックしてみた
Plus UIの設定、カスタマイズの情報を探していると……Girgit ui blogger template?
これもPlus UI系、おーテーマカラーが5秒毎に変わる、オッシャレー
ぬ! 画面をクリックすると、クリックした所から、ハートの絵文字がふわふわ……
（ちなみに2026年1月現在、ハートが出ない設定に変更されてた）
……How to add Click ripple efect?
やってみた
バックアップをとって……コードをコピペ……画面をークリックー!……あれ? ハートが出ない……
ChatGPTさんに相談した
ちゃっびー教えてー、かくかくしかじか、ハートが出ない、出たのは青い波紋だけ……
え? ハートのコード? なにそれおいしいの?
サイトにあったコードはこれで全部……
あー、そのコードはクリックするとリップル（波紋）だけが出るエフェクト、なるほど。
でもハートは出せる、他の絵文字でも、何にするって?
いろいろ想像してみた
- やっぱり波紋?
少し地味だけど、なかなかリアルで美しい……色をランダム、サンライトイエローとかターコイズブルーにして、波紋疾走ー
- おすすめを聞いたら✨💕⭐🌸🔥
- 音も付け加えられる……カラフルな音符🎶とか?
- こちらのサイトは……クラッカー? 賑やかー
シャボン玉🫧にした
波紋より少し目立たせたい……サイトのイメージに合う柔らかい感じなら……シャボン玉とか?
コードの設計はちゃっびーに丸投げww イメージを擦り合わせて調整を重ねて重ねて……完成ー(*ﾟ▽ﾟﾉﾉﾞ☆ﾊﾟﾁﾊﾟﾁ
波紋は省いたから、Click ripple efectではないけど。
……良き(๑ˊ͈ ꇴ ˋ͈)ｱﾘｶﾞﾄ〜🌼
Plus UIのMulti-tabs Code Blockも試したかったので、コードを載せてみました。よろしければどうぞ。くれぐれもバックアップはお忘れなく。
/* クリックリップル効果 */
.clicker {
width: 60px;
height: 60px;
margin-left: -30px;
margin-top: -30px;
background: #204ecf;
border-radius: 100%;
position: absolute;
transform: scale(0);
opacity: .3;
-ms-filter: none;
filter: none;
z-index: 9999;
pointer-events: none
}
.darkMode .clicker {
background: #fff
}
.clicker.is-active {
opacity: 0;
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
filter: alpha(opacity=0);
transition: opacity 900ms ease, transform 900ms ease;
transform: scale(1)
}
/* ===========================
🫧 Click Bubble Effect CSS
=========================== */
.bubble {
position: fixed;
pointer-events: none;
border-radius: 50%;
backdrop-filter: blur(4px);
animation: floatUp 2.6s ease-out forwards;
opacity: 0.8;
mix-blend-mode: screen;
}
/* 光の反射 */
.bubble::after {
content: "";
position: absolute;
width: 40%;
height: 40%;
top: 10%;
left: 10%;
border-radius: 50%;
background: radial-gradient(white, rgba(255,255,255,0));
opacity: 0.45;
transform: rotate(35deg);
}
/* 破裂パーティクル */
.particle {
position: fixed;
pointer-events: none;
width: 6px;
height: 6px;
border-radius: 50%;
opacity: 0.8;
animation: pop 0.35s ease-out forwards;
}
/* アニメーション */
@keyframes floatUp {
0% { transform: translate(0,0) scale(0.5); opacity: 0.9; }
40% { opacity: 1; }
100% {
transform: translate(var(--tx), var(--ty)) scale(1.1);
opacity: 0;
}
}
@keyframes pop {
0% { transform: scale(1); opacity: 1; }
100% { transform: scale(2.5); opacity: 0; }
}
<!-- クリックリップル効果 -->
<script>
/*<![CDATA[*/
// ---- Bubble Canvas Setup ----
let bubbleCanvas = document.createElement("canvas");
bubbleCanvas.id = "bubble-canvas";
bubbleCanvas.style.position = "fixed";
bubbleCanvas.style.top = 0;
bubbleCanvas.style.left = 0;
bubbleCanvas.style.pointerEvents = "none";
bubbleCanvas.style.zIndex = 9999;
document.body.appendChild(bubbleCanvas);
let ctx = bubbleCanvas.getContext("2d");
let bubbles = [];
let w, h;
// ---- Resize Canvas ----
function resizeCanvas() {
w = bubbleCanvas.width = window.innerWidth;
h = bubbleCanvas.height = window.innerHeight;
}
resizeCanvas();
window.addEventListener("resize", resizeCanvas);
// ---- Bubble Constructor ----
function createBubble(x, y) {
bubbles.push({
x,
y,
radius: 5 + Math.random() * 20,
opacity: 0.4 + Math.random() * 0.4,
speedX: -1 + Math.random() * 2,
speedY: -1 - Math.random() * 1.5,
life: 1
});
}
// ---- Animation ----
function animate() {
ctx.clearRect(0, 0, w, h);
bubbles.forEach((b, i) => {
b.x += b.speedX;
b.y += b.speedY;
b.life -= 0.005;
if (b.life <= 0) bubbles.splice(i, 1);
ctx.beginPath();
ctx.arc(b.x, b.y, b.radius, 0, Math.PI * 2);
// 輪郭（少し濃く）
ctx.strokeStyle = `rgba(173, 216, 230, ${1.2 * b.life})`;
ctx.lineWidth = 2;
// 虹色の光の反射（ランダムで変化）
const hue = Math.floor(Math.random() * 360);
const gradient = ctx.createRadialGradient(
b.x - b.radius / 3,
b.y - b.radius / 3,
1,
b.x,
b.y,
b.radius
);
gradient.addColorStop(0, `hsla(${hue}, 90%, 100%, ${b.opacity})`);
gradient.addColorStop(0.4, `hsla(${hue + 50}, 90%, 70%, 0.35)`);
gradient.addColorStop(0.7, `hsla(${hue + 120}, 80%, 60%, 0.25)`);
gradient.addColorStop(1, `rgba(173,216,230,0)`);
ctx.fillStyle = gradient;
ctx.fill();
ctx.stroke();
});
requestAnimationFrame(animate);
}
animate();
// ---- Click Event ----
window.addEventListener("click", function(e) {
createBubble(e.clientX, e.clientY);
const sound = document.getElementById("pop-sound");
if(sound){
sound.currentTime = 0;
sound.play().catch(()=>{});
}
}, { passive: true });
/*]]>*/
</script>
