みなさん、こんにちは！
今日は自分のブログにちょっとした遊び心をプラスできる「オリジナルおみくじパーツ」を作ってみたので、みなさんにもお裾分けしたいと思います。
サイドバーにぴったりのコンパクトサイズで、紅白のめでたいデザインに仕上げてみました。
まずは実際に触って運勢を占ってみてください！
おみくじ
制作：Ｇスカ
【閉じる】
使い方の説明
使い方はとっても簡単です！
「占う」ボタンを押すと、ディスプレイの文字がくるくる回り出します。
4秒ほど待つと、今日の運勢がピタッと止まります。
表示された運勢をクリックすると、詳細なメッセージがポップアップで出現！
良い結果が出たら、そのまま「X（旧Twitter）で共有」ボタンからフォロワーさんに見せちゃいましょう。
■■■ カスタマイズ ■■■
見た目を変えたい！
コード全体は記事の最後に載せますので、自分のブログにも設置したい！という方は、先に下の方にあるコードをメモ帳などにコピーしておいてください。
なお、動くかどうかはそのブログによって違います。
動作が確認出来たのはBloggerとはてなブログになります。
「ブログの色に合わせてデザインを変えたいな」という方は、コード内の <style> 〜 </style> の間にある以下の場所を探して、数字や色コードを書き換えてみてください。
■ 枠の色や太さを変える
.omi-container {
width: 180px;
border: 3px solid #e60012; /* #e60012（赤）を好きな色コードに！ */
border-radius: 10px; /* 角の丸み。数字を大きくするともっと丸くなります */
}
■ ボタンの色を変える
.omi-btn {
background: #e60012; /* ボタンの背景色 */
box-shadow: 0 4px #a0000d; /* ボタンの下の影の色 */
}
占いの内容を変えたい！
ここが一番の楽しみどころです！
コードの下の方にある const data = [...] という部分を書き換えるだけで、世界に一つだけの診断ツールに早変わりします。
const data = [
{t: "大吉\uFF01", d: "今日はいい事起きそう\uFF01最高の一日になります"},
{t: "中吉", d: "欲しかった物が見つかるかも\u3002お買い物にツキあり\uFF01"},
ちなみに大吉の後の「\uFF01」ですが、「！」マークです。
！そのままですとブログや機種等によって「&#数字」という文字コードが表示されてしまいますので、今回は！を「\uFF01」に、「。」を「\u3002」にしてあります。
上記コードで変えていい所は「大吉」や「中吉」というのがルーレットに表示されるもので、その後の
d: "今日はいい事起きそう\uFF01最高の一日になります"
"の後がポップアップで表示される内容となっています。
おみくじ以外にも、「今日の晩ごはん診断」や「おすすめの作業用BGM診断」なんて使い方も面白いかもしれませんね。
このパーツはHTMLとJavaScriptだけで動いているので、各種ブログサービスのサイドバー設定に貼り付けるだけで使えます。
もし「使ってみたよ！」という方がいたら、ぜひコメントやXなどで教えていただけると、私（Gスカ）も飛んで喜んじゃいます！
（コメントにあなたのURLを載せていただけると、見に来てくれた人が遊びにいくかもです）
みなさんのブログが、もっと楽しい場所になりますように！
コードはここから下
なお、ここのコードの中に私のブログへのURLリンクが含まれていますが、そこは変えないで下さい。
ブログ記事用
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8"></meta>
<meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
<title>おみくじツール</title>
<style>
.omi-container {
width: 180px;
margin: 10px auto;
padding: 15px 15px 5px 15px;
background: #ffffff;
border: 3px solid #e60012;
border-radius: 10px;
text-align: center;
font-family: sans-serif;
position: relative;
}
.omi-screen {
background: #000000;
color: #00ff00;
height: 50px;
line-height: 50px;
margin-bottom: 15px;
font-weight: bold;
font-size: 18px;
border-radius: 5px;
border: 2px solid #666666;
}
.omi-btn {
background: #e60012;
color: #ffffff;
border: none;
width: 100%;
padding: 10px 0;
border-radius: 20px;
cursor: pointer;
font-weight: bold;
font-size: 16px;
box-shadow: 0 4px #a0000d;
margin: 0 !important;
outline: none;
}
.omi-btn:active { transform: translateY(2px); box-shadow: 0 2px #a0000d; }
.omi-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.omi-credit {
display: block;
text-align: right;
margin-top: 10px;
font-size: 10px;
}
.omi-credit a { color: #999999; text-decoration: none; }
.omi-credit a:hover { color: #e60012; text-decoration: underline; }
#omi-modal {
display: none;
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0,0,0,0.7);
z-index: 99999;
align-items: center;
justify-content: center;
}
.modal-content {
background: #ffffff;
padding: 20px;
width: 85%;
max-width: 240px;
border-radius: 10px;
border: 3px solid #e60012;
text-align: center;
}
.x-btn {
display: inline-block;
margin-top: 15px;
background: #000000;
color: #ffffff !important;
text-decoration: none;
padding: 8px 15px;
border-radius: 5px;
font-size: 12px;
font-weight: bold;
}
.close-link {
display: block;
margin-top: 15px;
color: #666666;
font-size: 12px;
text-decoration: underline;
cursor: pointer;
}
</style>
</head>
<body>
<div class="omi-container">
<div class="omi-screen" id="screen">おみくじ</div>
<button class="omi-btn" id="mainBtn">占う</button>
<div style="clear: both; margin-top: 5px;"></div>
<div class="omi-credit">
制作：<a href="https://skgura.blogspot.com/" target="_blank">Ｇスカ</a>
</div>
</div>
<div id="omi-modal">
<div class="modal-content">
<h2 id="res-title" style="color: #e60012; font-size: 24px; margin: 0;"></h2>
<p id="res-text" style="color: #333333; font-size: 14px; line-height: 1.6; margin: 15px 0;"></p>
<button type="button" class="x-btn" id="x-share-btn" style="border:none; cursor:pointer; width: 100%;">Xで結果を共有</button>
<span class="close-link" id="closeBtn">【閉じる】</span>
</div>
</div>
<script>
(function() {
const data = [
{t: "大吉\uFF01", d: "今日はいい事起きそう\uFF01最高の一日になります\u2661"},
{t: "中吉", d: "欲しかった物が見つかるかも\u3002お買い物にツキあり\uFF01"},
{t: "吉", d: "美味しいものに巡り会える予感\u3002ランチを楽しんで\uFF01"},
{t: "小吉", d: "懐かしい人から連絡が届くかも\u3002スマホをチェック\uFF01"},
{t: "大吉\uFF01\uFF01", d: "最高のシャッターチャンス\uFF01素敵な思い出を残して\u3002"},
{t: "末吉", d: "深呼吸すれば運気アップ\u3002焦らずゆっくり行きましょう\u3002"},
{t: "吉", d: "掃除をすると宝物が出るかも\uFF1F身の回りを綺麗に\uFF01"},
{t: "中吉", d: "勇気を出して一歩進もう\u3002新しい発見があるはず\uFF01"},
{t: "要注意", d: "今日は忘れ物に注意かも\u2026\u3002出発前の確認を忘れずに\uFF01"},
{t: "凶", d: "無理せず早めに寝るのが吉\u3002明日のために充電してね\u3002"}
];
const btn = document.getElementById('mainBtn');
const screen = document.getElementById('screen');
const modal = document.getElementById('omi-modal');
const closeBtn = document.getElementById('closeBtn');
let rolling = false;
btn.addEventListener('click', function() {
if (rolling) return;
rolling = true;
btn.disabled = true;
screen.style.color = "#00ff00";
let count = 0;
const timer = setInterval(() => {
const rand = Math.floor(Math.random() * data.length);
screen.innerText = data[rand].t;
count++;
if (count >= 20) {
clearInterval(timer);
showResult();
}
}, 80);
});
// ▼ ここを追加！今の結果を一時的に保存しておくための「箱」です
let currentShareText = "";
function showResult() {
const final = Math.floor(Math.random() * data.length);
const res = data[final];
screen.innerText = res.t;
screen.style.color = "#ffff00";
document.getElementById('res-title').innerText = res.t;
document.getElementById('res-text').innerText = res.d;
// 【ここがポイント！】Bloggerにバレないよう、変数の中にだけURLを組み立てます
// ハッシュタグの後にスペース＋改行＋URLを入れるGスカさんスタイルですわ！
currentShareText = `今日のおみくじ結果は\u3010${res.t}\u3011でした\uFF01\n${res.d}\n\n#ブログミニおみくじ #今日の運勢 \nhttps://skgura.blogspot.com/2026/03/omikuji-tool.html`;
setTimeout(() => {
modal.style.display = 'flex';
}, 500);
}
// 【Blogger対策の核心】ボタンが押された瞬間に、直接Xのウィンドウを生成して飛ばします！
document.getElementById('x-share-btn').addEventListener('click', function() {
const finalUrl = `https://x.com/intent/tweet?text=${encodeURIComponent(currentShareText)}`;
window.open(finalUrl, '_blank');
});
closeBtn.addEventListener('click', function() {
modal.style.display = 'none';
btn.disabled = false;
rolling = false;
});
})();
</script>
</body>
</html>
その場合、ブログ名とこの記事のURLだけでOKです。
サイドバーで使いたい人は、たぶん↑このコードだと動かないかもしれません。
↓その場合はこちら
サイドバー用
<div class="omi-sidebar-wrapper">
<div class="omi-container">
<div class="omi-screen" id="side-screen">おみくじ</div>
<button id="side-mainBtn" class="omi-btn">占う</button>
<div style="clear: both; margin-top: 5px;"></div>
<div class="omi-credit">
制作：<a href="https://skgura.blogspot.com/" target="_blank">Ｇスカ</a>
</div>
</div>
<div id="side-omi-modal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 999999; align-items: center; justify-content: center;">
<div style="background: #ffffff; padding: 20px; width: 85%; max-width: 240px; border-radius: 10px; border: 3px solid #e60012; text-align: center;">
<h2 id="side-res-title" style="color: #e60012; margin: 0; font-size: 24px;"></h2>
<p id="side-res-text" style="color: #333333; font-size: 14px; margin: 15px 0; line-height: 1.6;"></p>
<button type="button" id="side-x-share-btn" style="display: inline-block; margin-top: 15px; background: #000000; color: #ffffff; border: none; padding: 8px 15px; border-radius: 5px; font-size: 12px; font-weight: bold; cursor: pointer; width: 100%;">Xで結果を共有</button>
<span id="side-closeBtn" style="display: block; margin-top: 15px; color: #666666; font-size: 12px; text-decoration: underline; cursor: pointer;">【閉じる】</span>
</div>
</div>
</div>
<style>
.omi-container { width: 100%; max-width: 180px; margin: 10px auto; padding: 15px 15px 5px 15px; background: #ffffff; border: 3px solid #e60012; border-radius: 10px; text-align: center; font-family: sans-serif; box-sizing: border-box; }
.omi-screen { background: #000000; color: #00ff00; height: 50px; line-height: 50px; margin-bottom: 15px; font-weight: bold; font-size: 18px; border-radius: 5px; border: 2px solid #666666; }
.omi-btn { background: #e60012; color: #ffffff; border: none; width: 100%; padding: 10px 0; border-radius: 20px; cursor: pointer; font-weight: bold; font-size: 16px; box-shadow: 0 4px #a0000d; outline: none; }
.omi-btn:active { transform: translateY(2px); box-shadow: 0 2px #a0000d; }
.omi-credit { display: block; text-align: right; margin-top: 10px; font-size: 10px; }
.omi-credit a { color: #999999; text-decoration: none; }
</style>
<script>
(function() {
const data = [
{t: "大吉\uFF01", d: "今日はいい事起きそう\uFF01最高の一日になります\u2661"},
{t: "中吉", d: "欲しかった物が見つかるかも\u3002お買い物にツキあり\uFF01"},
{t: "吉", d: "美味しいものに巡り会える予感\u3002ランチを楽しんで\uFF01"},
{t: "小吉", d: "懐かしい人から連絡が届くかも\u3002スマホをチェック\uFF01"},
{t: "大吉\uFF01\uFF01", d: "最高のシャッターチャンス\uFF01素敵な思い出を残して\u3002"},
{t: "末吉", d: "深呼吸すれば運気アップ\u3002焦らずゆっくり行きましょう\u3002"},
{t: "吉", d: "掃除をすると宝物が出るかも\uFF1F身の回りを綺麗に\uFF01"},
{t: "中吉", d: "勇気を出して一歩進もう\u3002新しい発見があるはず\uFF01"},
{t: "要注意", d: "今日は忘れ物に注意かも\u2026\u3002出発前の確認を忘れずに\uFF01"},
{t: "凶", d: "無理せず早めに寝るのが吉\u3002明日のために充電してね\u3002"}
];
const btn = document.getElementById('side-mainBtn');
const screen = document.getElementById('side-screen');
const modal = document.getElementById('side-omi-modal');
const closeBtn = document.getElementById('side-closeBtn');
const shareBtn = document.getElementById('side-x-share-btn');
let currentText = "";
let rolling = false;
btn.addEventListener('click', function() {
if (rolling) return;
rolling = true;
btn.disabled = true;
screen.style.color = "#00ff00";
let count = 0;
const timer = setInterval(() => {
screen.innerText = data[Math.floor(Math.random() * data.length)].t;
if (++count >= 20) {
clearInterval(timer);
const res = data[Math.floor(Math.random() * data.length)];
screen.innerText = res.t;
screen.style.color = "#ffff00";
document.getElementById('side-res-title').innerText = res.t;
document.getElementById('side-res-text').innerText = res.d;
currentText = `今日のおみくじ結果は\u3010${res.t}\u3011でした\uFF01\n${res.d}\n\n#ブログミニおみくじ #今日の運勢 \nhttps://skgura.blogspot.com/2026/03/omikuji-tool.html`;
setTimeout(() => { modal.style.display = 'flex'; }, 500);
}
}, 80);
});
shareBtn.addEventListener('click', function() {
window.open(`https://x.com/intent/tweet?text=${encodeURIComponent(currentText)}`, '_blank');
});
closeBtn.addEventListener('click', function() {
modal.style.display = 'none';
btn.disabled = false;
rolling = false;
});
})();
</script>
0 件のコメント:
コメントを投稿
I'm sorry, Japanese text only.
荒らし目的と思われるコメントは気づき次第対処します。