CodePenを使ってSVGアニメをサイトに埋め込む方法
動画を自分のサイトに入れる場合、ひとまず、Youtubeに登録し、それを自分のサイトに埋め込むようにするが、SVGアニメを入れる場合は、CodePenに登録するのがよいみたいだ。そうすれば、CodePenでSVGの再生テストを行うことができる。いろんなブラウザでの動作テストまで無料でできるのでお勧め。その手順を以下にまとめる。
- SVGアニメを作る
- CodePenに登録
- 自分のサイトにCodePenをいれる
1.SVGアニメを作る
- 9va-pi でアニメを作成
- 「ファイル」>「名前をつけて保存」
- 右下のファイル属性を「9VA/EVA」から「SVG」に変更して保存
2.CodePenに登録
- 上で保存した、SVGファイルをテキストエディタで開く
- CodePenサイトをブラウザで開く
- ログイン (初めて開いたときはユーザー登録を行う。無料版でよい)
- 「NewPen」をクリック
→エディタ画面が開く - 一番左の 「HTML」の中にSVGファイルの中身をコピペする
→下にアニメが表示されればOK - 上の「Save」ボタンをクリック
→「Fork」「Info」「Share」が表示されればOK - 「Info」をクリックし、タイトルと説明を英語で入れる(後から入れてもよい)
- 「Share」をクリック→パネルが表示される
- 「Embed」をクリック→アニメが表示されればOK
- 「drag to resize」をドラッグしてアニメ全体が見える(スクロールバーが消える)ようにする
- 上の「Copy & Paste Code」をクリック
→この中のテキストを自分のサイトにいれれば、CodePenに登録したSVGアニメが埋め込まれる 。いったんテキストエディタにコピペしておくとよい。 - 埋め込みコードをテキストエディタにコピペしたら、右上の✕ボタンで閉じてよい。
- ブラウザのアドレスバー(CodePen.io/.../xxx)の最後をメモしておく。これが埋め込みCodeの「data-slug-hash=」の値になる。
- 右上の「Editor」をクリックし、メニューから「Open on CrossBrowserTesting」をクリックすると、作成したSVGアニメが、いろいろな端末、ブラウザでどのように見えるかテストすることができる。
3.自分のサイトにCodePenを入れる
- 自分のサイトの新しいページを開く
- ソースコードを開く
- 上でコピーした CodePenの埋め込みコードをコピペして入れる
- ブラウザで見えるかどうか確認する。
0 件のコメント:
コメントを投稿