[WordPress.com] プレゼン用スライドのレスポンシブ対応についての検討

先日、WordPress.com より、プレゼン用スライドを表示するためのショートコード「presentation」、「slide」(※ セットで使う)がリリースされました。

使い方については、おおむね、上記ページのスライドの方でわかるようです。

ここでは、このプレゼンの iPad や iPhone 等での表示について検討してみました。結論から言うと、iPad では OK、iPhone 等ではダメ(CSS で制御できない部分の修正が必要)でした。

例えば、記事に以下の記述(※ ショートコード「presentation」、「slide」で作成したスライドの記述をタグ<presentation-container></div>で囲む)を追加し、

<div class="presentation-container" style="color:white;">
[presentation transition="down" bgimg=http://comguideja.files.wordpress.com/2013/08/sdfsdsd.png ]
[slide]
<h3>タイトル</h3>
本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文

[/slide]
[slide transition="left" scale=5]
<h3 style="text-align:center;">見出し3</h3>
てすてす
<h4>見出し4</h4>
てすてす
<h5>見出し5</h5>
てすてす
[/slide]
[slide rotate="45"]
<ul>
<li>箇条書き</li>
<li>箇条書き</li>
<li>賀状書き</li>
</ul>
[/slide]
[/presentation]
</div>

以下の CSS を CSS スタイルシートエディターに追加すると、

/* ショートコード「Presentation」のレスポンシブ対応 ver.0.1 
https://simple-note.appspot.com/publish/F6vSVn
*/
.presentation-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    margin-bottom: 85px;
}

.presentation-container:before {
    content: "※ 右下のボタンをクリックすると全画面表示になります。なお、 iPhone 等では動作しません。";
    position: absolute;
    top: 100%;
    margin-top: 25px;
    right: 20px;
    left: 40%;
    background-color: #666;
    background-color: rgba(0,0,0,0.600);
    border-radius: 0 0 5px 5px;
    border: 1px solid #ccc;
    text-align: left;
    line-height: 12px;
    z-index: 1;
    color: #fff;
    text-shadow: -1px -1px 1px #777;
    font-size: 10px;
    text-indent: -12px;
    padding: 4px 7px 4px 18px;
    opacity: .6;
}

.presentation,
.presentation-wrapper {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
}

div:not(.presentation-wrapper-fullscreen-parent) .presentation-wrapper {
    border: 6px solid #eeeeee !important;
    border-radius: 3px;
}

.presentation > div:last-child {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    width: 100% !important;
}

.presentation > div > div {
    position: absolute !important;
    width: 100% !important;
    left: 50%;
}

.presentation .step {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
}

.presentation .slide-content {
    left: 50%;
    position: relative;
}

.presentation-wrapper-fullscreen-parent,
.presentation-wrapper-fullscreen-parent h3,
.presentation-wrapper-fullscreen-parent h4,
.presentation-wrapper-fullscreen-parent h5 {
    font-size: 105%;
}

以下のような感じでスライドを縦横に伸び縮みさせることができました。

スライドショーを開始できませんでした。ページを再読み込みするか、他のブラウザでお試しください。

右下のタグは、記事「引用文の右下にタグをつける」のものをもとにして追加しました。

縦横の伸び縮みについては、記事「[WordPress.com] SlideShare をレスポンシブ対応させる方法についての考察」のものを参考にしました。

縦横の比は、「padding-bottom: 56.25%;」のところの数値をいじってください。大きな数字を入れるほど縦長になります。

改良の余地はあると思いますが、とりあえず公開しておきます。

 

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

WordPress.com ロゴ

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

Google フォト

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

Twitter 画像

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

Facebook の写真

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

%s と連携中

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