subtechild

Playful Technology & Design.

はてなブログテーマDUDEでCodepen埋め込み時にきちんと表示されるようにCSSをカスタマイズしました。

DUDE使ってます

tsukuruiroiro.hatenablog.com

私はこのテーマが大好きで最初からこちらを使わせていただいてます。 かなり完成されているのでほとんどいじっていなかったんですけど、 先日記事を書いている時に思わぬ落とし穴が。

Codepenの埋め込みをするとResultが同時に表示されないよ

コーダー御用達のCodepenの埋め込みをするとこのように、 コードと一緒にResult部分が見れなくなっているのです。

f:id:nknkt:20170114180926p:plain

これはCodepenの表示がある幅からコンパクトに収まるようになっているからです。 記事部分の幅がそのある幅に足りていないようです。

(ある幅までちゃんと調べてません、すいません)

投稿記事部分とそれに合わせて右のカラムの調整をする

以下のCSSをカスタムCSSに追加しています。 (幅1024pxの15インチの画面までの対応を想定しています)

/* contents幅の調整 */
#container #content {
    width: 990px;
}

#main {
    width: 650px;
}

@media (max-width: 1024px) and (min-width: 768px) {
#main {
    width: 70%;
    }

#box2 {    
    width: 25%;
    }
}

#contentは記事と右のカラム全てを含んでいます。 #mainが左のカラム、記事部分となっています。 #box2は右のカラムです。

不自然でない程度に少しづつ表示する幅をデフォルトより広げています。 元々の空白の取り方が綺麗なのでなるべくギリギリまでしか広げません。

結果こうなる

f:id:nknkt:20170114182102p:plain

おそらく微妙な調整すぎてぱっと見は見た目の変化には気づかないかもしれませんが、 コンテンツ部分に幅ができたので、Result部分を表示することができるようになりました。

用途によって幅は調整してください

今回はCodepenの表示を目的に幅は設定したので、 似たような悩みで別のサービスを貼りつけたい時などは それに合わせて幅を変えていくといいと思います。

Chromeデベロッパーツールでプレビューしながら幅を変えてみることができるので、 そちらで最適な数値を見つけてもらうのがいいかと思います。