杜の里から

日々のつれづれあれやこれ

ブログをカスタマイズする(5) ~外部リンクを別ウィンドウ表示にする~

これまで10年gooブログを愛用してきましたが、そこの記事の中では引用元を示すためにやたら外部リンクを多用していました。

でもリンクを開くとリンク先は別ウィンドウ表示にはならず、ただ同一画面上で画面が進むだけで、元記事に戻ろうとすると【×】で閉じるのではなく、【←】で一歩戻らなければなりませんでした。

でも多くの外部サイトではリンク先は別ウィンドウで開くというのが一般的であり、自分の中では記事に戻る時は【×】を押して別窓を閉じるという動作が当たり前になっていました。

ところがgooブログでは、外部リンクを閉じる時は【←(戻る)】という動作だったため、自ブログでありながらつい【×】を押して元記事を閉じてしまうというミスをよくやっていました。

アクセス解析など見てみると、時々一つの記事に連続して何度もアクセスを繰り返している訪問者の姿を見る事がありましたが、

「ああ、彼も多分リンク先を【×】で閉じちゃったんだな…。」

と、申し訳なく思う事多々でした。

そのためこのリンク画面を別窓で開くという仕様は何としても欲しい機能でしたが、gooブログではそれは夢の仕様でした。

そしてはてなブログにデータ移行した過去記事でリンク動作を確認した所、あいにくこちらでもリンクは元記事と入れ替わる仕様でした。

 

でもカスタマイズというものに望みをかけて、ブログ内を探してみたら……、

 

 

 

 

 

あった!

 

 

 

 

 

こちらの方がしっかり記事にしてくれてました。何と素晴らしい!

www.inside-shiina.com

記事では、以下のコードを〔デザイン〕→〔カスタマイズ〕→〔ヘッダ〕→〔タイトル下〕にコピペとなっているのですが、諸般の事情により、敢えて〔フッタ〕にコピペしてみました。

 

・外部リンクを別ウィンドウに表示する

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<script language="JavaScript">
$(document).ready( function () {
$("a[href^='http']:not([href*='" + location.hostname + "'])").attr('target', '_blank');
})
</script>

f:id:OSATO:20190716224415j:plain

そしてリンククリックした所、フッタに貼っても何の問題も無く外部リンクは別窓で表示されるのが確認出来ました。

今現在、このブログから貼られている外部リンクはすべて、別窓で表示されているはずです。

そして自ブログへのリンクだけは、そのまま重なる感じで表示されている訳ですが、これもおいおい、別窓で表示される様にしようかと考えてます。

(確認用。自ブログへのリンクは同一窓で表示→クリック

まあそれまでには自分ももっとブログ設計には詳しくならねばなりませんが、でも多分いずれ誰かやってくれるでしょうという、気持ちはすっかり他力本願w。

 

外部リンクの別窓表示、これだけはぜひ皆やってほしい一押しのカスタマイズですね。