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

Tweet

Pocket

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

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

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

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

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

スポンサーリンク

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にアップロードできます。

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

『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

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

まとめ

SlideShareの登録方法、スライドの公開、WordPressサイトへの埋め込み方法までを紹介しました。

それ以外にも、スライドのダウンロードや、SlideShareのユーザー同士と交流ができたりと、様々な活用方法があるようです。気になる方は調べてみてください。

特に、IT系の方で使っている人が多いので、エンジニアやSEの方はこの機会にSlideShareの使い方を覚えておくといいですね。

Tweet

Pocket

okutani (okutani_t) のヒトコト

okutani_t

今まで、プレゼン資料を共有するといったことがなかったので、SlideShareを使ってみて新しい発見がありました。やれることの幅が広がっていいですね！