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

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

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

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

 

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

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

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

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

動画の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^)/~