時時腕時計(ときどき、うでどけい)

趣味で集めた古い腕時計や日々の出来事を綴るブログです

はてなブログProでpdfファイルを表示させる方法

 

jpgなどの写真やYOUTUBE映像の表示は標準機能でサポートされていますが、pdfファイルの表示機能はありません。

方法は以下です。

 

Googleドライブにpdfファイルを保存する。

Googleのアカウントが必要になります。

アカウント取得ができたらGoogleドライブを開きます。

Googleドライブは以下のリンクで表示できます。

https://drive.google.com/drive/my-drive

 

Googleドライブにファイルをアップロードする

エクスプローラーからのドラッグアンドドロップでもアップロードできます。

f:id:oto-man:20200104192613p:plain

 

 

ファイルの共有をオンする

Googleドライブにアップロードされた、ブログで表示させたいファイルを右クリックします。

「共有可能なリンクを取得」を選択します。

f:id:oto-man:20200104192803p:plain

すると、選択したファイルのアイコン上に「リンクの共有がオフです」と表示されます。

f:id:oto-man:20200104192959p:plain

 

リンクの共有をオンにするため、ポップアップの右上のスイッチでオンにします。

f:id:oto-man:20200104193119p:plain

 

リンクのアドレスをメモ帳に張り付けする

メモ帳を開いて、クリップボードから張り付けします。

https://drive.google.com/open?id=1XsglN5diONY8Vt1QzofPb6V8KUB3uQg2 

 

貼り付けたリンクの赤色部分を使用します。

 

5.以下の***の部分に4で指定したものを貼り付けします。

<p><iframe src="https://drive.google.com/file/d/*****/preview" width="600" height="800"></iframe></p>

 

こうなります。

<p><iframe src="https://drive.google.com/file/d/1XsglN5diONY8Vt1QzofPb6V8KUB3uQg2/preview" width="600" height="800"></iframe></p>

 

ブログ編集画面に貼り付ける

 HTML編集画面で、pdfを表示させたい部分に、貼り付けします。

すると、以下の表示が完成します。