ショートコード「presentation」、「slide」を使って、いろんなものを表示してみる

記事「WordPress.com のショートコードを使ってプレゼン用スライドを作ってみよう — ブログ — WordPress.com」において、ショートコード「presentation」、「slide」を使ってスライドを表示する機能について紹介されていますが、ここではいろんなものを貼り付けて表示させる実験を行ってみました。

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

貼り付けたものはこんな感じです。CSS での表示修正をかなり加えています。方法についてはこのブログですべて公開しています。

<div class="presentation-container" style="padding-bottom:130%;">
[presentation bgimg="http://comguideja.files.wordpress.com/2013/06/paper_fibers.jpg"]
[slide]テキスト
<h3>見出し3</h3>
<ul>
<li>箇条書き</li>
<li>箇条書き</li>
</ul>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>
<blockquote>引用文</blockquote>
<div class="caution">
注意書き
</div>
[/slide]
[slide]
<h5>YouTube</h5>
<div class="video-container">
https://www.youtube.com/watch?v=egJkNfQ8r6E
</div>
[/slide]
[slide]
<h5>code</h5>
[code lang="css"]/* リストのマークを差し替える -テーマ「Twenty Twelve」、左ボーダー+▶文字、水色- */
.entry-content ul li {
list-style-type: none;
position: relative;
padding-left:33px;
}
 
.entry-content ul li:before {
content: "▶";
position: absolute;
display: list-item;
left: 15px;
top: 7px;
color: #42beee;
border-left: 3px solid #42beee;
line-height: 8px;
font-size: 9px;
padding-left: 1px;
}[/code]
[/slide]
[slide]
<div class="video-container">
[wpvideo zPeGY0mG]
</div>
[/slide]
[slide]
<h5>表(テーブル)</h5>
<table width="387" border="1" cellspacing="0" cellpadding="2">
<tbody>
<tr>
<td valign="top" width="148">テーマの解説</td>
<td valign="top" width="237"><a href="http://theme.wordpress.com/themes/eventbrite-multi/">Eventbrite Multi-Event Theme — WordPress Themes for Blogs at WordPress.com</a></td>
</tr>
<tr>
<td valign="top" width="148">デモ</td>
<td valign="top" width="237"><a href="http://eventbritemultidemo.wordpress.com/">Eventbrite Multi</a></td>
</tr>
<tr>
<td valign="top" width="148">更新情報(英語)</td>
<td valign="top" width="237">-</td>
</tr>
<tr>
<td valign="top" width="148">〃(日本語)</td>
<td valign="top" width="237">-</td>
</tr>
<tr>
<td valign="top" width="148">日本語化ファイル<sup><a href="http://ja.naoko.cc/2012/03/22/get-wordpress-com-free-theme-translation/">*</a></sup></td>
<td valign="top" width="237"><a href="http://translate.wordpress.com/projects/wpcom/ja/default?filters%5Bterm%5D=themes%2Fpub%2Feventbrite-multi&amp;filters%5Buser_login%5D=&amp;filters%5Bstatus%5D=current_or_waiting_or_fuzzy_or_untranslated&amp;filter=Filter&amp;sort%5Bby%5D=priority&amp;sort%5Bhow%5D=desc">Translations &lt; Japanese &lt; WordPress.com &lt; GlotPress</a></td>
</tr>
</tbody>
</table>
[/slide]
[slide]<h5>ギャラリー</h5>
[gallery type="rectangular" ids="58032,58033,58034,58035"]
[/slide]
[slide]
<h5>ツイッター</h5>
https://twitter.com/bot_jihou_5min/status/387437312772038656
[/slide]
[slide]
<h5>Pinterest</h5>
http://www.pinterest.com/pin/153896512236281708/
[/slide]
[slide]
<h5>Facebook</h5>
https://www.facebook.com/photo.php?fbid=662393317112127&amp;set=a.474920635859397.113111.250061788345284&amp;type=1
[/slide]
[slide]
<h5>Google マップ</h5>
[googlemaps https://maps.google.com/maps/ms?ctz=-540&amp;ie=UTF8&amp;msa=0&amp;msid=211113136758264425541.0004b0f93569560d8275f&amp;t=m&amp;source=embed&amp;iwloc=0004b108aa4c14a502155&amp;ll=34.690498,135.191016&amp;spn=0.016938,0.027466&amp;output=embed&amp;w=425&amp;h=350]
[/slide]
[slide]
<h5>Google カレンダー</h5>
<div class="google-calendar">
[googleapps domain="www" dir="calendar/embed" query="src=wpja.team%40gmail.com&amp;ctz=Asia/Tokyo" width="800" height="600" /]
</div>
[/slide]
[/presentation]
</div>

 

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

WordPress.com ロゴ

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

Google フォト

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

Twitter 画像

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

Facebook の写真

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

%s と連携中

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