PDFをクリエイターホームページに埋め込む

ここでは、PDFファイルをジンドゥ（Jimdo）ホームページに埋め込み表示する方法をご案内しています。 以下 2通りの方法に対応しています。

【方法１】POWr のアドオン「PDF 埋め込み」を利用して埋め込む

PDF 埋め込みを使用して、ジンドゥークリエイターホームページにPDFを埋め込み表示できます。この作業には、無料の POWr アカウントと埋め込みたい PDF が必要です。

POWr のアカウントをまだお持ちでない場合は、わずか数分で新しいアカウントを作成できます。アカウントの作成後、以下手順で進めていきましょう。

PDF の埋め込み手順

  1. ジンドゥーアカウントにログインし、埋め込みたいホームページを選択します
  2. 「編集」をクリックして、ジンドゥークリエイターのホームページ編集画面に入ります
  3. PDF を埋め込みたいページに移動し、「＋コンテンツを追加」をクリックします。
  4. 「その他のコンテンツ＆アドオン」の中にある POWr の「PDF埋め込み」をクリックして、そこに表示される手順に沿ってコードをコピー貼り付けをして「保存」ボタンを押します。
  5. 少し待つと PDFのプレビュー画面が表示され、その上部に 「Edit App」があることを確認してください。
  6. 「Edit App」をクリックすると、POWr のページに移動します。
    ※POWr へのログインを求められた場合には、POWr へログインをしましょう。
  7. 左上のメニュー「Content」をクリックします。「Repalce File」から希望のPDFをアップロードします。
    ※一度にアップロードできる PDFの最大サイズは、5MB まで
  8. 必要に応じて PDFの表示方法「Design」を選択し、右上の「Publish」を押下してエディターを閉じてジンドゥークリエイターのホームページに戻り、「保存」ボタンをクリックして完了です。

【方法２】Google ドライブから共有して埋め込む

ご利用には Google のアカウントが必要です。まだお持ちでない場合は Google アカウントの作成からはじめましょう。この手順では、コードを使用しますので、HTMLコードに関する多少の知識が必要です。

PDF の埋め込み準備

  1. ジンドゥーアカウントにログインし、埋め込みたいホームページを選択します
  2. 「編集」をクリックして、ジンドゥークリエイターのホームページ編集画面に入ります
  3. PDF を埋め込みたいページに移動し、「＋コンテンツを追加」をクリックします。
  4. 「その他のコンテンツ＆アドオン」の中にある「ウィジェット/HTML」をクリックしましょう。

  5. 「ウィジェット/HTML」の中に以下コードをコピーして貼り付けて準備しておきましょう。

    <iframe src="https://drive.google.com/file/d/個別ID/preview" width="50%" height="500"></iframe>

PDF の埋め込み手順

  1. Google ドライブに移動してログインしましょう。
  2. 左列にある「＋新規」「ファイルのアップロード」から PDF をGoogle ドライブにアップロードしましょう。
  3. 「マイドライブ」から希望の PDF ファイル上で右クリックから「共有」をクリックし、リンクを取得内にある「リンクを知っている全員に変更」をクリックしましょう。
    ※「変更」が表示される場合には、「リンクを知っている全員」に変更可能
  4. 「リンクをコピー」をクリックして、「PDF の埋め込み準備」の手順５、ウィジェット/HTML内に貼り付けたコードの下に貼り付けておきましょう。
  5. 以下※印を参照し、必要な部分だけコピーしてウィジェット/HTML内コードの「個別ID」に貼り付けたら、Google ドライブからコピーしたコードは削除しましょう。
    ※https://drive.google.com/file/d/ このコード「個別ID」をコピーします /view?usp=sharing
    ※貼り付け先「個別ID」の文字は必要ありませんので、削除して貼り付けます
  6. コード内「width」「height」内の  ”” （ダブルクォーテーション）で囲まれた数値を調整して表示サイズを変更可能です。数値入力後「保存」ボタンをクリックして完了です。
    ※サイズ変更後の確認はその都度「保存」ボタンを押して確認します。

Google ドライブセキュリティーアップデートにより共有ファイルが表示されない場合の対処方法

Google 社よりファイルのセキュリティー向上のため仕様変更がありました。これにより共有ファイルの URL が一部変更になり、これまで表示されていた共有ファイルから「アクセス権」を求められ場合があります。この場合の対処方法を以下にご案内いたします。

対応方法は、２つございます。この手順では、コードを使用しますので、HTMLコードに関する多少の知識が必要です。

  • 正しい共有リンクをGoogle ドライブで作成して、ジンドゥー側に貼り付け替える方法
  • 表示しない共有ファイルをGoogle ドライブへ再度アップロードをして共有リンクを貼り替える方法

① 正しい共有リンクをGoogle ドライブで作成して、ジンドゥー側に貼り付け替える方法

  1. Google ドライブにログインします
  2. 検索窓に「is:security_update_applied」を入力して今回の対象ファイルを表示します
  3. 対象ファイルをダブルクリック、または右クリックから「プレビュー」をクリックして開きます
  4. 右上にある「︙」から「新しいウィンドウで開く」からファイル表示します
  5. 右上にある「︙」から「アイテムを埋め込む」をクリックすると <iframe> タグが作成されます
  6. <iframe> タグを全てコピして、ジンドゥーウィジェット内にあるコードを一度削除して新しいコードへ貼り替えます
  7. 以上の手順で共有ファイルが表示します

② 表示しない共有ファイルを Google ドライブへ再度アップロードをして共有リンクを貼り替える方法

Google ドライブにアップロードしたファイルがお手元にない場合は、「正しい共有リンクをGoogle ドライブで作成して、ジンドゥー側に貼り付け替える方法」でお試しください。

  1. Google ドライブにログインします
  2. 検索窓に「is:security_update_applied」を入力して対象ファイルを表示します
  3. 対象のファイルを選択して「ゴミ箱」アイコンから削除、または右クリックで「削除」します
  4. 左列にある「＋新規」ボタンからファイルアップロードします
  5. アップロードしたファイルをダブルクリック、または右クリックから「プレビュー」をクリックして開きます
  6. 右上にある「︙」から「新しいウィンドウで開く」からファイル表示します
  7. 右上にある「︙」から「アイテムを埋め込む」をクリックすると <iframe> タグが作成されます
  8. <iframe> タグを全てコピして、ジンドゥーウィジェット内にあるコードを一度削除して新しいコードへ貼り替えます
  9. 以上の手順で共有ファイルが表示します

共有 PDF サイズを調整する

共有ファイルのコードを例えば以下のように変更、追加で、共有 PDF のサイズ変更が可能です。

<iframe src="https://drive.google.com/file/d/XXXXXXXX/preview?resourcekey=0-XXXXXXXXX" width="50%" height="500"></iframe>