HTML/CSS

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

2021年6月4日

しの

はじめまして、しのです。 WEBデザインやプログラミング、SEO、ブログ術に関する記事を主に書いています。 ブログの月間PVは約40000PV、月間収益は5桁です。 SEOで検索上位1位を約50件獲得(2024年6月時点)。

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

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

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

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

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

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

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

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

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

https://◯◯◯.com/pdf/sample01#page=ページ番号

このように記載します。

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

#page=3

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

実際に設定してみた

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

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

1ページ目に飛びます

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

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

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

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

2ページ目に飛びます

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

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

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

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

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

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

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

  • この記事を書いた人
  • 最新記事

しの

はじめまして、しのです。 WEBデザインやプログラミング、SEO、ブログ術に関する記事を主に書いています。 ブログの月間PVは約40000PV、月間収益は5桁です。 SEOで検索上位1位を約50件獲得(2024年6月時点)。

-HTML/CSS
-