Codepen埋め込むとどうなるか。
CodepenのExport>EmbedPen
HTMLタブのコードをコピー
Tumblrは「HTML」モードにてペースト
See the Pen EmOpwN by イイダリョウ (@i_ryo) on CodePen.
うーむ、埋め込まれたけど、HTMLのウィンドウが見える状態になっている。
Resultのみの状態で埋め込みたい。
CodepenのEmbedPenでResultを表示した状態のコードをコピー
See the Pen EmOpwN by イイダリョウ (@i_ryo) on CodePen.
おお、表示された!
今度はHTMLタブではなくiframeタブのコードをコピー
HTMLタブは読み込みに少し時間がかかる印象だが、iframeタブの方が表示が早いかもしれない!
今度はTumblrの編集モードを「リッチテキスト」にして貼って見る。
<iframe height=‘265’ scrolling='no’ title='EmOpwN’ src=’//codepen.io/i_ryo/embed/EmOpwN/?height=265&theme-id=0&default-tab=result&embed-version=2’ frameborder='no’ allowtransparency='true’ allowfullscreen='true’ style='width: 100%;’>See the Pen <a href='https://codepen.io/i_ryo/pen/EmOpwN/’>EmOpwN</a> by イイダリョウ (<a href='http://codepen.io/i_ryo’>@i_ryo</a>) on <a href='http://codepen.io’>CodePen</a>.
</iframe>
あーだめだ。コードが素で表示される上、それまでのCodepenも表示されなくなった。「HTML」モードに戻す。
「HTML」モードにしたが前のCodepenは表示されないま。単なるリンクになっている。
もう一回さっきと同じ埋め込みコードを貼って再現。編集モードを途中で変えると問題が起こるっぽいなぁ
<
p>念のため「マークダウン」モードでも試すか。今度はこの文章をテキストエディタにコピペしてバックアップ。
貼ってみたところところ、iframeはそのまま活きているが、HTMLの方はまた単なるリンクになった。やはり「リッチテキスト」モードも完全ではない。バックアップで元に戻した。
しかし、iframeがいけるのならば、リッチテキストの方が編集はしやすい。今後はCodepenはiframe、Tumblrは「リッチテキスト」の組み合わせで行こうかな。