Nodachisoft Nodachi Sword Icon
  
@あまじ✎ 2020年10月21日に更新

Gatsby のマークダウンのリンクを新規ウィンドウ(別タブ)で開くようにする

当サイトは Gatsby でマークダウンを利用してブログを書いています。

標準でマークダウンにリンクを書くと、そのリンクをクリックした時、自ウィンドウがリンク先に切り替わってしまいます。これを「target="_blank"」に指定して、別タブで開くように設定したいと思いました。

すでにプラグイン「gatsby-remark-external-links」という目的が達成できるプラグインが公開されてますので、プラグインを導入した流れを記録しています。

導入手順

前提

Gatsby にマークダウンプラグイン(gatsby-transformer-remark)を導入してページ生成していること。

インストール

公式に書いてある手順に従っていきます。 正確な情報は下記を見てくださいね。このページでは公式を参照しながら私が実施した手順などなどを書いてます。

参考:公式Gatsby - pakcages - gatsby-remark-graphviz

npm 経由で必要なパッケージをインストールしましょう。

 
インストールコマンド
> npm install --save gatsby-remark-external-links

無事にパッケージが追加されたら使うための設定を書いていきましょー。

gatsby-config.js への設定追記

以下のように gatsby-remark-external-links への参照を 記載してあげます。

gatsby-remark-external-links(抜粋)
module.exports = {
  plugins: [
    {
      resolve: 'gatsby-transformer-remark',
      options: {
        plugins: [  // このプラグインの一つとして記載
          :中略
          {            resolve: "gatsby-remark-external-links",            options: {              target: "_self",  // リンクを開くときの target              rel: "noopener"   // rel(relation) 指定            }          },        {
        resolve: 'gatsby-remark-prismjs',
        options: {
          :以下略
  • target はデフォルトの指定を記載します。デフォルトで target 指定をしない場合は "null" を記載します。
  • rel はリンク先の関係性を記載します。最近のブラウザではリンク先からリンク元への javascript 経由のアクセスを防止するセキュリティ上の理由で、 rel="noopener" を入れておくのが良いです。

これで設定はおしまい。Gatsby を再起動してあげれば、以下のように マークダウン内に記載した URL に属性がついてます。

HTMLのプラグイン導入前後比較
前)<a href="https://google.com/">Google検索</a>
後)<a href="https://google.com/" target="_blank" rel="nofollow">Google検索</a>

プラグイン作者さまに感謝です!

おしまい。

参考

変更履歴

  • 2020/10/21 Cover&eyecatch作成
  • 2020/07/24 初版公開
 
 
送信しました!

コメント、ありがとうございます。

なんかエラーでした

ごめんなさい。エラーでうまく送信できませんでした。ご迷惑をおかけします。しばらくおいてから再度送信を試していただくか、以下から DM などでご連絡頂ければと思います。

Twitter:@NodachiSoft_jp
お名前:
 
連絡先:
 
メッセージ:
 
戻る
内容の確認!

以下の内容でコメントを送信します。よろしければ、「送信」を押してください。修正する場合は「戻る」を押してください

お名前:
 
連絡先:
 
メッセージ:
 
Roboto からの操作ではないという確認のため確認キーを入れてください。
確認キー=95
戻る
 / 
送信確認へ
コメント欄
コメント送信確認へ

関連ありそうな記事(5件)です!

Gatsby でマークダウンの文章を手軽に装飾する(下線とかマーカーを引く、太字にするなど)

#Gatsby✎ 2021-01-30
Gatsby のマークダウンで手軽に装飾する方法を記載。下線を引く、マーカーを引く、太字にする、点線を引くなどを html タグを省略して文章の一部に適用する。
広告領域
追従 広告領域
目次
Gatsby のマークダウンのリンクを新規ウィンドウ(別タブ)で開くようにする
Gatsby のマークダウンのリンクを新規ウィンドウ(別タブ)で開くようにする
導入手順
導入手順
前提
前提
インストール
インストール
gatsby-config.js への設定追記
gatsby-config.js への設定追記
参考
参考
変更履歴
変更履歴
Nodachisoft © 2020