次のコード内で背景色がある部分を適宜編集してhead
内もしくは記事内に追加する。著作権の部分を削除しない限りは自由に改変して使える。
<script>
/*
* Blog Redirect v1.0.1
* Date: 2022-06-13
* Copyright (c) 2022 https://hapilaki.net/
* Released under the MIT license:
* http://opensource.org/licenses/mit-license.php
*/
;
const blogURL='https://'+location.hostname+'/'+'追加部分';//ブログURLとディレクトリを指定
const redirectList=[
['内部リンク末端','リダイレクト先URL'],//内部リンク末端とリダイレクト先のペア
['内部リンク末端','リダイレクト先URL'],//内部リンク末端とリダイレクト先のペア
];
for(let i=0;i<redirectList.length;i++){
if(location.href==blogURL+redirectList[i][0]){
location.replace(redirectList[i][1]);
break;
}
}
</script>
次のコードをコピペでhead
内に入れて作動を確認できる。
<script>
/*
* Blog Redirect v1.0.1
* Date: 2022-06-13
* Copyright (c) 2022 https://hapilaki.net/
* Released under the MIT license:
* http://opensource.org/licenses/mit-license.php
*/
;
const blogURL='https://'+location.hostname+'/'+'';//ディレクトリは未指定
const redirectList=[
['#hapilaki-sub','https://hapilaki.net/lab/'],//URL末端とリダイレクト先のペア
['?yahoo','https://yahoo.co.jp/'],//URL末端とリダイレクト先のペア
['?google','https://google.co.jp/'],//URL末端とリダイレクト先のペア
];
for(let i=0;i<redirectList.length;i++){
if(location.href==blogURL+redirectList[i][0]){
location.replace(redirectList[i][1]);
break;
}
}
</script>
背景色がある三行それぞれを当ブログに当てはめて解説すると次のとおり。
2015年6月現在のはてなブログでは上記3パターンはいずれも機能する。行数に制限はないのでコピペで必要なだけ増やし同じ要領で編集する。(当ブログではhead
内から上記コードを削除しているので、上記3つのURLにアクセスしてもリダイレクトされない。)
ブログサービスによっては記事が存在しないページへアクセスすると自動でエラーページへリダイレクトするものがある。その場合でも3行目の「?」を先頭に持ってきたURLでは大丈夫かもしれない。
リダイレクト用の内部リンクのディレクトリを指定しておくことも可能。たとえば次のようにリダイレクト用のURLには毎回to/
を入れる場合を考える。
追加部分にto/
を入れれば、内部リンク末端にはhapilaki-sub
だけを入れるだけでいい。to/hapilaki-sub
としなくていいので少しだがコードを短くできる。
長所
head
内でコードを読み込むのでリダイレクトまでの時間が短い。短所
リダイレクトの数が多くなればなるほどhead
が大きくなる。リダイレクトと関係のない普通の記事ページでもコードは読み込まれるので、全ページの読み込みが若干遅くなる(体感するほどではないかもしれないが)。
売れ筋ランキング: JavaScript の中で最も人気のある商品です
次のコードをコピペで任意の記事内に入れて作動を確認できる。
<script>
/*
* Blog Redirect v1.0.0
* Date: 2015-06-12
* Copyright (c) 2015 https://hapilaki.net/
* Released under the MIT license:
* http://opensource.org/licenses/mit-license.php
*/
;
var blogURL='https://'+location.hostname+'/'+'lab/demo/blog-redirect';//
var redirectList=[
['#hapilaki-sub','https://hapilaki.net/'],//URL末端とリダイレクト先のペア
['?yahoo','https://yahoo.co.jp/'],//URL末端とリダイレクト先のペア
['?google#google','https://google.co.jp/'],//URL末端とリダイレクト先のペア
];
var redirectListLength=redirectList.length;
var locationHref=location.href;
for(var i=0;i<redirectListLength;i++){
if(locationHref==blogURL+redirectList[i][0]){
document.write('<scr'+'ipt>location.replace("'+redirectList[i][1]+'");</scr'+'ipt>');
break;
}
}
</script>
次のリンク先に飛ぶとリダイレクトされるのを確認できる。
IDやパラメーター、もしくはその両方を設定してリダイレクト先を切り替えられる。
長所
リダイレクト用の記事をひとつ決めておけば、head
にコードを追加する必要がない。
短所
head
に追加する時よりもリダイレクトに時間がかかる。リダイレクトされるまでの間に記事が表示されるので、CSSでbody{display:none;}
などをコードの前に設定しておくのもあり。サーバーに置いたリダイレクト用のPHPファイルにアクセスする方法だと、そのサーバーが落ちているとリダイレクトされなくなる。当ページの方法であればそのリスクがない。
ブラウザの設定でJavaScriptを無効にしているとリダイレクトされない(下記ページ参照)。この点はPHPでリダイレクトする場合に劣る。
低スペックPCのブラウザでタブ99個開いても快適に閲覧するおすすめ簡単設定
記事ページごとにアフィリエイトリンクを入れている場合、そのリンクURLが無効になるとページごとにリンクを張り替える必要がある。
内部リンクでリダイレクトしていれば、その内部リンクのリダイレクト先を変更するだけでよく、各記事ページのリンクを張り直さなくていい。
404ページをリダイレクトページとして有効活用したり、記事ページURLにIDやパラメーターを付与したりすることで、ブログサービス内でリダイレクト用のページを作成できる。
売れ筋ランキング: JavaScript の中で最も人気のある商品です
Adsenseコードを残したまま特定のページで広告を非表示にするJavaScriptプラグイン「Adsense Filter」を自作した
JavaScriptで要素の移動/複製はappendChild・insertBefore・cloneNodeを使う、jQueryに依存しない
自動でリダイレクトするのはブログサービスによっては規約違反になるかもしれないので注意!
はてなブログはダメみたい><
';