Hatena::ブログ(Diary)

k.144 Personal Note このページをアンテナに追加 RSSフィード Twitter

2013-04-20

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

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

はてなダイアリープラス」(有料オプション)を使うと、写真以外のファイルをアップロードできるようになります。
>>音声や動画などいろんな種類のファイルをアップロードする - はてなダイアリーのヘルプ

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

1.編集画面「ファイル」ボタン
f:id:k-144:20130420165955j:image:w480

2.「ファイル」ウィンドウ
f:id:k-144:20130420165957j:image:w640

記事に挿入

f:id:k-144:20130420165958j:image:w480

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

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

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

直接表示に書き換える

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

2.新規タブにリンク先のSVGファイルが表示される
f:id:k-144:20130420165959j:image:w480

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

4.画像ファイルのURLをコピーする
f:id:k-144:20130420170000j:image:w480

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

<img src="http://d.hatena.ne.jp/k-144/files/PD-icon.svg?d=y">
SVGファイルは画像フォーマットのひとつ。
<img>タグの「src」属性として指定し、画像表示させることができる。
>>外部SVGファイルを埋め込むには | HTMLのQ&A【OKWave】

現在では、最新版のブラウザならSVGに対応している。
>>第4回 ベクター形式のグラフィックを扱うSVGの基本 | Think IT

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

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/k-144/20130420/1366454676