16bit!

エンジニアじゃなくなっちゃった人が何かを書くブログ

Speaker Deck のスライドをはてなブログにサイズ指定して埋め込む方法

先日のみゃーもりの真摯さの記事を書く際に、Speaker Deckにある@konifarさんのスライドを埋め込んだのですが、Speaker Deckのスライドをサイズ指定してはてなブログに埋め込むのにはちょっとコツが要りそうでしたので書いておきます。
ちなみにはてな記法モードです。

①まず、Speaker Deckで埋め込みたいスライドにアクセスし、右のメニューから"Embed"をクリック
②するとポップアップにタグが表示されるので、はてなブログの記事編集欄にそのままコピペ

ここまででとりあえず記事への埋め込みはできるのですが、このままではスライドが記事の横幅いっぱいに表示されるのではないかと思います。
Slide Shareの方は埋め込みタグの生成時にサイズの指定もできるみたいなのですが、Speaker Deckにはその機能が無いので、サイズの指定は自分でやってあげるしかありません。
方法は、

③埋め込んだタグを以下のようにdivタグで囲んでサイズ指定する

<div style="max-width: XXXpx">埋め込んだタグ</div>

です。
無理矢理ですが、これでスライドのサイズを調整できます。
ちなみにwidthではなくmax-widthで指定しているのはレスポンシブ対応というか何と言うかのアレです。

サンプル

最後にサンプルとして、さっきSpeaker Deckをうろうろして見つけたスライドを埋め込んでおきます。
7,000円で社内ジュークボックス作れるの、相当楽しいのでは?

終。