WEMOブロックエディター完全対応のWordPressテーマ「SWELL」をリリースしました!コピペで終わらない、本質的な理解を目指した知識整理のメモをお届け。2019.08.15リンク先をクリックしてサブウインドウ(小窓)で表示させるときは、window.openを使うと簡単。このスクリプトはそんない難しくないので、コピペで済ましがちですよね。見かけるコードをそのままコピペすると、リンクを右クリックして「新しいタブで開く」を使うとうまく開きません。今回は、window.openをこの「新しいタブで開く」に対応させる方法をご紹介していきます。工夫で、よりユーザにとって親切な実装ができるので忘れないようにしておきたいです。window.openを使用します。window.openについて詳しくはこちら。ある小窓表示の実装コードまずはよく見る実装コードを見てみます。リンク</a>onclick属性を使わず、href属性だけのパターンもありますね。リンク</a>これらのコードで、小窓表示の実装自体は問題なくできています。下のデモリンクは上記のコードを実際に再現したものです。クリックして開いてみてください。サンプル1サンプル2問題なく表示できていると思います。冒頭で述べたように、一つだけ問題があります。リンクを右クリックし、「新しいタブで開く」を選択してみてください。空白のページが表示されてしまったかと思います。こんな細かいこと気にするか?と思うかもしれないですが、ネットサーフィンに慣れている人は、タブを複数開きながら作業することが多く、リンクを開く際は常にこの「新しいタブで開く」を選択する癖がついている人もいるほどです。(実際に、私がそうです)最近のマウスではスクロールボタンが標準で「新しいタブで開く」のショーカットボタンになっており、普通のクリックと同じ感覚で別タブ表示ができます。工夫して「新しいタブで開く」に対応させてみるでは実際に、別タブ表示に対応させてみましょう。"でその値を渡すことができます。することで、href属性にURLがちゃんと含まれているので「新しいタブで開く」でリンクを開かれた場合でもそのURLが表示されます。サンプル別タブで開けることを確認して見てください。false;を忘れないように注意しましょう。