Bloggerのjavascriptの便利な使い方

2022/04/05 update

Bloggerのjavascriptの使い方です。
Bloggerのjavascriptはどこに書いてもいいですが、</body>の前の<script>と</script>の間にjavascriptの処理を書くと、表示が早くなります。
途中に書くと、javascriptの処理が終わるまで、表示が中断して遅くなります。Google AdSenseやGoogle Tag Managerなど場所が指定されているjavascript以外は全て最後に書きます。

<html>
<body>
・・・
<script>
（javascriptの処理）
</script>
</body>
</html>

Bloggerのテンプレートはxmlファイルなので、普通にjavascriptを書くだけではエラーになります。

<script>
/*<![CDATA[*/
（javascriptの処理）
/*]]>*/
</script>

こういう書き方にすると、普通にjavascriptを書けます。Bloggerから分離すれば、javascriptを使いやすくなります。また、Bloggerの変数などをjavascriptの途中で使うと文字化けなどが起こりやすいので、できるだけ使わずに、javascriptでタグなどから取得するようにします。

<script>と</script>の間にjavascriptの処理を書くだけでは、表示が終わってない場合があるので、表示が終わったら実行する書き方にします。

<script>
/*<![CDATA[*/
document.addEventListener('DOMContentLoaded',function(){
（処理）
});
/*]]>*/
</script>

または

<script>
/*<![CDATA[*/
document.addEventListener('DOMContentLoaded',関数名);
/*]]>*/
</script>

例

<script>
/*<![CDATA[*/
document.addEventListener('DOMContentLoaded',function(){
  let objlist=document.getElementById('BlogArchive1').getElementsByClassName('post-count-link');
  for(let i=0;i<objlist.length;i++) objlist[i].innerText=objlist[i].getAttribute('href').split('?')[0].split(location.hostname)[1].slice(1,-1);
});
/*]]>*/
</script>

<script>
/*<![CDATA[*/
document.addEventListener('DOMContentLoaded',setBlogArchiveTitle);
function setBlogArchiveTitle(){
  let objlist=document.getElementById('BlogArchive1').getElementsByClassName('post-count-link');
  for(let i=0;i<objlist.length;i++) objlist[i].innerText=objlist[i].getAttribute('href').split('?')[0].split(location.hostname)[1].slice(1,-1);
}
/*]]>*/
</script>

画像の読み込みなど全ての表示が終わったら実行する書き方もあります。画像を使う処理をjavascriptで書いている場合はこちらを使います。

<script>
/*<![CDATA[*/
window.addEventListener('load',function(){
（処理）
});
/*]]>*/
</script>

または

<script>
/*<![CDATA[*/
window.addEventListener('load',関数名);
/*]]>*/
</script>

例

<script>
/*<![CDATA[*/
window.addEventListener('load',function(){
  let objlist=document.getElementById('BlogArchive1').getElementsByClassName('post-count-link');
  for(let i=0;i<objlist.length;i++) objlist[i].innerText=objlist[i].getAttribute('href').split('?')[0].split(location.hostname)[1].slice(1,-1);
});
/*]]>*/
</script>

<script>
/*<![CDATA[*/
window.addEventListener('load',setBlogArchiveTitle);
function setBlogArchiveTitle(){
  let objlist=document.getElementById('BlogArchive1').getElementsByClassName('post-count-link');
  for(let i=0;i<objlist.length;i++) objlist[i].innerText=objlist[i].getAttribute('href').split('?')[0].split(location.hostname)[1].slice(1,-1);
}
/*]]>*/
</script>

if文で使う条件を指定できます。
投稿の場合

<b:if cond='data:view.isPost'>
<script>
（javascriptの処理）
</script>
</b:if>

特定のサイトの場合

<b:if cond='data:blog.canonicalHomepageUrl == "https://googlebloggertrouble.blogspot.com/"'>
<script>
（javascriptの処理）
</script>
</b:if>

この記事のタイトルとURLをコピーする blogger

blogger