「SANGO」は製作者の遊び心で所々アニメーションが実装されてます。
このテーマを使い始めてはや数ヶ月……ちょっとトップの動き(アニメーション)に飽きてきました。笑
そこでアニメーションをOFFにしたら、体感速度が上がった…気がするので、アニメーション飽きたなって方はご参照ください。
「SANGO公式のよくある質問コーナー」にもトップアニメーションをOFFにするコードは載ってましたが、まだ不完全だったので今回紹介するコードで完全OFFにできます。
目次・読みたい所へタップできます
SANGOアニメーションをOFFにした時の比較
スマホトップ

アニメーションあり

アニメーションなし
※当サイトでは「モバイルナビメニュー」を設置してませんが、そちらもOFFにできます。
PCトップ

アニメーションあり

アニメーションなし

どうでしょうか?個人的には結構違うな〜と思いました。
ちなみに、当サイトは「Lazy Load(画像読み込みをスクロールに合わせる)」を実装しているので、画像表示まで少しロスありますが、実装してない方の体感速度はもう少し向上するはずです。
※アドセンスをすべて外した数値です。現在は貼ってるので数値は落ちてます。

モバイルトップページスコア

PCトップページスコア
レンタルサーバーは「MixHost
」を使用しています。
こちらは専用プラグイン「LiteSpeed Cache」が用意されているので、インストールして設定&トップのアドセンスを外せばこれくらいのスピードは出ます。(アイキャッチの画質を落とせばもう少し早くなる)
このプラグイン1つで
- Lazy Load機能
- コードの圧縮系
- キャッシュ関連
- .htaccess
など全て管理できるので非常に楽
さらに「ConoHa WING」や「エックスサーバー」では禁止されているアダルト表現OKなので、書き手の自由を限りなく実現してくれた数少ないレンタルサーバーなのです。
さらに、2020年2月10日から「WordPressクイックスタート」サービスが提供されました。早い人なら5分、遅くても10分でWordPressを始められる画期的なサービスです。

SANGOアニメーションを完全OFFにするCSSコード
さっそくですが、以下のコードを子テーマの「style.css」にコピペすればOKです。
style.css.home .header,.mobile-nav ul,.header-info a,.post-tab,.cardtype__article:nth-child(n+1),.sidelong__article:nth-child(n+1){animation:none;}
- 外観の中の「テーマの編集」をクリック
- コード貼り付け
- ファイルを更新をクリック
子テーマ??って方はこちらを先に

SANGOアニメーション各コードの解説
この先はそれぞれのコードがどのアニメーションをOFFにしてるのかを解説します。下記のコードを削れば部分的にアニメーションを残すこともできます。
部分的に消す場合は、class同士の間にある,
の消し忘れに注意してください。
style.css.home .header, .mobile-nav ul, .header-info a, .post-tab, .cardtype__article:nth-child(n+1), .sidelong__article:nth-child(n+1){ animation:none; }
SANGO【PCヘッダー】アニメーションをOFF
class名=.home .header

SANGO【モバイルナビ】アニメーションをOFF
class名=.mobile-nav ul
SANGO【ヘッダー下お知らせ欄】アニメーションをOFF
class名=.header-info a
SANGO【記事一覧タブ切替】アニメーションをOFF
class名=.post-tab
SANGO【トップ記事一覧】アニメーションをOFF
class名=.cardtype__article:nth-child(n+1)
SANGO【カテゴリー・タグ一覧】アニメーションをOFF
class名=.sidelong__article:nth-child(n+1)
SANGOアニメーションOFF【まとめ】
個人的にアニメーションは部分的に使うものであって、トップやアーカイブページで連続して見ると少し疲れますね。
同じく気になってい方の参考になれば〜。



※日本語が含まれていないコメントは投稿できません。(スパム対策)