記事内に画像や動画を埋め込む方法について詳しく説明します。
画像
"@image URL" の書式で画像のURLを指定すると、その画層を記事内に埋め込んで表示できます。画像は自分のWebサーバで配信するものでも良いし、外部のデータ管理システムにあるものでも良いです。永続的なURLさえ取得できれば、どんな画像でも埋め込むことができます。
@image https://dbmx.net/harunatsu-bg-lq.jpg
"[caption=text]" オプションで画像につけるキャプションを指定したり、"[width=n]" オプションで画像の横幅を指定したりもできます。幅は記事の横幅に対する百分率で指定します。また、"[top]" オプションをつけると、SNS等でURLをシェアした際にその画像がアイキャッチとして優先的に使われます。
@image https://dbmx.net/harunatsu-bg-lq.jpg [caption=キャプション] [width=60] [top]
デフォルトでは、画像のサイズはブラウザのウィンドウのサイズや端末の種類に合わせて適宜調整されるようになっています。よって、基本的には幅の明示的な指定はしない方が良いでしょう。
複数の画像を並べて表示することもできます。"|" で区切って画像のURLやオプションを並べるだけです。その場合でも画像のサイズは適切に調整されます。
@image https://dbmx.net/harunatsu-bg-lq.jpg [caption=キャプション1] | https://dbmx.net/harunatsu-bg-lq.jpg [caption=キャプション2]
キャプション2
段組は5段組までサポートされています。
キャプション2
キャプション3
キャプション2
キャプション3
キャプション4
キャプション2
キャプション3
キャプション4
キャプション5
ポートレイト方向（縦長）の画像でも、サイズが適切に調整されます。横長の場合とだいたい同じ面積に調整されますが、幅が短くなりすぎないように配慮もされます。
キャプション2
キャプション2
キャプション3
キャプション2
キャプション3
キャプション4
キャプション2
キャプション3
キャプション4
キャプション5
キャプション
"[float=left]" オプションを使うと、左詰めのフロート表示になります。本文は右側に回り込みます。キャプションと幅指定も他と同じように使えます。幅のデフォルトは48です。段組指定はできません。
@image https://dbmx.net/harunatsu-bg-lq.jpg [float=left] [caption=キャプション] @image https://dbmx.net/bikibikibob/data/kinjiro.jpg [float=left] [width=35]
回り込みを解除するには、罫線を配置します。二重ハイフンから五重ハイフンまでです。
--
キャプション
同様にして、"[float=right]" オプションを使うと、右詰めフロート表示になります。本文は左に回り込みます。左右のフロートでは、画像のアスペクト比によるサイズ調整は行われず、また端末の種類によるサイズ調整も行われません。
@image https://dbmx.net/harunatsu-bg-lq.jpg [float=right] [caption=キャプション] @image https://dbmx.net/bikibikibob/data/kinjiro.jpg [float=right] [width=35]
基本的に横長画像と正方形画像はデフォルトの幅のままで使って、縦長画像は40や35くらいの幅指定にすると良いでしょう。あまり小さくするとスマホで見づらくなるので、最小でも35くらいに抑えるのが無難です。逆に大きすぎると本文が読みづらくなるので、最大でも50くらいが限界でしょう。
ヘッダや表なども回り込みを自動解除しないので、回り込ませることができます。罫線以外で回り込みを解除するのは画像や動画などの埋め込み指示だけです。よって、意図せぬ回り込みを防ぐためには、基本的には回り込ませたい内容が終わったら罫線を置くとよいでしょう。
記事の飾りとして画像を置きたいが、スマホなどの小さい画面では邪魔になるので表示させたくないという場合、"[frill]" オプションを使うと良いでしょう。その場合、表示されない環境に配慮して、本文では画像について言及しない方が良いでしょう。
@image https://dbmx.net/bikibikibob/data/kinjiro.jpg [float=right] [width=30] [frill] @image https://dbmx.net/harunatsu-bg-lq.jpg [width=40] [frill]
動画
画像と同じく、"@video URL" の書式でURLを指定すると、その動画を記事内に埋め込んで表示できます。動画は自分のWebサーバで配信するものでも良いし、外部のデータ管理システムにあるものでも良いです。永続的なURLさえ取得できれば、どんな動画でも埋め込むことができます。
@video https://dbmx.net/bikibikibob/data/design-a.mov
レイアウトのルールも画像と全く同じで、幅を指定したりキャプションを指定したりもできます。段組も5段までできます。
@video https://dbmx.net/bikibikibob/data/design-a.mov [caption=キャプション1] | https://dbmx.net/bikibikibob/data/design-a.mov [caption=キャプション2]
キャプション
画像と同様に、動画のフロート処理もできます。[float=left] または [float=right] オプションを書くだけです。
@video https://dbmx.net/bikibikibob/data/design-a.mov [float=left] [caption=キャプション]
動画をたくさん紹介する際にはフローティングを活用するのが便利でしょう。再生用のコントロールに拡大ボタンがあるので、表示領域が多少狭くても問題ありません。
記事の飾りとして動画を置きたいが、スマホなどの小さい画面では邪魔になるので表示させたくないという場合、"[frill]" オプションを使うと良いでしょう。その場合、表示されない環境に配慮して、本文では動画について言及しない方が良いでしょう。
@video https://dbmx.net/bikibikibob/data/design-a.mov [float=right] [width=30] [frill] @video https://dbmx.net/bikibikibob/data/design-a.mov [width=30] [frill]
YouTube
"@youtube URL" の書式でURLを指定すると、Youtube上の動画も埋め込めます。URLは "?v=xxxxxxxx" などとして動画のIDを含むものを指定します。"xxxxxxxx" だけを指定しても良いです。
@youtube https://www.youtube.com/watch?v=Hln6MoTKnUc
レイアウトのルールは画像や動画と全く同じで、幅を指定したりキャプションを指定したりもできます。段組は2段までできます。
@youtube Hln6MoTKnUc [caption=キャプション1] | Hln6MoTKnUc [caption=キャプション2]
キャプション
YouTubeのフロート処理もできます。[float=left] または [float=right] オプションを書くだけです。
@youtube Hln6MoTKnUc [float=right] [caption=キャプション]
YouTube動画はiframeで埋め込まれているので、コンテンツのサイズの縦横比を取得することができません。よって、暗黙的にちょっと横長であるとみなしてサイズ調整がなされます。縦長動画だと上下が切れたような表示になります。
Google Maps
Google Mapsの地図を埋め込むこともできます。"@maps query" の書式でクエリを指定します。クエリは "東京駅" などの地名でも良いですし、"東京都千代田区永田町1-7-1" のような住所でも良いです。"渋谷駅から東京駅まで" などとすると経路表示になります。縮尺はデフォルトではクエリに応じて適当に決められますが、[zoom=n] オプションで変更できます。数値は1（広域）から21（詳細）までです。
@maps 東京駅
レイアウトのルールは画像や動画と全く同じで、幅を指定したりキャプションを指定したりもできます。段組は2段までできます。
@maps 東京駅 [caption=ズーム8] [zoom=8] | 東京駅 [caption=ズーム12] [zoom=12]
ズーム7
Mapsのフロート処理もできます。[float=left] または [float=right] オプションを書くだけです。
@youtube 東京駅 [float=left] [caption=ズーム7] [zoom=7]
スマホだとYouTubeとMapsはかなり縮小されて表示されますが、双方とも拡大表示機能があるので問題ないでしょう。
