SAMPLE IMAGE この画像は差し替えてご利用ください

03P PDF をページに埋め込む

Google ドライブを利用して PDF を Jimdo サイト内のページに埋め込み、表示します。

Google ドライブとGoogle アカウントについて

Google ドライブと、Google アカウントについては、当サイトの関連資料の中の Y10 Google ドライブを参照する。

事前準備

Google アカウントを獲得する

Googleドライブ は、Google Inc. が提供するオンラインストレージサービスです。ご利用には Google のアカウントが必要なため、まだお持ちでない場合は 無料登録 からはじめましょう。

 

当サイト内 Y11 Google アカウント に取得方法が示されています。

 

埋め込みコードファイルを個人フォルダーに保存する

あらかじめ埋め込み用コードが記入された「PDF埋め込みソース.txt」ファイルが共有フォルダー内の文書フォルダーにあるので、このファイルを個人用フォルダーにコピーしておく。

jdg03P_14:PDF埋め込みソース.txt ファイルを個人用フォルダーにコピーする
jdg03P_14:PDF埋め込みソース.txt ファイルを個人用フォルダーにコピーする

PDF 埋め込みコード

Jimdo ページへの埋め込みには、下記のコードを使います。

<iframe src="https://drive.google.com/file/d/

個別ID/preview" width="横幅" height="高さ"></iframe>

当コードは「PDF 埋め込みソース.txt」ファイルに入力されていて、「個別ID」「横幅」「高さ」の値を置き換えて使用できるようになっている。

PDF の埋め込み手順

❶ Google にログインする

1)Google Chrome を起動し、「ログイン」をクリックする

jdg03P_02:Google にログインできた
jdg03P_02:Google にログインできた

2)一覧からアカウントを選択、あるいは追加し、

 

3)パスワードを入力する。

❷ Google アプリから「ドライブ」を選ぶ

jdg03P_03:Google ドライブを選択する
jdg03P_03:Google ドライブを選択する

Google ドライブを選ぶ

Google アプリをクリックし、

 

「ドライブ」をクリックする。

 

 

Google ドライブが開く

❸ 埋め込むファイルをアップロードをする

jdg03P_04:埋め込むファイルをアップロードする
jdg03P_04:埋め込むファイルをアップロードする

1)マイドライブが開く:

マイドライブ」上で右クリックし、

 

② 表示されるメニューから「ファイルをアップロードする」をクリックする。

jdg03P_05:埋め込むファイルを選択し開くする
jdg03P_05:埋め込むファイルを選択し開くする

2)「開く」ダイアログが表示:

 PDF文書が保存されているフォルダーを表示し

 

④ 埋め込むPDFファイル選択し、

 

「開く」をクリックする

3)マイドライブに PDF ファイルがアップロードされる

❹ PDF ファイルのリンクを取得する

jdg03P_06:アップロードしたPDFファイルのリンクを取得
jdg03P_06:アップロードしたPDFファイルのリンクを取得

1)アップロードされた PDF ファイルについて:

 右クリックし

 

メニューから「共同可能なリンクを取得」をクリックする

jdg03P_07:取得した共有リンクが表示される
jdg03P_07:取得した共有リンクが表示される

2)取得した共有リンクが表示される

 

注意:

リンクの共有が「オフ」になっている場合は「オン」に切り替える

❺ 個別IDを入力した <iframe> </iframe> コードを完成する

Jimdo ページの埋め込みには、下記のコードを使います。

<iframe src="https://drive.google.com/file/d/

個別ID/preview" width="横幅" height="高さ"></iframe>

 

jdg03P_08:共有リンクをコピーする
jdg03P_08:共有リンクをコピーする

1)取得した共有リンクをコピーする

  表示された URL を選択し、

 

キーボードの【Ctrlキーを押しながら 【C】キーを押してコピーする

jdg03P_09:埋め込みソースが入力されたメモ帳を開く
jdg03P_09:埋め込みソースが入力されたメモ帳を開く

2)個人フォルダーに用意されている、埋め込みソースのメモ帳を開きます。

 個人フォルダー内、「文章」フォルダーにある「PDF埋め込みソース」をダブルクリックで開く。

jdg03P_10:メモ帳にURLを貼り付ける
jdg03P_10:メモ帳にURLを貼り付ける

3)ソースコードのメモ帳に、コピーしたURLを貼り付ける:

 

 入力されているオリジナルコードの下数行に、【Ctrl】キーと【V】キーを押して、コピーしたコードを貼り付ける。

jdg03P_11:個別IDを置き換える
jdg03P_11:個別IDを置き換える

4)個別IDを置き換える: 

貼り付けたURLリンクの id= 以下のコードをコピーし、

オリジナルコードの「個別ID」を選んで貼り付ける(【Ctrl】キー+【V】キー)。

jdg03P_12:個別IDが書き換わった
jdg03P_12:個別IDが書き換わった

5)個別IDが置き換わった: 

 

jdg03P_13:横幅と高さを指定する
jdg03P_13:横幅と高さを指定する

6)「横幅」「高さ」には任意の数字を入れる:

 

 

 

A4 サイズ;

width="595" height="847

 

B5 サイズ;

width="516" height="729"

 

但しこれらの値はPDFを埋め込むJimdoページの横幅次第です。

例えばコンテンツエリアの横幅が900pxの場合は:

width="900" height="1160"

などとして、表示を確認しながら値を調整することもできます。

 

❻ Jimdo にログインし、PDFファイルを表示する

jdg03P_15:PDF埋め込み
jdg03P_15:PDF埋め込み

1)PDF を表示する場所で「コンテンツを追加」>「その他コンテンツ&アドオン」をクリックする。

 

2)「PDF埋め込み」をクリックする。

jdg03P_16:コードを貼り付ける
jdg03P_16:コードを貼り付ける

3)❺ の6)で完成させたコードを、ボックスに貼り付け、「保存」する