WordPressの「Writr」というテーマが読込完了時にページがズレる不具合

writr
標準

どーも(^-^)/~岡本です。

今回はめちゃくちゃ限定的な内容で、

このブログはWordPressというブログのシステムを使っていて、見た目のデザインは「Writr」というテーマを使用しているのですが、両方あてはまる場合だけ関係する話です。

同じような症状に悩んでいる人の参考になればと思って書いておきます。

 

このサイトのデザインテーマでもある「Writr」はシンプルで使いやすいのですが、1つだけ問題がありまして、

スマートフォンなどで閲覧している時、ページの読込が完了すると、「カクン」とページ全体が下にズレます。(スクロールが戻る)

言葉で説明が難しいので以下の動画を見てみてください。

動画でも分かりにくいかもしれませんが

動画の8秒くらいで、モンスターボールの所までスクロールしたのに、

動画の12秒頃に、上に流れたはずの「緑色のハロ」が再び現れます。(※何も操作していません。)

 

どうやら、このWritrはページの読み込みが完了すると、ページ全体がカクンと下に動くようです。(スクロールしたものが戻ってくる)

 

長い文章を読んでいる時にこの症状が出ると、同じ文章がもう一度出てきた様な錯覚に陥ります。

 

 

解決方法

その問題を解決するために以下のスタイルシートを作りました。

これをWordpressの「外観」→「CSS編集」で開く「CSSエディター」に貼り付けて「スタイルシートを保存」を押してください。

/*読込完了時にカクンとなる対策*/
@media screen and (max-width:959px) {
#masthead {
margin-top: -310px;
}

#content {
margin-top: 270px;
}

#sidebar {
margin-top: -270px;
}
}

これで多分直るはず。

もし症状が改善されない場合は、Wordpressのキャッシュが残っている可能性がありますので、キャッシュをクリアしてください。

 

この解決法はWritrの現時点の最新バージョン「1.2.8」で確認しています。

 

 

こんな感じで今回は、当ブログが読込時に変な動きをする問題について解決してみました。

開設当初からずーっと気になっていた事なので、解決できて良かったです。

では(^o^)/~

オカモトラボ
チョコで「パンのあれ」作りました。ヴィレヴァンで「鼻の穴皿」販売中。スマホアプリ&ウェブサービス公開中。DPZ新人賞佳作/日本おもしろ記事大賞佳作/ヤフー課題解決エンジン賞受賞/ものづくり文化展「面白いで賞」受賞ほか。(⇒もっと詳しく)

コメントを残す

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