俺氏、本を読む

30歳になるまでに本を読んで勉強しようかと。主に啓発、お金についての本を読むつもり。一応プログラマーなのでその辺のことも。あと、せどり(転売)の仕入れ見込み商品をリサーチして仕入先と一緒に投稿します

【jQuery】リンククリックで自動的に別ウィンドウ・タブに表示する

はてなブログとかで記事を書いている時に、
別サイトとかへのリンクを貼りつけたりすると思うのですが、
わざわざHTML編集で「target="_blank"」って書かないといけないのが面倒。
ということで、はてなブログの設定にjQueryを記述して、
リンククリック時に別ウィンドウ・タブで開くようにする方法です。

詳細設定タブを開く

まず、メニューの[設定]を開いて、[詳細設定]タブを選択します。
f:id:oresi:20140828024121p:plain
 
んで、下の方にスクロールすると[headに要素を追加]という個所があるので、
f:id:oresi:20140828025613p:plain
その中に以下のコードを追加。

<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にしないといけません。
f:id:oresi:20140828030520p:plain
でも、はてなブログのテーマってレスポンシブ対応しているものがあまりないらしいので、
このブログをレスポンシブ対応した時の手順を次回の記事で書こうと思います。
といっても自分が使っているテーマでの話なので、
別のテーマ使っている方はうまくいかないかも?
 
んじゃらば(@^^)/~~~
 

jQuery Tutorial #1 - jQuery Tutorial for Beginners ...

jQuery Tutorial - 1 - Introduction to jQuery - YouTube

#01 レスポンシブなウェブサイトを作ろう - YouTube

2013/12/21 2-2『必ず押さえておきたいレスポンシブWebデザイン実装の基礎+α ...

jQuery入門道場

jQuery入門道場

レスポンシブWebデザイン入門 ~マルチデバイス時代のWebデザイン手法~

レスポンシブWebデザイン入門 ~マルチデバイス時代のWebデザイン手法~