html CanvasをWordPressに貼り付ける際のいろいろメモ。
iframeで表示
- html CanvasをWordPressに表示する際にはiframeを使う
WordPressのカスタムhtmlに下記を記入（コード欄は右にスクロールします）
//iframeを画面中央表示
<div class="iframe-wrapper" style="text-align: center;">
<iframe id="html5" title="タイトル" src="canvasのURL" width="サイズ" height="サイズ" frameborder="0" scrolling="no">
<br /></iframe></div>表示サイズを変えてみるテスト
Animateのパブリッシュ設定でレスポンシブ、表示領域いっぱいに拡大縮小 にチェックが入っている場合はiframeのサイズに合わせて表示されます。
「動く絵日記 １日目」のCanvasを表示するiframeサイズを変えてみるテスト
width=”340″ height=”200″
width=”680″ height=”400″
iframe のサイズに合わせてCanvasも枠いっぱいに表示されました
canvasでの右クリックを非表示にする
右クリック禁止の設定
Adobe Animateを使って書き出す場合
AnimateでCanvasを書き出すなら0フレーム目に以下を追加
document.querySelector("canvas").addEventListener("contextmenu", () => {
event.preventDefault();
});htmlページのbody要素に追加する場合
canvasを表示するhtmlページのbodyタグに以下を追加
<body onContextmenu="return false;">関連記事 JavaScript
めもめも