Dropboxの共有URLを一番簡単、かつ「Jimdoの文字化けバグ」を絶対に起こさない確実な直リンクに書き換える手順を、一番シンプルな手順にまとめました!
メモ帳などで、以下の「2つのお掃除(書き換え)」をやるだけです。
元のURLがこちらの場合:
https://www.dropbox.com/scl/fi/w2t52s6pvktp9f0zrtdph/houkagocb-1.wav?rlkey=v8ud5srhemuj45jaxti934l16&st=yk3rzrl2&dl=0
最初の www.dropbox.com の部分を、dl.dropboxusercontent.com に書き換えます。
※これで、Dropboxの余計な画面を出さずに、音声データだけを直接読み込めるようになります。
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」と検索してもすぐに出てきます)
Dropboxからいつも通り「共有リンク(dl=0のもの)」をコピーします。
上記の変換サイトを開き、「Dropboxの共有リンク」と書かれた四角い枠の中に貼り付けます。
自動的にすぐ下の枠に、Jimdoでも100%動くお掃除済みの直リンク(https://dl.dropboxusercontent.com/...)が生成されます。
あとはそのURLをコピーして、テンプレートの src="..." に貼り付けるだけです!
これなら短縮URLソフトを使うのと同じくらいの手間で、システムが壊れない完璧な直リンクが手に入ります。ぜひ一度、この変換サイトを「お気に入り(ブックマーク)」に登録して試してみてください!
Google Drive は制限が多いので、 Dropbox または OneDrive に置き換えると 100% 再生できます。
Dropbox に MP3 をアップ
共有リンクを取得
URL の末尾 ?dl=0 を ?raw=1 に変更
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 角の丸み 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 角の丸み 30px</p>
<p>多胡行夫</p>
</div>
みなさん、こんにちは!
今日は、最近話題の「GoogleのAI先生」にどうやって会えるのか、ちょっとした“迷子話”を交えてご紹介します。
#### Chromeのホーム画面で「先生〜!」と呼んでも…
ある日、クラブのメンバーが言いました。
「最近のGoogleって、質問するとAIが答えてくれるんだって!」
これは試すしかない!と、意気揚々とパソコンを開き、Chromeのホーム画面へ。
そこにはおなじみの検索バーが。
「ここに聞けば、AI先生が出てくるはず!」と、質問を入力。
……でも、出てきたのはいつもの検索結果だけ。
「え?AI先生、どこにいるの??」
「私のパソコン、古いのかしら?」
「もしかして、魔法の言葉が必要なのかしら?」
#### 実は、AI先生は“図書館の中”にいた!
数日後、ようやく気づいたんです。
Chromeのホーム画面は、あくまで“玄関”。
そこから「Google検索」という“図書館”に入らないと、AI先生には会えないんです!
つまり、Chromeの検索バーは、ただの入り口。
本当のAI先生は、Google検索のページで、ちゃんと質問をしたときに現れてくれるんですね。
おすすめは、**Google検索ページへのショートカット**を作っておくこと!
デスクトップに「Google検索」と書かれたマークを置いておけば、それをダブルクリックするだけで、図書館の中に直行できます。
まるで、図書館の裏口からスッと入って、AI先生の席にまっすぐ向かうようなものですね。
次回のクラブ活動では、みんなで「AI先生に会える専用入り口」を作ってみましょう!
### 🤖 GoogleのAIってどんなもの?
まずはGoogleのAIについて、画面の出し方や検索のコツをみんなで確認。
「生成AI」と「AIエージェント」の違いも紹介すると、「へぇ〜!」と驚きの声が。
自分の名前を検索してみたら、思いがけない情報が出てきて「ちょっと怖い…」という感想も。でも、みんな興味津々で盛り上がりました。
お問い合わせ
あなたもジンドゥークリエイターで無料ホームページを。 無料新規登録は https://jp.jimdo.com から