【fc2ブログ】特定の部分でjavascriptがうまく動作しない

Question

fc2ブログのテンプレートでhtmlのカスタマイズをしています。
それぞれの記事に入る前のトップページに、本文の一部を表示するため、全文を取得する<%topentry_body>変数を使ったあと、javascriptを動作させています。
トップページに表示したい部分には

<div class="summary">抽出したい部分</div>

といったように定義して、

<script>
document.getElementsByClassName("summary");
</script>

こちらのスクリプトをbodyタグが閉じる直前に記述しています。

ここまでのプログラムの動作は
別質問
JavaScript - getelementbyIDでの要素の抜き出しについて｜teratail
https://teratail.com/questions/241222
の中でお力添えをいただき、解決に向かいつつあります。しかし、ページによってプログラムが動作する部分とそうでない部分が出てきてしまったため、問題切り分けのために別質問を立てさせていただきました。
（回答してくださった方からも、この件については別質問を…とアドバイスをいただいています）

問題のページ
ブログトップページ

アクセスしていただきますと、記事一覧が表示されると思います。
タイトルの頭に○がついているページは、上述の、本文一部抜き出しのスクリプトがきちんと動作しています。

今回、お伺いしたいのは、タイトルの頭に☓がついているページの件についてです。
大きく分けて2種類あります。

1.別のjavascriptが動作しているページ
記事一覧の中の、
テストページ（ルビ振りjavascript付き）
が該当します。
本記事では、青空文庫という電子書籍形式にならった記述をすると、自動でふりがなを振ってくれるスクリプトが動作しています。
これは、|漢字《ふりがな》という記述を変換してくれるものです。個別ページに入ると【快晴】の部分にカイセイとルビが振られています。

$('body').append(
'<style>body{display:none;}</style>'
);
$(function(){
  $('body').each(function() {
    $(this).html(
      $(this).html()
        /* 半角または全角の縦棒以降の文字をベーステキスト、括弧内の文字をルビテキストとします。 */
        .replace(/[\|｜](.+?)《(.+?)》/g, '<ruby>$1<rt>$2</rt></ruby>')
        .replace(/[\|｜](.+?)（(.+?)）/g, '<ruby>$1<rt>$2</rt></ruby>')
        .replace(/[\|｜](.+?)((.+?))/g, '<ruby>$1<rt>$2</rt></ruby>')
        /* 漢字の連続の後に括弧が存在した場合、一連の漢字をベーステキスト、括弧内の文字をルビテキストとします。 */
        .replace(/([一-龠]+)《(.+?)》/g, '<ruby>$1<rt>$2</rt></ruby>')
        /* ただし丸括弧内の文字はひらがなかカタカナのみを指定できます。 */
        .replace(/([一-龠]+)（([ぁ-んァ-ヶ]+?)）/g, '<ruby>$1<rt>$2</rt></ruby>')
        .replace(/([一-龠]+)(([ぁ-んァ-ヶ]+?))/g, '<ruby>$1<rt>$2</rt></ruby>')
        /* 括弧を括弧のまま表示したい場合は、括弧の直前に縦棒を入力します。 */
        .replace(/[\|｜]《(.+?)》/g, '《$1》')
        .replace(/[\|｜]（(.+?)）/g, '（$1）')
        .replace(/[\|｜]((.+?))/g, '($1)')
    );
  });

$('body').fadeIn(3000)});

上記のjavascriptを記述したファイルをDropboxに置き、外部リンクを貼っています。

このスクリプトが入っているページは、テキストの抽出がうまくいっていないようで、summaryでクラス定義した部分以降も、トップページに表示されてしまっています。
javascript同士、競合していたりするのでしょうか？

2.CSSをスタイルタグで直接記述しているページ
記事一覧の前半3つ（複雑なCSS、インラインに記述、スタイルタグで記述）が該当します。
あるひとつのページだけでCSSを使いたい場合が多くあり、しばしば記事内にCSSを直書きすることがあります。
よく使っているCSSの一例（htmlに直書きしています）
上記のjsfiddleリンクにある、リストボックスや見出し関係のCSSを使うことが多いのですが、この場合も、本文抜き出しスクリプトが動作しません…！

とても長くなってしまいましたが、上記2パターンのエラーに付きまして、どのようなプログラム修正を行えばよいか、お力添えをいただけますでしょうか。
どうぞよろしくお願いいたします。

追記:
document.getElementsByClassName("summary");　たけでは、なにも動作しない筈なので、コード間違いがあるのでは…？とヒントをいただきました。しかし、こちらのコードを<script>で挟んだだけで、少なくとも、ただ本文を打っただけのページではsummaryクラスによる抜き出しが動作している部分があるのです…。テンプレート変数の方に秘密があるのでしょうか。

2020/02/16　追記
CSSが別ページに及んでしまう件については、クラス定義をすることで回避いたしましたので、質問タイトルをjavascriptのみに絞りました。

また、取得だけの動作をしていたjavascriptについては、一旦削除をいたしました。
この状態でも、正しく動作しているように見える部分があるのは、たまたま表示したい部分と【表示可能字数】がうまく合致しているだけなのかもしれません…！

Comments

[maisumakun]

「document.getElementsByClassName("summary");」だけでは、「当該の要素を取得する」だけでなんの変化も起きないのが正しい動作です。

なにかコードを間違えていないでしょうか？

[LUCIA]

メッセージありがとうございます。
テンプレートのコードを見直してみましたが、やはり、document.getElementsByClassName("summary");をscriptタグで囲んだだけの記述しかしていないです。
確かに、javascriptの解説を読むと、取得をするための記述をしたあと、それを代入する記述が必要、という文があるので、なぜこの状態で動作するのか私もわからないのです…！

[LUCIA]

ちなみに、一番最初の質問をしたときは、<div id="summary"><%topentry_body></div>
のように、本文記述の変数を<div>で挟んでいたんです。すると、回答をくれた方が、<div>タグが2重になってしまっている（テンプレートと本文両方で<div id="summary">を使っているから？）ので、ひとつ消してくださいねと教えてくださいました。そのため、テンプレート側のdivタグを消して、<%topentry_body>だけを残し、本文側で定義をするようにした、という流れがあります。

[LUCIA]

その際、idで取得するパターンから、クラス名で取得する方法に変更をしました。
これ以外に基本のテンプレートと違うことは、ベースのCSS自体を外部ファイルにしてhtmlから呼び出すことで、編集しやすくしていることくらいなのです。
fc2ブログの変数の仕様なのでしょうか…！

[LUCIA]

ヒントを頂いたとおり、取得するだけの動作をしていたスクリプトについては、削除をしてみました…！しかし、変化がありません。
タイトルに○のついている、正しく動作しているページについても、表示部分の下に【本文】にあたるブロックがあるのですが、そこがうまく隠れているのです。スクリプトを置いていないなら、他のエラーページと同じ動作をしてもいいように思えるのですが…！

[LUCIA]

時間が空いてしまいましたが、上記解決策にて、ほぼ希望通りの動作をすることができました…！

Answer 1

解決策
記事一覧のsummaryよりも下の部分に、下記スクリプトで余白を多めに設けて本文を見えなくした上で、

<script>
var myStyle = {
  marginBottom: '30em',
　fontStyle:'italic', 
　fontSize:'15px'　  
}
var elem = document.getElementById("summary").style;
  
for(var prop in myStyle) {
  
  elem[prop] = myStyle[prop];
  
}

</script>

本文部分のsummaryにはid定義をして、

<script>
document.getElementById("summary").style.display ="none";
</script>

非表示にしておくコードを記述しておくことで、トップページをsummary部分のみに設定することに成功しました。

また、bodyの閉じタグの直前に、

<script>
$('body').append(
'<style>body{display:none;}</style>'
);
$(window).load(function(){
	$('body').hide().fadeIn(3000); 
});

</script>

このようなフェードインスクリプトを記述することで、ページ遷移の際に、ゆっくりと表示されるようにしました。

（フェードインの際、少しちらつきが見られますが、この件に関しては、また別の質問を立てさせていただきます…！）

お忙しい中ヒントをいただきまして、ありがとうございました！