[はてなブログ][カスタマイズ] | ホーム画面だけで動くjavascript

　URLを取得して、表示されている画面の判断をします。

　おそらく、はてなブログを利用してブログを開設した人のホーム画面はトップディレクトリに存在するため、URLは「プロトコル」と「ドメイン(FQDN)」のみになると思います。(※トップディレクトリに存在するという表現が正しいかはわかりません)

　この傾向を利用して画面の判断をします。

let url=location.href
console.log(url)//"https://www.it-the-best.com/"

let path=location.pathname
console.log(path)//"/"

　当サイトのホーム画面のパス名は「"/"」のみになるので、location.pathnameが"/"のときにホーム画面と判断します。

let path=location.pathname
if (path=="/") {
/*ホーム画面で動作させたい処理
...*/
}

　もしホーム画面のパス名が「"/"」以外であれば、ホーム画面のURLのドメイン名後の文字列(パス名)と比較させます。

例）ホーム画面のURL：https://hatena.hatena/home

let path=location.pathname
if (path=="/home") {
/*ホーム画面で動作させたい処理
...*/
}

let url=location.href
if (url=="https://www.it-the-best.com/") {
/*ホーム画面で動作させたい処理
...*/
}

　はてなブログで動かす場合は、デザインからスパナのマーク(カスタマイズ)をクリックします。ヘッダやフッタなどの、HTMLを記述できるところに<script>タグで囲んで、動かせます。

f:id:Surprisedblog:20190526085545p:plain

JavaScriptで特定要素を取得するときに、そのコードより下にある要素を取得することはできませんので、フッタに記述することをおすすめします。

変更したい要素がヘッダより下にある場合は、ヘッダではなくフッタに記述しましょう。

それでは、良いプログラミングライフを。

locationによるURLの取得情報を一覧でまとめました。

IT the Best