【jQuery】リンククリックで自動的に別ウィンドウ・タブに表示する
はてなブログとかで記事を書いている時に、
別サイトとかへのリンクを貼りつけたりすると思うのですが、
わざわざHTML編集で「target="_blank"」って書かないといけないのが面倒。
ということで、はてなブログの設定にjQueryを記述して、
リンククリック時に別ウィンドウ・タブで開くようにする方法です。
詳細設定タブを開く
まず、メニューの[設定]を開いて、[詳細設定]タブを選択します。
んで、下の方にスクロールすると[headに要素を追加]という個所があるので、
その中に以下のコードを追加。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"><!-- jQuery(document).ready(function($) { $('a').click(function() { var linkurl = $(this).attr('href'); if(linkurl.indexOf("javascript") < 0 && linkurl.substr(0,1) != "#" && linkurl.indexOf(location.hostname) < 0) { window.open(linkurl); return false; } }); }); //--></script>
正規表現使った方がすっきりしそうな気がするけど、
最近使ってないので書き方忘れたwww
一応、ブログのテーマとかによっては、
リンククリックでJavaScript実行したり、
「href="#hoge"」とかで指定要素の位置までスクロール移動したりするものもあるかもしれないので、そういう場合は通常通りの動きになるようにしています。
もし短縮URLとかあれば遷移先が自ドメインでも別ウィンドウで開いてしまうのですけど、
たぶんわざわざ使うこと少ないですよね?
ちなみに、はてなブログのスマホ表示では、
上記のスクリプトを設定していても無視されてしまいます。
なので、メニューの[デザイン]からレスポンシブデザインのチェックをONにしないといけません。
でも、はてなブログのテーマってレスポンシブ対応しているものがあまりないらしいので、
このブログをレスポンシブ対応した時の手順を次回の記事で書こうと思います。
といっても自分が使っているテーマでの話なので、
別のテーマ使っている方はうまくいかないかも?
んじゃらば(@^^)/~~~
jQuery Tutorial #1 - jQuery Tutorial for Beginners ...
jQuery Tutorial - 1 - Introduction to jQuery - YouTube
#01 レスポンシブなウェブサイトを作ろう - YouTube
2013/12/21 2-2『必ず押さえておきたいレスポンシブWebデザイン実装の基礎+α ...
- 作者: 白岩登
- 出版社/メーカー: 株式会社フェンドーラ
- 発売日: 2014/01/19
- メディア: Kindle版
- この商品を含むブログを見る
レスポンシブWebデザイン入門 ~マルチデバイス時代のWebデザイン手法~
- 作者: 小川裕之
- 出版社/メーカー: マイナビ
- 発売日: 2013/03/28
- メディア: 単行本(ソフトカバー)
- この商品を含むブログ (3件) を見る