クモのようにコツコツと

Webデザイナー イイダリョウのブログ。略称「クモコツ」

TumblrにCodepen埋め込みテスト

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は「リッチテキスト」の組み合わせで行こうかな。