Dropboxの共有URLを一番簡単、かつ「Jimdoの文字化けバグ」を絶対に起こさない確実な直リンクに書き換える手順を、一番シンプルな手順にまとめました!

メモ帳などで、以下の「2つのお掃除(書き換え)」をやるだけです。

🛠️ 直リンクへの変更手順

元のURLがこちらの場合:

https://www.dropbox.com/scl/fi/w2t52s6pvktp9f0zrtdph/houkagocb-1.wav?rlkey=v8ud5srhemuj45jaxti934l16&st=yk3rzrl2&dl=0

1. 先頭を「dl.dropboxusercontent.com」に変える

最初の www.dropbox.com の部分を、dl.dropboxusercontent.com に書き換えます。

  • ※これで、Dropboxの余計な画面を出さずに、音声データだけを直接読み込めるようになります。

2. 後半の「&」から後ろをバッサリ消す

URLの途中にある rlkey=xxxx のすぐ後ろに付いている &st=... から後ろの文字をすべて消します。

  • ※Jimdoが勝手に文字をバグらせる(&化する)のは、この後半の & が原因です。これを元から断つために消去します。

✨ 完成した「直リンク」がこちら!

上記の2つをお掃除すると、URLは以下のようにスッキリした形になります。

https://dl.dropboxusercontent.com/scl/fi/w2t52s6pvktp9f0zrtdph/houkagocb-1.wav?rlkey=v8ud5srhemuj45jaxti934l16

今後新しい音声ファイルを増やすときも、「頭を dl.dropboxusercontent.com にして、お尻の & から後ろを全部消す!」 と覚えておけば、失敗ゼロで一瞬で直リンクが作れます。

この完成したURLを、テンプレートコードの src="..." の中に貼り付けて使ってくださいね!

対策:文字の書き換えを「自動」でやってくれるサイトを使う

「先頭を書き換えて、後ろを消す手作業がやっぱり面倒!」という場合は、インターネット上にある「Dropbox直リンク変換ツール」という無料のホームページを使うのが一番おすすめです。

リンクを貼り付けるだけで、一瞬で正しい形(dl.dropboxusercontent.com の形)に変換してくれます。

🛠️ おすすめの変換サイト

以下のサイト(Syncer)が、余計な文字をすべて綺麗に消した理想の直リンクを作ってくれるので一番確実です。

  • サイト名: Dropboxの共有リンクをダイレクトリンク(直リンク)に変換するツール

  • URL: https://syncer.jp/dropbox-direct-link-converter (※パソコンやスマホのブラウザで「Dropbox 直リンク 変換 syncer」と検索してもすぐに出てきます)

📝 使い方

  1. Dropboxからいつも通り「共有リンク(dl=0のもの)」をコピーします。

  2. 上記の変換サイトを開き、「Dropboxの共有リンク」と書かれた四角い枠の中に貼り付けます。

  3. 自動的にすぐ下の枠に、Jimdoでも100%動くお掃除済みの直リンクhttps://dl.dropboxusercontent.com/...)が生成されます。

  4. あとはそのURLをコピーして、テンプレートの src="..." に貼り付けるだけです!

これなら短縮URLソフトを使うのと同じくらいの手間で、システムが壊れない完璧な直リンクが手に入ります。ぜひ一度、この変換サイトを「お気に入り(ブックマーク)」に登録して試してみてください!

最も確実に再生できる方法(おすすめ)

Google Drive は制限が多いので、 Dropbox または OneDrive に置き換えると 100% 再生できます。

Dropbox の場合(超安定)

  1. Dropbox に MP3 をアップ

  2. 共有リンクを取得

  3. URL の末尾 ?dl=0?raw=1 に変更

  4. Jimdo に貼る

例:

コード
https://www.dropbox.com/s/xxxxxxx/filename.mp3?raw=1
<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;">
  <iframe 
    src="https://www.youtube.com/embed/PV8gjxxrgXQ?rel=0&loop=1&playlist=PV8gjxxrgXQ" 
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" 
    frameborder="0" 
    allow="autoplay; encrypted-media" 
    allowfullscreen>
  </iframe>
</div>

https://itsakura.com/html-color-codes

 

カラーコード URL

ここにタイトル

TAGOPCC

多胡行夫

 

<div style="border: 2px solid #333333; /* 枠線の太さ・種類・色 */    background-color: #f9f9f9; /* 背景色 */    padding: 20px; /* 内側の余白(重要!) */    border-radius: 10px; /* 角の丸み(不要なら削除) */    margin-bottom: 20px;">

<h3>ここにタイトル</h3>

<p>TAGOPCC</p>

<p>多胡行夫</p>

</div>

ここにタイトル

TAGOPCC  角の丸み 20px

多胡行夫

 

<div style="border: 2px solid #333333; /* 枠線の太さ・種類・色 */ background-color: azure; /* 背景色 */ padding: 20px; /* 内側の余白(重要!) */ border-radius: 10px; /* 角の丸み(不要なら削除) */ margin-bottom: 20px;">

<h3>ここにタイトル</h3>

<p>TAGOPCC&nbsp; 角の丸み 20px</p>

<p>多胡行夫</p>

</div>

ここにタイトル

TAGOPCC  角の丸み 30px

多胡行夫

 

<div style="border: 2px solid #333333; /* 枠線の太さ・種類・色 */ background-color: beige; /* 背景色 */ padding: 20px; /* 内側の余白(重要!) */ border-radius: 30px; /* 角の丸み(不要なら削除) */ margin-bottom: 20px;">

<h3>ここにタイトル</h3>

<p>TAGOPCC&nbsp; 角の丸み 30px</p>

<p>多胡行夫</p>

</div>

 

🖥️ 2025年9月16日 

みなさん、こんにちは!  

今日は、最近話題の「GoogleのAI先生」にどうやって会えるのか、ちょっとした“迷子話”を交えてご紹介します。

#### Chromeのホーム画面で「先生〜!」と呼んでも…

 

ある日、クラブのメンバーが言いました。  

「最近のGoogleって、質問するとAIが答えてくれるんだって!」  

これは試すしかない!と、意気揚々とパソコンを開き、Chromeのホーム画面へ。  

そこにはおなじみの検索バーが。  

 

「ここに聞けば、AI先生が出てくるはず!」と、質問を入力。  

……でも、出てきたのはいつもの検索結果だけ。  

 

「え?AI先生、どこにいるの??」  

「私のパソコン、古いのかしら?」  

「もしかして、魔法の言葉が必要なのかしら?」 

#### 実は、AI先生は“図書館の中”にいた!

 数日後、ようやく気づいたんです。  

Chromeのホーム画面は、あくまで“玄関”。  

そこから「Google検索」という“図書館”に入らないと、AI先生には会えないんです! 

つまり、Chromeの検索バーは、ただの入り口。  

本当のAI先生は、Google検索のページで、ちゃんと質問をしたときに現れてくれるんですね。

 

 

#### じゃあ、どうすればすぐ会えるの?

 

おすすめは、**Google検索ページへのショートカット**を作っておくこと!  

デスクトップに「Google検索」と書かれたマークを置いておけば、それをダブルクリックするだけで、図書館の中に直行できます。   

まるで、図書館の裏口からスッと入って、AI先生の席にまっすぐ向かうようなものですね。

 

### まとめ 

  • - **Chromeホーム画面**は、インターネットの“玄関”。
  • - **Google検索ページ**は、情報の“図書館”。
  • - **AI先生**は、その図書館の中で、質問に答えてくれる“賢い司書さん”。

次回のクラブ活動では、みんなで「AI先生に会える専用入り口」を作ってみましょう!

 

 

### 🤖 GoogleのAIってどんなもの?

まずはGoogleのAIについて、画面の出し方や検索のコツをみんなで確認。  

「生成AI」と「AIエージェント」の違いも紹介すると、「へぇ〜!」と驚きの声が。  

自分の名前を検索してみたら、思いがけない情報が出てきて「ちょっと怖い…」という感想も。でも、みんな興味津々で盛り上がりました。