『JSFiddle』を使用してWeb開発などのプロジェクトを共有したとき、埋め込み後にディスプレイ変更をする方法について。
-
デフォルト表示タブを"Result"などの任意に変更
- ボックスのダークモード⇔ライトモード切り替え
カスタムURLなど埋め込みコードの調整により、望む通りの表示に。
<iframe width="50%" height="570px" src="//jsfiddle.net/shianly/jgoahb26/embedded/" allowfullscreen="allowfullscreen" allowpaymentrequest="" frameborder="0"></iframe>
Resultを最初に見せたいので
<iframe width="50%" height="570px" src="//jsfiddle.net/shianly/jgoahb26/embedded/result,js,html,css/" allowfullscreen="allowfullscreen" allowpaymentrequest="" frameborder="0"></iframe>
Reslut、html、css、JavaScriptの順に変更。
↑のように/embedded/以下、URLの末尾にresult,js,html,css/とコードを追記すると、最初に指定したタブがデフォルトで開かれるようになる。順番を入れ替えれば左からその順番でタブが並び、追記しないタブは表示されない。
埋め込み時のデフォルトではjsからになってる。
また、そのさらに後ろに/dark/と追記するとダークモードに、なにも書かなければライトモードでディスプレイされる。
