SCP財団Wikiでページ切り替えギミック後に文章が表示されない原因と解決方法

ブログサービス

SCP財団Wiki(Wikidot)で記事を執筆していると、JavaScriptやWiki構文を利用してページ内の表示を切り替えるギミックを作成することがあります。しかし、ページ自体は切り替わるのに本文や文章だけが表示されないというトラブルが発生することがあります。

この記事では、SCP記事でページ変更ギミックを実装した際に文章が表示されなくなる主な原因と、正常に表示させるための確認ポイントについて解説します。

ページ切り替え後に文章が表示されない主な原因

Wikidot上でページ切り替えを行う場合、単純に表示部分を変更しているように見えても、実際にはHTML要素やJavaScriptによる表示制御が動作しています。

そのため、切り替え先の文章を囲んでいる要素に問題があると、ページの切り替え処理だけ成功して本文だけ非表示になることがあります。

特に多い原因は、以下のようなものです。

  • 表示対象のdivタグに誤ったclass名やidを指定している
  • JavaScript側で指定している名前とHTML側の名前が一致していない
  • display:noneの状態が解除されていない
  • Wiki構文の閉じ忘れによってHTML構造が崩れている

idやclass名の指定ミスを確認する

ページ切り替えギミックでは、ボタンやリンクをクリックした時に特定の要素を表示する処理を行います。

例えばJavaScriptで「page2」というidを表示するように設定している場合、HTML側にも同じ名前のidが必要です。

例として、以下のような違いがあると文章は表示されません。

JavaScript側:
document.getElementById(“page2”)

HTML側:
<div id=”page02″>文章</div>

この場合、「page2」と「page02」は別の名前として扱われるため、表示対象を取得できません。

display:noneが解除されているか確認する

ページ切り替えギミックでは、最初は文章を隠しておき、クリック後に表示する方法がよく使われます。

しかし、CSSで以下のような指定をしている場合、JavaScriptが正しく動いていなければ文章は永遠に表示されません。

<div style=”display:none”>表示したい文章</div>

この場合は、クリック時にdisplay:noneを解除する処理が必要になります。表示後の状態が「display:block」や「visibility:visible」などになっているか確認してください。

Wikidot特有の構文エラーにも注意する

SCP Wikiでは通常のHTMLだけではなく、Wikidot独自の構文も利用されています。そのため、HTMLタグやCSSを書き換えた際に構文エラーが発生すると、後続の文章が正常に読み込まれないことがあります。

特に確認したいポイントは以下です。

  • [[div]]や[[/div]]の閉じ忘れ
  • [[span]]や[[/span]]の対応ミス
  • JavaScriptコード内の記号ミス
  • 引用符(”)の閉じ忘れ

例えば、閉じタグが1つ不足しているだけでも、その後に書いた文章全体が非表示になる場合があります。

JavaScriptを使ったページ切り替えで確認するポイント

ページ切り替えギミックでは、JavaScriptが正常に動作しているか確認することも重要です。

ブラウザの開発者ツールを開き、Console(コンソール)にエラーが表示されていないか確認してください。

例えば「Cannot read properties of null」などのエラーが出ている場合、JavaScriptが指定したHTML要素を見つけられていない状態です。

その場合は、id名やclass名、読み込みタイミングを修正することで改善できます。

修正後に確認する手順

SCP記事のギミックを修正した後は、以下の手順で動作確認すると原因を特定しやすくなります。

  1. ページを保存して再読み込みする
  2. 別ブラウザでも確認する
  3. JavaScriptエラーが出ていないか確認する
  4. 切り替え前後のHTML構造を比較する

特にWikidotはキャッシュの影響を受ける場合があるため、修正後すぐに反映されない場合はスーパーリロードを試すことも有効です。

まとめ

SCP記事でページ変更ギミックを追加した後、ページだけ切り替わって文章が表示されない場合は、ギミック自体よりも表示対象の指定やHTML構造の問題であることが多いです。

まずはidやclass名の一致、display設定、Wikidot構文の閉じ忘れ、JavaScriptエラーを順番に確認すると原因を見つけやすくなります。

複雑なギミックほど小さな記述ミスが全体の表示に影響するため、少しずつコードを確認しながら修正することが正常表示への近道です。

ツイッターのフォローはこちらから出来ます!

コメント

タイトルとURLをコピーしました