Pickupニュース

Adobe AnimateのパブリッシュファイルをWordPressに挿入してみる
コラム

Adobe AnimateのパブリッシュファイルをWordPressに挿入してみる

Adobe AnimateのCanvas形式でパブリッシュしたファイルをiframeでWordPressに挿入してみるテストです。

Adobe Animateの設定

Animateのキャンパスサイズ

既定値で作成することを想定しているので、ここでは16:9比率の854 x 480 pxとします。

レスポンシブの設定

パブリッシュファイルをレスポンシブ対応にするために、表示に合わせて拡大・縮小するようにチェックします。

プリローダーの設定

ローディングアニメーションの表示用に、プリローダーを含めるようにチェックします。

JavaScriptの組み込み設定

なるべく1ファイルで完結させたいので、アニメーションなどの設定が記述されるJavaScriptファイルをHTMLファイルに組み込むように設定します。
この条件でAnimateでファイルを作成し、パブリッシュします。

パブリッシュファイルの配置

サーバーにパブリッシュファイルを配置するディレクトリを新規作成し、その中にパブリッシュファイル一式をアップロードします。
ここではトップディレクトリにwp-animateとしています。

ショートコードの設定

functions.phpに以下のようにショートコードの設定を記述します。
PHPCopy
function insert_animate($atts){ extract( shortcode_atts( array( 'id' => '' //Animateのファイル名 ), $atts ) ); return '<div class="iframe-content"><iframe src="https://tech.jastin.net/wp-animate/'.$id.'.html" width="854" height="480">loading animate</iframe></div>'; } add_shortcode( 'animate', 'insert_animate' );

スタイルシートの設定

iframeコンテンツをレスポンシブ対応させるために、CSSに以下のように記述します。
CSSCopy
.iframe-content{ width: 100%; padding-bottom: 56.25%; margin: 5px 0; position: relative; } .iframe-content iframe{ margin: 0; position: absolute; top: 0; right: 0; width: 100%; height: 100%; }

Animateの埋め込みデモ

上記の設定でAnimateを埋め込んでみました。

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください