SlideShareに登録してスライドを公開してみよう

2015/11/29 2017/01/31

Pocket

こんにちは、okutani(@okutani_t)です。最近、『SlideShare』というサイトをよく目にするようになりました。

SlideShareは文字通り『スライドを共有』できるサイトです。勉強会やLTで使ったスライドなどをSlideShareで公開しておけば、使い終わったあとでも無駄なくスライドを有効活用できますね。

スライドをアップロードして公開するだけであれば無料で利用できるため、手軽に始められるのも魅力のひとつですね。

本記事では『SlideShareの登録方法』『スライドのアップロードから公開まで』、最後に『WordPressサイトへスライドを埋め込む方法』を紹介しています。

では、さっそくSlideShareの登録方法から見ていきましょう。

1 SlideShareの登録方法
2 スライドを公開してみよう
3 WordPressサイトにスライドを埋め込んでみる
- 3.1 スマートフォンでの表示崩れを防ぐ
4 まとめ

SlideShareの登録方法

まずはSlideShareの公式ページに移動します。移動したらTOPページ右上の『Signup』をクリック。

LINKShare and Discover Knowledge on LinkedIn SlideShare

SlideShareの登録は『Email』もしくは『LinkedIn』『Facebook』のアカウントを使うことができます。

今回はEmailを使って登録を進めました。

『Email』『ユーザー名』『パスワード』を入力、入力後に出てくる画像の文字を入力し、『Signup』をクリック。

登録が完了すると、そのままSlideShareにログインした状態でTOPページに飛びます。

右上のアイコンをクリックして、自分のユーザー名が表示されれば、SlideShareにログイン済みということが確認できますね。

登録したメールアドレス宛に、次のようなメールが届きます。『Confirm email』をクリックして認証しておきましょう。

これでSlideShareが利用できるようになりました。

スライドを公開してみよう

SlideShareの登録が済んだら、次は実際にスライドを公開してみましょう。

サイト右上にある『Upload』をクリック。

『Select files to upload』を選択、もしくはここにファイルをドラッグ＆ドロップします。

公開したいファイルを選択します。今回はPDFファイルを選択してみました。

ちなみに、下記の拡張子付きのファイルであればSlideShareにアップロードできます。

PowerPoint(.ppt等)
OpenOffice(.odp等)
Keynote(.key)
Microsoft Office(.doc, .xls等)
PDFファイル(.pdf)
テキストファイル(.txt)
動画ファイル(mp4, m4v, wmv, mpeg, avi等)

タイトル、注釈、タグ、カテゴリなどの詳細設定をおこないます。

Title

スライドのタイトルを入力。

Description

スライドの注釈を入力。

Category

スライドのカテゴリーを選択。

Privacy

スライドを公開にするか非公開にするか選択。今回は公開の『Public』を選択。

Tags

スライドに関連したタグを入力し、選択。

Discoverability Score

スライドの見つけやすさ。タイトルや注釈、カテゴリー、タグを適切に設定するとスコアが上がる。

Add a lead form

ここにチェックを入れるとビジネス用に最適化される？ようです。詳しいことが分かったら追記します。

『Publish』を押して公開します。ちなみに、この設定情報はアップロード後に変更可能です。

これでスライドがSlideShareに公開されました。

このページのURLをメモして置いて、シェアしたい人に送れば、スライドを共有することができますね。

WordPressサイトにスライドを埋め込んでみる

このスライドを、WordPressサイトに埋め込む方法を最後にご紹介します。

先ほどのスライドが公開されている画面で『Share』を選択、『WordPress Shortcode』のコードをコピーします。

ちなみに、WordPress以外のサイトに埋め込みたい場合は、『Embed』のコードをコピーして利用すればOKです。

次に、WordPress管理画面から『SlideShare for WordPress by Yoast』というプラグインをインストールします。

『プラグイン』→『新規追加』→『SlideShare for WordPress by Yoast』で検索し、インストール。

インストールが終わったあと、有効化するのを忘れずに。

先ほどコピーしたSlideShareのコードを、WordPressの投稿画面に貼り付けて投稿してみます。

このとき、『テキストモード』で貼り付けるようにしましょう。ビジュアルモードだとただの文字として投稿されてしまうので注意してください。

当ブログはWordPressで運営しているので、次のように埋め込んでみました。無事に表示されているでしょうか？(スライドは以前使った勉強会用のスライドです)。

スマートフォンでの表示崩れを防ぐ

実は、このままだとスマートフォンで大きく表示されはみ出してしまってレイアウトが崩れてしまいます。

次のHTMLとCSSでスマホ対応しました。まずは先ほどの埋め込み用コードをdivタグで囲っておきます。

<div class="slideshare">
  ここにSlideShareの埋め込みコード
</div>

次に、style.cssなどのCSSファイルに下記を記述します。

/* slideshareスマホ対応 */
.slideshare {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 79%;
  margin-bottom: 20px;
}
.slideshare iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: 580px;
  max-height: 1000px;
}

適宜、padding-topやmax-widthの値を調整して使ってみてください。

参考SlideShare の埋め込み表示をレスポンシブ対応させる – HAM MEDIA MEMO

プレゼン資料をブログで紹介したいときなどに、ぜひ活用してみてください。