2015年1月6日火曜日

CodePenを使ってSVGアニメをサイトに埋め込む

CodePenを使ってSVGアニメをサイトに埋め込む方法

動画を自分のサイトに入れる場合、ひとまず、Youtubeに登録し、それを自分のサイトに埋め込むようにするが、SVGアニメを入れる場合は、CodePenに登録するのがよいみたいだ。

そうすれば、CodePenでSVGの再生テストを行うことができる。いろんなブラウザでの動作テストまで無料でできるのでお勧め。その手順を以下にまとめる。
  1. SVGアニメを作る
  2. CodePenに登録
  3. 自分のサイトにCodePenをいれる

1.SVGアニメを作る

  1.  9va-pi でアニメを作成
  2. 「ファイル」>「名前をつけて保存」
  3. 右下のファイル属性を「9VA/EVA」から「SVG」に変更して保存

2.CodePenに登録

  1.  上で保存した、SVGファイルをテキストエディタで開く
  2.  CodePenサイトをブラウザで開く
  3. ログイン (初めて開いたときはユーザー登録を行う。無料版でよい)
  4. 「NewPen」をクリック
    →エディタ画面が開く
  5. 一番左の 「HTML」の中にSVGファイルの中身をコピペする
    →下にアニメが表示されればOK
  6. 上の「Save」ボタンをクリック
    →「Fork」「Info」「Share」が表示されればOK
  7. 「Info」をクリックし、タイトルと説明を英語で入れる(後から入れてもよい)
  8. 「Share」をクリック→パネルが表示される
  9. 「Embed」をクリック→アニメが表示されればOK
  10. 「drag to resize」をドラッグしてアニメ全体が見える(スクロールバーが消える)ようにする
  11. 上の「Copy & Paste Code」をクリック
    →この中のテキストを自分のサイトにいれれば、CodePenに登録したSVGアニメが埋め込まれる 。いったんテキストエディタにコピペしておくとよい。
  12. 埋め込みコードをテキストエディタにコピペしたら、右上の✕ボタンで閉じてよい。
  13. ブラウザのアドレスバー(CodePen.io/.../xxx)の最後をメモしておく。これが埋め込みCodeの「data-slug-hash=」の値になる。
  14. 右上の「Editor」をクリックし、メニューから「Open on CrossBrowserTesting」をクリックすると、作成したSVGアニメが、いろいろな端末、ブラウザでどのように見えるかテストすることができる。

3.自分のサイトにCodePenを入れる

  1. 自分のサイトの新しいページを開く
  2. ソースコードを開く
  3. 上でコピーした CodePenの埋め込みコードをコピペして入れる
  4. ブラウザで見えるかどうか確認する。
自分のサイトへの入れ方は、サイトの作り方によって違う。

0 件のコメント:

コメントを投稿