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 にログインする - [ログイン]ボタンがある場合

Google にログイン

Google Chrome を起動してGoogle にログインしようとするとき、[ログイン]ボタンが表示されているときと、表示されていないときがある。

[ログイン]ボタンが表示されているときは、まだログインされていない状態なので、ステップ➊からの操作を行う。

[ログイン]ボタンが表示されていない時は、既にログインされている状態なので、ステップ➌からの操作を行う。

※[ログイン]ボタンが無い場合は、➌ からの操作を行う。

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

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

2)一覧から登録済み Google アカウントを選択、あるいは新規作成し、

 

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

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

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

Google アプリをクリックし、

 

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

 

 

Google ドライブ(マイドライブ)が開く。

 

⇒ 次の➌をスキップして❹へジャンプする。

➌ Google ドライブにログインする - [ログイン]が表示されてない場合

※[ログイン]ボタンが表示されている場合は、➊ から開始する

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

Google アプリをクリックし、

 

ドライブをクリックし、選択する。

 

 

 

Google アカウントでログインする

 

アカウントIDを入力する(「アカウントの選択」が表示される場合は、該当アカウントを選択する)

 

パスワードを入力し[次へ]をクリックする 

 

 

Google ドライブ(マイドライブ)が開く。

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

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

1)マイドライブでアップロードを開始する:

 

① 左側メニューマイドライブ」上で右クリックしメニューを表示し、

あるいは、「マイドライブ▼」をクリックして、

 

ファイルをアップロード...をクリックする。

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

2)「開く」ダイアログでフォルダー/ファイルを指定:

 

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

 

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

 

開く」をクリックする

jdg03P_18:アップロード完了メッセージ
jdg03P_18:アップロード完了メッセージ

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)で完成させたコードを、ボックスに貼り付け、「保存」する

PDFの埋め込み手順(埋め込みコードを用意しないで行う)

ここでは埋め込みコード文書を別途用意しないでも埋め込みを行う方法を紹介する。

埋め込みコードは、埋め込みボックス内で直接変更して完成させる。

➊ Jimdo ページの埋め込み箇所で[PDF埋め込み]を設定しておく

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

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

 

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

jdg03P_19:コードを事前にコピー&貼り付けておく
jdg03P_19:コードを事前にコピー&貼り付けておく

3)[6]の説明の中にあるコードをそのままコピーし、下部ボックスに貼り付けておく。

Jimdo ページはこのままにし、ブラウザの別タブで Google ドライブ側の操作を行う。

➋ Google ドライブで、PDFをアップロードし、コードをコピーする

リンクがクリップボードにコピーされました」メッセージが出た後、Jimdoページに戻り以下のステップを行う。

➌ 埋め込みコードを完成する

jdg03P_20:埋め込みコードを完成する
jdg03P_20:埋め込みコードを完成する

下部ボックス内に、埋め込みコードから離して[Ctrl]+[V]キーを押してURLコードを貼り付ける

 

 

貼り付けたURLコードから埋め込みコードの[個別ID]部分を置き換える

 

③④ 部分に数値を入れる

 

URLコードを削除する

 

保存]をクリックする。

以上で PDF 埋め込みは完了。