GLOW YOUR BUSINESS
WEB TOTAL PRODCTION FROM NARA

【1分で出来ます】HTMLでPDFファイルの特定のページにリンクさせる方法

HTMLのリンクタグにPDFの3ページ目へ飛ぶように設定したいんだけどこれってどうすればいいんだろう?

本日は上記のお悩みについてご回答します。

企業系のサイトなどを作っているとたまに出くわすごとがあるのですが、意外と忘れてたり知らなかったりしますよね。

なので今回はリマインド的な意味も込めて記事を書いておきます。

それでは早速見ていきましょう。

とある文言をURLの後ろにつければ解決

PDFは基本的にデフォルトの状態では1ページ目から表記されますが、とある文言をURLの後ろにつければ特定のページを指定してリンクを設定する事ができます。

HTMLのリンクにPDFの特定のページを指定したい場合は以下のように記載すればOKです。

例えば、sample01というPDFファィルの3ページ目に飛んで欲しい場合は

<pre class="wp-block-syntaxhighlighter-code">https://◯◯◯.com/pdf/sample01#page=ページ番号</pre>

このように記載します。

ポイントは以下の部分で、3というのは何ページかを表しています。

<pre class="wp-block-syntaxhighlighter-code">#page=3</pre>

いかがでしょうか。非常に簡単ですね。

実際に設定してみた

では実際にリンク先が特定のページになるように設定してみましょう。

以下のリンクをクリックしてみてください。

1ページ目に飛びます

こちらは以下のようにリンクを設定しています。

<p><a href="http://webstyle.work/wp-content/uploads/2021/06/sample.pdf" target="_blank">1ページ目に飛びます</a></p>

このままですと通常通り1ページ目にリンクされます。

では以下はどうでしょうか。

2ページ目に飛びます

はい、2ページ目にリンクされましたね。

こちらは以下のコードとなっています。

<p><a href="http://webstyle.work/wp-content/uploads/2021/06/sample.pdf#page=2" target="_blank">2ページ目に飛びます</a></p>

いかがでしたでしょうか。

非常に簡単に特定のページにリンクさせることが出来たと思います。

是非機会があれば上記の方法で試してみてくださいね。

それではまた次の記事でお会いしましょう。

 

著者画像

執筆者 しの

still.代表。 奈良市出身奈良市在住。 SEOはじめ、マーケティング成果を出せるWEB制作を得意としています。ディレクションから制作まで一気通貫でご対応。 クライアント様にとってスムーズで気持ちの良いコミュニケーションを常日頃から心がけております。 これまでコーポレイトサイト、サービスサイト、ランディングページ、ECサイトなど多数のサイト、プロジェクトに携わらせていただき、サイトを作成させて頂いております。 その他サーバーの構築、メールのトラブルの対応、コンテンツマーケティングなど幅広くご対応しておりますのでまずはお気軽にご相談ください。