笑顔がいいね♪

小学生と高校生の子供がいるアラフォー主婦です。 毎日瞑想とジョギングを日課にしている健康オタク♪ 家族の笑顔の為においしいご飯を作ることを頑張っています(^^)/

はてなブログでPDFをダウンロードさせる方法(アップロード&埋め込み表示)

はてなブログでPDFファイルをアップロードしたいなぁと思ってブログ内の機能を調べてみました。

画像はアップロードできるものの、それ以外の形式のファイルはどうやらアップロードできないということが分かりました。

 

そこで今回紹介するのは、

「Googleドライブを使用してPDFファイルをアップロードして、ブログに埋め込む方法」

になります。

 

前回の記事でPDFデータをダウンロードできるようにした設定方法です。

www.703-39.com

 

GoogleドライブにPDFをアップロードする

まず初めに、作成した

PDFファイルをGoogleドライブにアップロードする方法を紹介します。

 

  1. Googleドライブにアクセスします。
    https://drive.google.com/drive/my-drive

  2. 左上の「+新規」をクリックします。
    Googleドライブ

  3. 「ファイルのアップロード」をクリックします
    PDFファイルのアップロード

  4. アップロードするファイルを選択して「開く」をクリックします
    PDFファイルのアップロード

 

これでGoogleドライブへのアップロードは完了です。

 

はてなブログにリンクを貼る

  1. 先ほどアップロードしたPDFファイルの上で右クリックをし「共有可能なリンクを取得」をクリックします。

    PDFファイルのアップロード



  2. 「リンクをクリップボードにコピーしました」と表示されてすぐ消えたのちに、「リンクの共有をオンにしました。リンクを知っている全員が閲覧できるようになりました。」と表示されます

    PDFファイルのアップロード

    PDFファイルのアップロード

  3. このURLをブログに貼り付けるとリンクが作成できます。
    https://drive.google.com/open?id=1w〇×▽〇×▽〇×▽

 

PDFファイルを埋め込み形式で表示する方法

これだけでもいいのですが、せっかくですので、PDFの中身が見えて埋め込み形式になっていた方がカッコいいですよね。

 

↓↓こんな風に

 

先に説明した方法で共有可能なリンクを取得した後、URLをメモ帳などのテキストファイルに貼り付けます。

 

https://drive.google.com/open?id=〇〇〇共有アドレス〇〇〇

上記の赤字の部分が共有アドレスになります。

 

取得したリンクの共有アドレスを以下HTMLコードの赤字部分に挿入します。

 

<p><iframe src="https://drive.google.com/file/d/〇〇〇共有アドレス〇〇〇/preview" width="600" height="500"></iframe></p>

 

widthとhightの値は適宜変更してください。

 

上記のコードをはてなブログの「HTML編集」で入力してください。

これではてなブログへのPDFファイルの埋め込み形式のアップロードは完了です♪

 

参考にさせていただいたサイトは以下になります。

Googleドライブを使いPDFをブログに埋め込む方法(はてなブログ利用) - 原貫太オフィシャルブログ

 

最後までお読みいただきありがとうございました(^-^)