【STORK】トップページのアニメーションが表示されない問題を解決!

どうも、リュウセイです。

 

実は長らく戦い続けてきた、“トップページのアニメーションが表示されない”という問題を遂に解決することができました。

 

どういうことかと言うと、

 

 

画像の赤枠で囲った部分にテキストとリンクボタンが表示されるはずなのですが、何故か表示されないという現象です。指紋みたいに出ているのは「heatmap.com」というツールによるものです。

 

カスタマイズは反映されているけどアニメーションが表示されないし、ググっても原因が分からないしで、ずっと困っていました。

 

僕は「STORK」というブログテーマを使っていますが(割と有名)、利用者が多いためググったらすぐに情報が手に入ると楽観的に考えていました。ですが、それらしい情報は「カスタマイズの反映の不具合」くらいで、想像以上に困難を極めることになってしまいました…。

 

この手における原因として考えられるのは、

 

  • テーマのコードを誤って消してしまった
  • プラグインとの相性が悪い
  • カスタマイズ反映の不具合

 

ざっとこんなところです。

 

特に「プラグインとの相性が悪い」の線が有力であり、ここら辺の情報が最も多かったです。解決策としては、有効化しているプラグインを無効化して、干渉を起こしているプラグインを探り当てて、削除若しくは別のものに代替するというものです。

 

キャッシュを削除する系やコードをインライン化させる系のプラグインは不具合が比較的起きやすいと言われているので(ここはあまり詳しくありません…)、真っ先に無効化する対象となります。

 

実際に僕も真っ先に無効化してみましたが、結果は変わらず、アニメーションが復活することはありませんでした。カスタマイズ反映の不具合も違うようだったので、となると、テーマエディタを開いて地道にheader.phpのコードをチェックするしかないのか…。

 

いやいや、僕はエンジニアでも何でもないので、コードをチェックしたところで原因など分からないんですよね。まぁ一応見ましたけど。

 

ラチがあかないので、大人しく開発元であるオープンケージに問い合わせてみました。で、返ってきた内容がコチラ↓

 

こちらでソースコードを確認しましたろころ、

入力されたテキストやボタン設定は反映されているようなのですが、

プレビュー上でアニメーション表示ができなくなっているようです。

Javascriptの設定が上手く機能していないことが考えられるのですが、

使用中のプラグインとプログラム干渉を起こしている可能性がございます。

現在、使用されているプラグインを停止するなどして、

テキスト等が表示されるようになるか、ご確認をいただけますでしょうか。

お手数ではございますが、どうぞよろしくお願いいたします。

 

ほうほう、ナルホド…。どうやらJavascriptに原因があるらしい。

 

Javascriptと言えば、僕はheatmap.comとGoogleアドセンスのscriptを埋め込んでいるので、もしかしたらそれが原因なのではないかと疑いました。

 

そしたら案の定、ドンピシャ。上記のscriptの貼り付け位置が誤っていたせいで、それがアニメーションの表示を邪魔していたのです。

 

scriptタグの貼り付け位置を調整したら、無事にアニメーション表示が復活!

 

 

貼り付け位置が悪いというのは具体的に言うと、下の画像のように、上下に空白を設けずにコードを連続して貼り付けていた状況です(コードは<head>~<head>の間に貼り付け)↓

 

 

正しくはこう↓

 

 

多分分かりにくいと思いますが、すみません。要は、

 

種類が違うコードは連続して貼り付けず、必ず上下を空白で挟むことが重要

 

だということです。専門的に言うとどう表現するのかは分かりません。

 

こんな基本的なこと、わざわざ誰も書かないですよね…。いやー知りませんでした(笑)。

 

アニメーションを表示させるコードとアドセンスのコードを、空白を設けずに連続して貼り付けていたせいで、干渉を起こしていたようです。

 

「Javascriptが上手く機能していないのでは」という導きをして下さったオープンケージの担当者様にお礼のメールをして、無事にこの問題とオサラバ致しました。

 

プラグインが原因の場合も多々あるようなので、前述した種類のプラグインには特に注意した方が良いですね。

 

ということで、今回はこの辺にしようと思います。

 

ありがとうございました。

 

チャオ(・∀・)!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です