2026年11月12日

2026年11月12日

WordPressのSlideShareを埋め込む方法

はじめに

WordPressでプレゼンテーションや講義資料を共有したい場合、SlideShareは理想的なプラットフォームです。この記事では、SlideShareのプレゼンテーションを簡単にWordPressサイトに埋め込む方法を紹介します。

SlideShareは、オンラインでプレゼンテーションを共有するための無料サービスであり、ユーザーが自分のコンテンツを世界中の人々と共有することができます。ここでの目標は、WordPressサイト上でこれらのプレゼンテーションを容易に表示し、読者にも共有できるようにすることです。

症状・背景

このテーマが必要になる主な場面:

  • オンライン講義やセミナーの資料を共有する
  • ビジネスプレゼンテーションを顧客と共有する
  • 教育用教材として学生に配布する
  • 社内の情報共有ツールとして利用する

手順・設定方法

ステップ1: SlideShareプレゼンテーションIDを取得

まず、スライドが公開されているURLからプレゼンテーションIDを抽出します。

# プレゼンテーションのSlideShare URLを確認してください。
https://www.slideshare.net/<ユーザー名>/<プレゼンテーション名>

# 上記URLから「/」で区切られた最後の2つの部分(ユーザー名とプレゼンテーション名)がIDとなります。

ステップ2: WordPressの投稿またはページで埋め込みタグを使用する

次に、WordPressでのHTMLエディター内で埋め込みコードを追加します。

# 投稿やページの編集画面を開きます。
# HTMLエディターに移動し、以下の埋め込みタグを入力します。
<iframe src="https://www.slideshare.net/slideshow/embed_code/key/<プレゼンテーションID>" width="640" height="515" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen></iframe>

# 必要に応じて、幅や高さを調整します。

ステップ3: カスタムCSSでデザインを調整する

プレゼンテーションがサイトのデザインと統一感を持つようにカスタムCSSを使用します。

# WordPressダッシュボードから「外観」→「編集」を選択し、style.cssを開きます。
# 以下のCSSコードを追加して、iframe内のスタイルを調整します。
<style>
    .slideshare-embed iframe {
        border: none;
        width: 100%;
        height: auto;
        max-width: 800px; /* プレゼンテーション幅の最大値 */
        margin-left: auto;
        margin-right: auto;
    }
</style>

# 必要に応じて、他のCSSプロパティもカスタマイズできます。

ステップ4: 埋め込みタグを追跡コードで囲む(オプション)

プレゼンテーションの利用状況を把握するにはGoogleアナリティクスなどのトラッキングコードを使用します。

# Google Analyticsや他のトラッキングサービスから取得したJavaScriptコードを、以下の埋め込みタグ周辺に追加します。
<script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-XXXXX-Y', 'auto');
    ga('send', 'pageview');
</script>

# 以上のJavaScriptを埋め込みタグの直前に挿入します。

注意事項

  • <実践的な注意点1>: 埋め込むプレゼンテーションがSlideShareから削除された場合、エラーメッセージが表示されることがあります。最新のURLとIDを確認してください。
  • <実践的な注意点2>: プレゼンテーションは非公開設定の場合、外部からのアクセスができませんので、必ず公開に設定する必要があります。
  • <セキュリティ上の注意>: 第三者が埋め込んだスライドを使用してサイトの信頼性を損なう可能性があります。信頼できるソースからだけ取り込むことを確認してください。
  • <パフォーマンス/運用上の注意>: 大量のプレゼンテーションを一括で埋め込みすぎると、ページのロード時間が長くなる場合があります。

まとめ

1. 埋め込みタグ: 正しいURLとIDを使って、