「CodePen」のデザインを変更・カスタマイズする

公開日: : サイト用素材

タブのデザインを変更する

「Result」が「HTML」や「CSS」、「JS」と並列に並んでいるこのデザインを使いたいのに、今「CodePen」で初期に吐き出されるタブデザインは、これやこれ↓。

codepen_tab2_dark

codepen_tab2_light

デザイン的にはこっちの方がかっこいいのかもしれないけど、何が嫌かって…

それは「Result」表示が、半分のスペースになるので(「HTML」「CSS」「JS」すべてが非選択のときのみ「Result」が全表示になるんだけども)、デザインが崩れて表示されやすい。

↓こんな感じに…。

codepen_tab2_dark_contents

なので、他のサイトさんでよく使われている

↓このデザイン

codepen_tab1

にしたいんだけど、どうしたらいいのか分からない。

いろいろいじくってみて、「Copy & Paste Code」のHTMLを触ればよいことが分かりました。

<p class="codepen" data-embed-version="2" data-user="kajilabo" data-default-tab="result" data-slug-hash="zBZKXJ" data-theme-id="25025" data-height="300">See the Pen <a href="http://codepen.io/kajilabo/pen/zBZKXJ/">zBZKXJ</a> by kajico (<a href="http://codepen.io/kajilabo">@kajilabo</a>) on <a href="http://codepen.io">CodePen</a>.</p>
<script src="//assets.codepen.io/assets/embed/ei.js" async=""></script>

の頭の方のコード、 data-embed-version="2" の数字を 1 に変更すれば、旧バージョンのデザインに変更できました。

ちなみに、data-height="300" の数値を変更すれば、コンテンツエリアの高さが変更できます。



関連記事

記事はありませんでした

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

no image
エコノミークラス症候群

エコノミークラス症候群とは?  エコノミークラス症候群は、旅行に関連

no image
巻き爪・陥入爪

巻き爪・陥入爪ってなに?  巻き爪とは、主に親指の爪の両端が「巻く」

no image
結婚お祝い金

披露宴に出る場合 祝儀袋の渡し方  受付でお祝いの言葉を述べ、祝儀

no image
結婚祝い

お祝い品選びと費用 お祝い品の選び方  新居を構える二人には、生活

no image
ダニ除去マニュアル

ダニ除去マニュアルについて  基本的なダニアレルゲン対策としては、

→もっと見る

PAGE TOP ↑