はてなダイアリーに各種スライド資料URLを貼る時のテンプレートまとめ

はてな

ブログエントリ内に都度資料を貼る際、過去エントリの内容から情報を引っ張ってくるのが割と面倒だったりするので、備忘録的にエントリとして書き出しておこうと思う。

Slideshare

公式HP：

Slideshareについては過去調べて書いたものがあるのでそちらに転送。

基本的な手順としては以下のような感じで情報作成してます。

  • スライドURLにアクセス
  • 資料上部にある[embed]ボタン押下→[copyボタン押下]でテキスト情報をコピー
  • ペースト
  • そのままの状態では上手く認識してくれないので不要な属性を削除(削除箇所は上記エントリを参照)
  • <strong>の内容をカット(タイトル含めた情報は別に編集・追記するため、クドくなるので個人的にはこの部分をカットしてる)
  • 表示サイズを任意の大きさに変更(widthのみで1箇所、width - heightのペアで1箇所。【widthの80%＝height】位の割合で設定すると程々な感じに落ち着くと思う)
  • 保存して内容を確認(プレビューでは表示されない)

Speaker Deck

公式HP：

こちらも最近良く見るようになってきたスライドです。進め方は以下。

  • スライドURLにアクセス
  • 資料下部(右下)にある[share]ボタン押下→[embed]ボタン押下→初期設定値(The Beginning of the Presentation)選択時に表示されているテキスト要素をコピー。
  • 内容的には以下の形式で値が取れる。ここの[data-id]属性を使う。
<script async
    class="speakerdeck-embed"
    data-id="(data-idの値)"
    data-ratio="1.299492385786802"
    src="//speakerdeck.com/assets/embed.js">
</script>
  • 以下のようなhtmlタグを生成し、貼り付けて使う。
<div style="width:(任意の横幅)px;"><script src="http://speakerdeck.com/embed/(data-idの値).js"></script></div>
※個人的には以下のテンプレートで貼る事が多いので別途追記。
<div style="width:800px; padding-left:60px"><script src="http://speakerdeck.com/embed/(data-idの値).js"></script></div>

Cacoo

Cacooでもスライド作れるとは！そしてはてなダイアリーへの貼り方も以下の手順で行けました。(表示サイズも変えたいとこだけど出来るのかしら？)


他にもより良い方法、または新たなその他のスライド資料(の貼り付け方法)の情報があれば追記して行こうと思います。

補足：任意のページURL情報をはてなダイアリーに貼り付けるときのメモ

スライド資料ではないのですが、特定のWebページURL情報をはてなダイアリーに貼り付けるときは以下の手法でテキスト情報を取得して使ってます。(※Hatena Bold Style)