IT the Best

HTML/CSS/JSに関する情報やはてなブログのカスタマイズに関する情報を掲載しています。

「はてなブログカスタマイズ 」| ホーム画面だけを変えたい人必見!JavaScriptによる画面別動作

ホーム画面の判断のさせかた

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

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

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

 

URLを取得する

・URLすべてを取得 
let url=location.href
console.log(url)//"https://www.it-the-best.com/"
ドメイン(FQDN)後の文字列(パス名)を取得
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") {
/*ホーム画面で動作させたい処理
...*/
}
・URLで判断する場合
let url=location.href
if (url=="https://www.it-the-best.com/") {
/*ホーム画面で動作させたい処理
...*/
}

はてなブログで動かす

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

f:id:Surprisedblog:20190526085545p:plain

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

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

 

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

 

 

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

www.it-the-best.com