2012
6
20

WordPress記事内の外部リンクのみ、別窓で開くjQuery

リンクを別タブ(ウインドウ)で開くかどうかは、なかなか答えの出ない議論があるみたいですね。私はずっと「ユーザーの自由かなー」と思って別窓にはしていなかったのですが、ちょっと思うところもあり、別窓表示を実装してみることにしました。


想い至った経緯

自分は別窓派

そもそも自分がネットを見て回るなかで、かなりの頻度で別窓を使うんですよね。(chromeはスクロールボタンをクリックで別タブ)でもうっかり普通にリンクを押してしまって前のページに戻りたいということも多くて。。とはいえ、押してみてどっちか分からないのはちょっと微妙だな、と思うんですが、アイコンつきで「これは別窓で開く」と分かるようになっていれば、別窓でもいいんじゃないかなーと。

jQueryで、外部サイトをアイコンつきで別窓リンクにしてみる

とはいえ、過去の記事を全部直す気はないのでw、最近ちょびっとだけ分かるようになってきたjQueryでやってみようかと考えました。もし、「やっぱりやめよう!」となったときに外すのも楽なのでw

120620-1

しかし、WordPressのページまるまる外部リンクにアイコンをつけるとヘッダー、サイドバー、フッターなどなど、デザイン的にここには欲しくないな…っていうところも出てきてしまったので、投稿記事内の外部リンクのみ実装できないかなと、あれこれごねごねしてみた結果です。

実装

jQuery

このサイトの投稿記事のクラスはpostなので、そのなかのaタグで、ホストが一致しないものにtarget="_blank"extlinkというクラスを与えています。

外部サイトへのリンクにtarget=_blank属性を追加(jQuery) -せんむの技術ブログ

こちらのコードを参考にさせて頂きました。

CSS

jQueryで与えたクラスを使って、末尾にアイコンをつけます。

商用、非商用フリーのWEB素材サイト” DOTS・DESIGN

アイコンはこちらのサイトのものを使わせて頂いています。他のアイコン類も、かなりお世話になっています!

自動リンクとの併用も可能

以前書いた、自動リンクを作成してくれるjQueryとも併用できました!併用の際はこんな感じで書いてしまいましょうか。

  • このエントリーをはてなブックマークに追加
  • follow us in feedly 618
  • RSSを登録

公開日:2012/06/20
更新日:2014/01/07


コメントを残す




*印は必須項目です。コメントは承認制ですので、反映までしばらくお待ち下さい。(稀にですがスパムの誤判定にて届かないこともあるようですので、必要な際はお問い合わせからお願い致します。)


back to top