PDF ファイルへのリンクと外部サイトへのリダイレクトを記事一覧に示すやり方

PDF ファイルや外部サイトにリンクしたいケース

トップページの新着情報一覧で記事のタイトルをクリックしたときに記事のページにリンクするのではなく、PDF ファイルや外部サイトに直接リンクしたいときがあります。

例えば、以下のようなケースです。

• 発行した会報など、サイトにアップロードした PDF ファイルにリンクしたい
• 商品を紹介するためにアマゾンの商品ページにリンクしたい

補足説明などを書きたい場合は、記事を書いて記事の中からリンクするのがよいのですが、記事を書かずに直接リンクした方が以下のメリットがあって好ましいこともあります。

• ユーザーを目的の情報に素早く導くことができる
• 記事を書く手間が省ける

VK Link Target Controller が役に立ちます

記事へのリンクじゃないことがわかると親切

記事のタイトルをクリックするとその記事のページに切り替わるのがふつうなので、PDF ファイルが表示されること、外部サイトにリダイレクトされることが以下のようにわかりやすくなっていると親切です。

CSS

以下の CSS を追加することで上記のようにわかりやすく表示されます。

/* PDF ファイルへのリンクの前にアイコンを表示 */
.top-news a[href$=".pdf"]::before {
    content: 'PDF';
    background-color: var(--vk-color-primary);
    color: #fff;
    font-family: sans-serif;
    font-weight: normal;
    font-size: 0.8em;
    padding: 0 0.3em;
    border-radius: 3px;
    margin-right: 0.25em;
}

/* http で始まるリンクの後ろに外部アイコンを表示 */
.top-news a[href^="http"]::after {
  margin-left: 3px;
  font-family: "Font Awesome 7 Free";
  content: '\f35d';
  font-weight: bold;
}

/* サイト内リンクにはアイコンを表示しない */
.top-news a[href^="https://uonuma-js.com/"]::after {
  display: none;
}

top-news は投稿リストのブロックに指定した 追加 CSS クラス、https://uonuma-js.com/ は自分のサイトの URL です。

VK Link Target Controller 1.10.0 にうれしい機能が追加されました [2026.4.17 追記]

VK Link Target Controller がバージョン 1.10.0 にアップデートされました。

今回のアップデートにより、ログインしているときにリダイレクト用 URL が設定されている投稿に以下のように [編集] のリンクが表示されるようになりました。

リダイレクト用 URL が設定されている投稿を変更・修正するとき、いままでだとダッシュボードに入って投稿一覧から編集する必要があったのですが、この作業が面倒くさく感じたので、ベクトルさんの VWS フォーラム で要望したところ、さっそくこの機能を実装していただきました。

作業が快適になりました。ベクトルさん、ありがとうございました🙌

サイト運営者プロフィール

対馬 俊彦魚沼情報サービス・ベクトル公式テクニカルパートナー

WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、ベクトル公式テクニカルパートナーがお手伝いいたします。

Lightning / X-T9 / VK Blocks / VK Filter Search などのベクトル製品のサポート、カスタマイズを最も得意としています。

打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

オンラインレッスン形式でのウェブサイト制作・運用のサポートも行っています。お客様ご自身でホームページを制作・運用する上でうまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。

デザイナー様、制作業者様のサイト制作のお手伝いも数多く行っています。難しい部分のコーディング ( PHP / CSS / jQuery ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。

ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、お気軽にお問い合わせください。

≫メールでのお問い合わせはこちら

最新の投稿

この著者の記事一覧

• WordPress2026年5月13日スターターパックのアーカイブページが複数カテゴリーに対応しました
• 制作事例2026年5月9日ホームページ制作事例「南魚沼商工会」
• 制作事例2026年5月1日ホームページ制作事例「行政書士太田晶世事務所」
• 制作事例2026年5月1日ホームページ制作事例「魚沼きのこ」