k144 Personal Note

パーソナルノート・ライフログ、気の向くまま書き綴っています。

はてなダイアリーに「SVGファイル」をアップロードして、記事画面にファイルを直接表示させる

スポンサーリンク

はてなダイアリープラスを使う

はてなダイアリープラス」(有料オプション)を使うと、写真以外のファイルをアップロードできるようになります。

SVGファイル」をアップロードする

1.編集画面「ファイル」ボタン

2.「ファイル」ウィンドウ

記事に挿入

挿入したファイルのプレビュー

PD-icon.svg 直
↑挿入された「はてな記法」のファイル

これは、アップロードしたファイルへのリンク

直接表示に書き換える

1.上記のリンクをクリック

2.新規タブにリンク先のSVGファイルが表示される

3.「CSS、画像など直接ファイル指定する場合のアドレスを表示」をクリック

4.画像ファイルのURLをコピーする

5.記事編集画面へペーストし、imgタグを構成する

<img src="http://d.hatena.ne.jp/k-144/files/PD-icon.svg?d=y">
SVGファイルは画像フォーマットのひとつ。
<img>タグの「src」属性として指定し、画像表示させることができる。

現在では、最新版のブラウザならSVGに対応している。

↓imgタグで表示されたSVGファイル

[>第4回 ベクター形式のグラフィックを扱うSVGの基本 | Think IT
[>外部SVGファイルを埋め込むには | HTMLのQ&A【OKWave】
[>音声や動画などいろんな種類のファイルをアップロードする - はてなダイアリーのヘルプ