ブログに貼り付けた CodePen の表示領域の高さを変える

CodePen の Embed を貼り付ける際に、Embed を縦長にする方法。

• 幅・高さが不明な要素を上下左右中央配置する

実際のコードは以下のとおり。これは CodePen の「Embed」からコピペできる「HTML (recommended)」タブに出るコード。

<p data-height="450" data-theme-id="0" data-slug-hash="zrQWQo" data-default-tab="result" data-user="Neos21" class='codepen'>See the Pen <a href='http://codepen.io/Neos21/pen/xxxxxx/'>幅・高さが不明な要素を上下左右中央配置する</a> by Neos21 (<a href='http://codepen.io/Neos21'>@Neos21</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

このコードをコピーできる画面をよく見ると、Embed のサンプルの下に「drag to resize」と書いてある。ココをドラッグして上下に動かすと、Embed の領域の高さを変更できる。それに応じて、Embed のコードが変わる。

変わるコードの部分は <p data-height="450" の数字部分。つまりこの数字を手で変えてあげるだけでも良い。

おわり。