googleカレンダーに自分のイベント予定を登録してほしい。
告知ページへ、そのリンクボタンを設置したいというのです。
そんな要件はありますか。
そもそも、googleカレンダーを使っていますか？
予定はアレクサを多用しています。
【共有】リンクコード by shopify
Googleカレンダーが日本に上陸した時にやったかもしれない。そのくらい前のような記憶があります。もう覚えていません。
要件は以下です。
・ 日時
9/11(木) 12:00
・タイトル
Astrowave ONLINE STORE New Open
・ テキスト
Astrowave ONLINE STORE がオープンしました。
生まれ変わったAstrowaveが描く、新しい宇宙体験をお楽しみください。
—-
Astrowave ONLINE STORE（リンク）
—-
後々、Astrowave ONLINE STORE（リンク）が問題になります。
html
<a href="https://calendar.google.com/calendar/render?action=TEMPLATE&text=Astrowave%20ONLINE%20STORE%20New%20Open&dates=20250911T030000Z/20250911T040000Z&details=Astrowave%20ONLINE%20STORE%20がオープンしました。%0A生まれ変わったAstrowaveが描く、新しい宇宙体験をお楽しみください。%0A%0A----%0A<a%20href='https://astrowave.jp/'%20target='_blank'>Astrowave%20ONLINE%20STORE</a>%0A----" class="link_calendar" target="_blank">カレンダーに登録する</a>
そうすると。。
登録されましたね！
しかしこの方法shopifyではうまくいったのですが。。。
shopifyは柔軟に処理してくれていたようです。
【共有】wordpressのカスタムHTMLで崩れないコード
wordpressの「カスタムHTML」でこのリンクを試すと、ページの表示がガタ崩れを起こしました。
ありゃ？
AIに聞きました。すると。
それは<a>タグの中に<a>タグが入っているネスト状態になっているから。
<a href="https://calendar.google.com/calendar/render?action=TEMPLATE&text=Astrowave%20ONLINE%20STORE%20New%20Open&dates=20250911T030000Z/20250911T040000Z&details=Astrowave%20ONLINE%20STORE%20がオープンしました。%0A生まれ変わったAstrowaveが描く、新しい宇宙体験をお楽しみください。%0A%0A----%0A<a%20href='https://astrowave.jp/'%20target='_blank'>Astrowave%20ONLINE%20STORE</a>%0A----" class="link_calendar" target="_blank">カレンダーに登録する</a>
--↑--
問題点：
・URL内に <a href='https://astrowave.jp/' target='_blank'>Astrowave ONLINE STORE</a> というHTMLタグが含まれている
・WordPressはセキュリティ上、このような入れ子のHTMLを許可しない
普通、HTMLでこんなことはしないようですね(^_^;)
URL表示にすると、googleカレンダーに登録されたら「外部リンク扱い」になるから、同じ効果がありますと教えられました。
<a href="https://calendar.google.com/calendar/render?action=TEMPLATE&text=Astrowave%20ONLINE%20STORE%20New%20Open&dates=20250911T030000Z/20250911T040000Z&details=Astrowave%20ONLINE%20STORE%20がオープンしました。%0A生まれ変わったAstrowaveが描く、新しい宇宙体験をお楽しみください。%0A%0A----%0AAstrowave%20ONLINE%20STORE：%20https://astrowave.jp/%0A----" class="link_calendar" target="_blank">カレンダーに登録する</a>↑確かにそうなります。
しかし、外部リンクをURL表示にしたくないのです。
相談するとjavascriptで対応するのがおすすめとのこと。
<div class="astrowave-calendar-section">
<button id="astrowave-calendar-btn" class="link_calendar">カレンダーに登録する</button>
</div>
<script>
(function() {
'use strict';
// ===== 設定エリア（ここを編集してください） =====
const CONFIG = {
eventTitle: 'Astrowave ONLINE STORE New Open',
eventDate: '20250912T010000Z/20250912T010000Z',
shopUrl: 'https://astrowave.jp/',
shopLinkText: 'オンラインショップ',
eventDescription: `Astrowave ONLINE STORE がオープンしました。
生まれ変わったAstrowaveが描く、新しい宇宙体験をお楽しみください。`,
buttonId: 'astrowave-calendar-btn'
};
// ===== 設定エリア終了 =====
if (window.astrowaveCalendarInitialized) return;
window.astrowaveCalendarInitialized = true;
function init() {
const btn = document.getElementById(CONFIG.buttonId);
if (!btn || btn.dataset.initialized) return;
btn.dataset.initialized = 'true';
btn.addEventListener('click', function(e) {
e.preventDefault();
const details = `${CONFIG.eventDescription}
<a href="${CONFIG.shopUrl}">${CONFIG.shopLinkText}</a>`;
const url = 'https://calendar.google.com/calendar/render?' +
new URLSearchParams({
action: 'TEMPLATE',
text: CONFIG.eventTitle,
dates: CONFIG.eventDate,
details: details
}).toString();
window.open(url, '_blank');
});
}
document.readyState === 'loading' ?
document.addEventListener('DOMContentLoaded', init) : init();
})();
</script>↑ javascript版のボタンです。
他に方法はいろいろあるだろうと思いますが、wordpressで崩れないgoogleカレンダーのリンクボタンは終了です。
googleカレンダーへのパラメータ説明
<a href="https://calendar.google.com/calendar/render?action=TEMPLATE&text=Astrowave%20ONLINE%20STORE%20New%20Open&dates=20250911T030000Z/20250911T040000Z&details=Astrowave%20ONLINE%20STORE%20がオープンしました。%0A生まれ変わったAstrowaveが描く、新しい宇宙体験をお楽しみください。%0A%0A----%0Ahttps://astrowave.jp/%0A----" class="link_calendar" target="_blank">カレンダーに登録する</a>
変なことしないでURLにしましょう。
action=TEMPLATE: 新しいイベント作成
text=: イベントのタイトル（URLエンコード済み）
dates=: 開始日時と終了日時（2025年9月11日 00:00-23:59）
details=: イベントの詳細説明（URLエンコード済み）
改行
%0A を使用する
YYYY：年
MM：月 (01〜12)
DD：日 (01〜31)
T：日付と時間の区切り文字
HHMMSS：24時間形式の時刻
Z：タイムゾーンがUTC（協定世界時）であることを示す記号
※時間を昼の12:00からにしたい
日本時間の12:00-13:00をUTC時間に変換すると、UTC 03:00-04:00になります。
20250911T030000Z/20250911T040000Z (UTC 03:00-04:00)
UTCって聞き慣れないです。
検索しました。
Universal time coordinated（協定世界時）の略
現在、世界で基準とされており、精度の高い原子時計と天体観測に基づいて決められた時間のことです。
時差計算
https://www.jisakeisan.com/timezone/utc/
日本は9時間の時差があるということなので、日本だと9時間プラスして計算してコードへ反映した形になります。
時間指定がちょっと悩むかも。
参考サイト
Googleカレンダー予定追加リンク（URL）生成ツール
https://shanabrian.com/web/google-calendar-link-generator/
もうこれでいいですね！
星間旅路のメロディ
「宇宙の静けさに包まれながら、漂流する過去の音楽を捜し求め、銀河の奥底でその旋律に耳を傾ける。」
「この電波はどこの星からきたのだろうか。」
生命も輝いていた、そんな雰囲気がします。