ブログ

MAをこれから勉強したい人からカミハヤユーザーまで、
役に立つ情報のご紹介です。

カミハヤMA
2022.02.21

カミハヤMAのLPにPDFをレスポンシブに埋め込む方法

カミハヤMAのランディングページにPDFファイルをレスポンシブに埋め込む方法について紹介します。

今回は、カミハヤMAのランディングページでPDFファイルを埋め込んでレスポンシブ対応するための方法についてご紹介します。

 

目次
 
 1.PDFファイルをブラウザで表示させる方法
 2.PDFファイルをレスポンシブに埋め込む方法
 3.最後に 

1.PDFファイルをブラウザで表示させる方法

よくWeb上でPDFファイルのリンクを貼ることがありますが、閲覧する側は一旦ページを離れなくてはならないとか、PDFがダウンロードされるのを待たなければならないなど、あまりユーザー体験的にも軽快感が無いように感じることがあります。
その他のシーンでは、ブラウザでWebページにPDFファイルがiframeで挿入されてる場合があります。その場合、ブラウザのPDFビューアーによって表示結果が違ったり、レスポンシブ対応ではなかったりします。今回は、その解決方法の一つとしてGoogleが用意しているサービスである「GoogleDocsViewer」のご紹介をします。

 

2.PDFファイルをレスポンシブに埋め込む方法

埋め込む方法は、とても簡単です。
例えば、カミハヤMAのランディングページに今回の「GoogleDocsViewer」を適用する場合には


①PDFを差し込みたい部分に対してHTMLのスロットを適用します。


②HTMLのスロットへ下記の通り挿入します。(***の箇所は、PDFファイル名ならびにコンテンツ表示させたい高さのピクセル数を入力します。)

<div class="container">
  <iframe src="https://docs.google.com/viewerng/viewer?url=https://***.pdf&embedded=true" style="width:100%;height:***px;" frameborder="0"></iframe>
</div>

③ランディングページのプレビュー画面で確認し、問題なければ公開します。


以上3つのステップで完了です。

 

pdfviewer

3.最後に

一見、万能でよさそうに思える「GoogleDocsViewer」ですが、何回か試している中でページ表示後に「再読み込み」をしないと表示されないことがあることがわかりました。その原因までは残念ながら追いきれていない状況です。
「GoogleDocsViewer」は、ChromeでもFirefoxでもSafariでも表示イメージが同じでとても良いだけにちょっと残念ではあります。ですので、現時点ではサムネイル画像をランディングページへ表示させて、フォーム登録をしていただければPDFファイルをダウンロードいただくことをオススメしております。

カミハヤの製品ラインナップ

複数製品を組み合わせてのご利用も可能です。詳細はお気軽にお問い合わせください。

カミハヤCMS

カミハヤCMS

オープンソースCMS Drupalとローコードソリューション“サイトスタジオ”の活用により、工数を抑えて、素早くサイトを立ち上げることができます。

もっと見る
カミハヤMA

カミハヤMA

直感的で使いやすい管理画面、ノーコード。技術者無しでも素早くキャンペーンを始められる、BtoB向けマーケティングオートメーションツールです。

もっと見る
カミハヤSEO

カミハヤSEO

オープンソースCMS Drupalとローコードソリューション“サイトスタジオ”の活用により、工数を抑えて、素早くサイトを立ち上げることができます。

もっと見る
カミハヤMAトライアルキャンペーン実施中! MAトライアルのお申込み
資料ダウンロード
資料ダウンロード
お問い合わせ
お問い合わせ
よくあるご質問
よくあるご質問