【CodePen】高さをカスタマイズする方法

はじめに
今までやっていた高さ変更のやり方
簡単に高さ変更をするやり方
おわりに

はじめに

CodePenを埋め込む場合に簡単に高さを変更するやり方についてメモしておきます。

CodePenを何度か使ったことがありますが、最近まで高さの変更が簡単にできることを知らなかったので同じ人がいたら参考にしてください。

対象者

CodePenの高さを簡単に変更する方法を知りたい方

それでは説明に移ります。

今までやっていた高さ変更のやり方

私の場合、CodePenを使っていて高さを変更したい場合は以下のように直接コードを変更していました。

変更前

<p class="codepen" 
data-height="300" 
data-theme-id="dark" data-slug-hash="RwgQabx" data-user="shuu11" 
style="height: 300px; 
box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/shuu11/pen/RwgQabx">
  </a> by shuu11 (<a href="https://codepen.io/shuu11">@shuu11</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

変更後

<p class="codepen" 
data-height="500" 
data-theme-id="dark" data-slug-hash="RwgQabx" data-user="shuu11" 
style="height: 500px; 
box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/shuu11/pen/RwgQabx">
  </a> by shuu11 (<a href="https://codepen.io/shuu11">@shuu11</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

変更箇所をハイライト表示させています。

高さ設定のプロパティが変更されているのが分かります。

ただ貼り付けたコードを手動で変更するのはあまりしたくないですよね。

ということでもっと簡単に高さ変更をするやり方を紹介します。