読者です 読者をやめる 読者になる 読者になる

【JavaScript実践】 ブログタイトルのリンク先を記事一覧画面にする

JavaScript

ブログタイトルをクリックすると、普通はブログトップに飛びます。このブログだと http://kosumemo.hatenablog.com がリンク先になっています。

このリンク先アドレスを書き換えてみます。リンク先を記事一覧画面 http://kosumemo.hatenablog.com/archive などに変更することができます。

やり方

<script>
(function() {
  document.querySelector("#title a").href = "/archive";
}());
</script>

このコードをコピーして

f:id:kosumoro:20160721222111j:plain

ここに貼りつける。

以上。

解説 1

(function() {

}());

この部分は、スクリプトのまとまりを表しています。

解説 2

(function() {
  document.querySelector("#title a");
}());

document.querySelector() は、ページ内の要素(見出しや段落や画像など)を指定します。

今回は "#title a" という指定をしていますので、idtitleになっている要素の下にあるa要素が指定されます。

f:id:kosumoro:20160721223452j:plain

解説 3

(function() {
  document.querySelector("#title a").href = "/archive";
}());

指定した要素の href 属性を "/archive" に書き換えています。

つまり、下のように書き換えることで、ページ内のほかのリンクにも応用できます。

(function() {
  document.querySelector("/* 書き換えたいリンク要素 */").href = "/* 書き換えたいリンク先URL */";
}());

例えば、

(function() {
  document.querySelector("#footer-inner address a").href = "/entry/2016/07/21/220744";
}());

こうすると、フッターの自分の名前リンクから自己紹介用エントリに飛ばすこともできます。

f:id:kosumoro:20160721224643j:plain

お好きにどうぞ。