はてなブログ云云でアフィリエイトがしたい人のブログ

「はてなブログ」でアフィリエイト・ブログカスタマイズ・最適化・色々試行錯誤中!

【スポンサーリンク】

はてなブログのリンクターゲットを「新規ウィンドウを開いて表示(target=_blank)」にする方法がついに解決!【はてなブログカスタマイズ】

はてなブログのリンクにはターゲット設定がない

はてなブログは、コンテンツ内のリンクをクリックすると標準設定(2014/12/01現在)で現在のウィンドウを使ってリンク先が開くので、当ブログでリンクをクリックするともれなく当ブログが消えてしまいます。

 

「戻る」ボタンで戻ってくればいいのですが、ウィンドウをいくつも開いていると、どのウィンドウで戻ったらよいかも忘れ、さらにウィンドウごと消すこともあり履歴からたどるのも面倒くさいし結局、二度とサイトに戻らない事も多々有ります。

 

新規ウィンドウ問題をJavaScriptで解決!

「リンク先を新しいウィンドウで開く設定がはてなブログにも有ればなぁ…」と何時も思っていましたら、ジャバスクリプトというものを使えば出来るという「はてな脱獄ブログ」さんのブログを発見。


外部リンクに自動で「新規ウィンドウでひらく」「リンクをたどらない」の設定をする方法 - はてなブログ脱獄ブログ

 

「おお!これじゃ、ワシの思っていたものじゃ!」

 

ジャバスクリプトって凄すぎます。サイトを開いた時に自分のブログのコンテンツを瞬時に書き換える事ができるなんて魔法か。と感動しました。マホウダ!(*´∀`*)

 

これを使うと、記事内にある特定のリンクタグ(aというタグ)に「target="_blank"」が追加されます。書き換わります。

 

これがJavaScriptによって可能なのか~、凄い。だったらJavaScript勉強して記事内に色んなタグ追加していろんなこと出来そうです。

 

私の科学力ではコードの意味ちんぷんかんなんで、「はてな脱獄ブログ」さんのコードを当ブログに使わせていただきました。ワープドライブ技術有り難うございます。

 

JavaScriptコードの貼り方

ブログよりコードをコピー

はてなブログ脱獄ブログ」さんよりコードをコピーします。

外部リンクに自動で「新規ウィンドウでひらく」「リンクをたどらない」の設定をする方法 - はてなブログ脱獄ブログ

 

コードをデザインの記事上に貼る

デザイン ⇒ カスタマイズ ⇒ 記事 ⇒ 記事上にコードを貼ります。貼って「変更を保存する」ボタンをクリックしたら完成。

 

f:id:yonta24:20141201130841j:plain

 

コードを少しいじらせてもらう

私の場合は、「nofollow」と「クラス」は付与しないリンクにしたかったので該当する部分をちょこっといじらせていただきました。

 

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    //外部リンクに_blank・class付与
    $("a[href^=http]").not('[href*="'+location.hostname+'"]').not(":has(img)").attr({target:"_blank"});
});
</script>

 

(ブログにコードを貼り付ける方法がわからない…(´Д⊂グスン)

 

完成!

これで完成です。記事上に貼っているので、スマホサイトにも適用されていますし、今までエントリーした過去の記事にもすべて「新しいウィンドウでリンクが開く」ようになりました。これ、手作業でやったら途方も無い事です。素晴らしいです。

 

さらにまたひとつ「コードを”見たまま編集モード”でうまく貼る方法」について調べる必要が出てまいりました。まだまだ、はてなブログのカスタマイズは続きます。ご一緒にはてなブログを成長させていきましょう!May the force be with you!

 

おすすめエントリー

当ブログの『はてなブログ アフィリエイト入門シリーズ』をひとつにまとめました! - はてなブログでアフィリエイトがしたい人のブログ