[WordPress.com] SlideShare をレスポンシブ対応させる方法についての考察

※ この SlideShare は、レスポンシブ対応されていることを示すためのサンプルであり、SlideShare の内容は、本記事とは関係ありません。

以下のCSSを追加し、

 /* SlideShare のレスポンシブ対応 */
.slideshare-container {
	position: relative;
	padding-bottom: 78%;
	height: 0;
	margin-bottom: 45px;
}

.slideshare-container iframe,
.slideshare-container object,
.slideshare-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.entry-content img, #content embed, #content object, #content iframe, #content video {
	border: 1px solid #eee!important;
	padding: 6px!important;
	background-color: rgba(230,230,230,0.4)!important;
	border-radius: 3px;
}

以下のように SlideShare のショートコードを貼り付けると、

<div class="slideshare-container">[slideshare id=15002576&doc=random-121102170659-phpapp01]</div>

SlideShare がレスポンシブ対応するようです。 縦横の比を調整するには、「.slideshare-container」の「padding-bottom:78%」のところの数値を変えればいいようです。

また、

.entry-content img, #content embed, #content object, #content iframe, #content video {
	border: 1px solid #eee!important;
	padding: 6px!important;
	background-color: rgba(230,230,230,0.4)!important;
	border-radius: 3px;
}

の部分は、レスポンシブ対応と、一見、関係がないように思いますが、これを追加しておかないと、なぜか、iPad や ipod touch5 で以下のような現象が起こってしまいます(2013年2月1日現在)。このあたりは、テーマの種類によって、不必要だったり、修正が必要だったりすると思います。

なお、このような現象は、WordPress.com に限らず、SlideShare を添付しているいろんなウェブサイトで散見されるため、WordPress.com 固有の現象ではないものと考えています。


SlideShare と同様のサービスらしい「Speaker Deck」のレスポンシブ対応も同様の方法で OK のようです。
参考にした記事

 

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。