昨日書いた、JavaScriptを使ってリンクを別ウィンドウで表示するようにするのって、意外とポピュラーな話題のようですね。ググって見たところ、興味がある人も多い感じです。というわけで、ざっとやり方を書いてみます。なお、center、entry-bodyなど、ココログに依存するようなものを使っているので、一応ココログ専用という感じになります(いくらか変更すれば他のシステムでも使えるでしょう)。
○手順
ソース1の内容をHTMLのヘッダ部分などに加えます。もしくは、ソース1の内容(ただし最初と最後の1行を削除)をファイルに書き込んでサイト上に置き、そのファイルをソース2のように参照するものをヘッダに部分に埋め込むという方法もあります。他にもJavaScript関数定義がいろいろあったりするのであれば後者の方がすっきりすると思います。そうでなければ前者のように直接埋め込んでもよいでしょう。
(ココログ利用上の制限のため、字下げが消えてしまい見にくいソースになっていますがご容赦下さい)
次に、HTMLのどこかにソース3の内容を埋め込みます。ただし本文より後ろの位置に入れないと、JavaScript実行時点で手を加えるべきリンクが画面上にないために効果が出ない可能性がありますのでご注意下さい。
単に別ウィンドウで表示するようにするだけならここまででよいのですが、もしユーザーが別ウィンドウで表示しないように選べるようにする場合は、ソース4をHTMLのどこか、記事中でもよいし左右のバナー部分でもよいので追加してください。ただしこの設定は画面のリロードによって元に戻ります(別ウィンドウで表示する)のでご注意下さい。設定を保存したりするにはもっと手を加えないと出来ません。
では、興味ある方は各自トライしてみてください!分かりにくい部分などあればコメントで質問お願いします。
○ソースなど
ソース1:
<script type="text/javascript"><!--
function addTargetBlank(){
setTargetBlank(true);
}
function delTargetBlank(){
setTargetBlank(false);
}
function setTargetBlank(adddel){
var i,j,divs,div,links,link;
divs=document.getElementById("center").getElementsByTagName("div");
for(i=0; i<divs.length; i++){
div=divs[i];
if(div.className == "entry-body"){
links=div.getElementsByTagName("a");
for(j=0; j<links.length; j++){
link=links[j];
if(adddel){
link.setAttribute("target","_blank");
}else{
link.removeAttribute("target");
}
}
}
}
}
//--></script>
ソース2:
<script type="text/javascript" src="/blog/files/maido.js"></script>
ソース3:
<script type="text/javascript"><!--
addTargetBlank();
//--></script>
ソース4:
リンク先を別ウィンドウで開く: <input type="checkbox" checked="checked" onclick="if(this.checked){addTargetBlank()}else{delTargetBlank()}" />
Recent Comments