SlideShareに登録してスライドを公開してみよう
2017/01/31
おすすめ記事個人開発のWebアプリがツイッター世界トレンド1位になったけどいろいろ辛かった話 #チョコボックス裏話 | vdeep
こんにちは、okutani(@okutani_t)です。最近、『SlideShare』というサイトをよく目にするようになりました。
SlideShareは文字通り『スライドを共有』できるサイトです。勉強会やLTで使ったスライドなどをSlideShareで公開しておけば、使い終わったあとでも無駄なくスライドを有効活用できますね。
スライドをアップロードして公開するだけであれば無料で利用できるため、手軽に始められるのも魅力のひとつですね。
本記事では『SlideShareの登録方法』『スライドのアップロードから公開まで』、最後に『WordPressサイトへスライドを埋め込む方法』を紹介しています。
では、さっそく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
- Tags
- Discoverability Score
- Add a lead form
スライドのタイトルを入力。
スライドの注釈を入力。
スライドのカテゴリーを選択。
スライドを公開にするか非公開にするか選択。今回は公開の『Public』を選択。
スライドに関連したタグを入力し、選択。
スライドの見つけやすさ。タイトルや注釈、カテゴリー、タグを適切に設定するとスコアが上がる。
ここにチェックを入れるとビジネス用に最適化される？ようです。詳しいことが分かったら追記します。
『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の使い方を覚えておくといいですね。
Web開発のお仕事を募集しています
フリーランスのエンジニアとして、Webシステム開発のお仕事依頼を随時募集しています（現在の業務量によってお受けできない場合もあります）。
「Ruby on Rails」「JavaScript（jQuery, Reactなど）」「HTML + CSS」を用いたシステム開発、「Heroku」等を用いたサーバー構築・運用、「Git」や「GitHub」を利用したソーシャルコーディングなどに対応しています。
ご依頼を検討している方は、下記リンク本ブログからのお問い合わせ、もしくはokutaniのポートフォリオからご連絡ください。
LINKお問い合わせ
スポンサーリンク
