サブブログ|デスク環境構築サイト運営中

【SANGO】のデフォルトアニメーションを完全OFFにするCSS

SANGOアニメーションOFF

SANGO」は製作者の遊び心で所々アニメーションが実装されてます。

このテーマを使い始めてはや数ヶ月……ちょっとトップの動き(アニメーション)に飽きてきました。笑

そこでアニメーションをOFFにしたら、体感速度が上がった…気がするので、アニメーション飽きたなって方はご参照ください。

補足

SANGO公式のよくある質問コーナー」にもトップアニメーションをOFFにするコードは載ってましたが、まだ不完全だったので今回紹介するコードで完全OFFにできます。

SANGOアニメーションをOFFにした時の比較

スマホトップ

SANGO-モバイルトップアニメーション

アニメーションあり

SANGO-モバイルトップアニメーションOFF

アニメーションなし

補足

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


PCトップ

SANGO-PCトップアニメーション

アニメーションあり

SANGO-PCトップアニメーションOFF

アニメーションなし

カゲサイーカゲオ

どうでしょうか?個人的には結構違うな〜と思いました。

ちなみに、当サイトは「Lazy Load(画像読み込みをスクロールに合わせる)」を実装しているので、画像表示まで少しロスありますが、実装してない方の体感速度はもう少し向上するはずです。

実際のスピードはこんな感じ

※アドセンスをすべて外した数値です。現在は貼ってるので数値は落ちてます。

PageSpeed Insightsカゲサイモバイルトップページ

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

PageSpeed InsightsカゲサイPCトップページ

PCトップページスコア

レンタルサーバーは「MixHost
」を使用しています。

こちらは専用プラグイン「LiteSpeed Cache」が用意されているので、インストールして設定&トップのアドセンスを外せばこれくらいのスピードは出ます。(アイキャッチの画質を落とせばもう少し早くなる)

このプラグイン1つで

  • Lazy Load機能
  • コードの圧縮系
  • キャッシュ関連
  • .htaccess

など全て管理できるので非常に楽

さらに「ConoHa WING」や「エックスサーバー」では禁止されているアダルト表現OKなので、書き手の自由を限りなく実現してくれた数少ないレンタルサーバーなのです。

さらに、2020年2月10日から「WordPressクイックスタート」サービスが提供されました。早い人なら5分、遅くても10分でWordPressを始められる画期的なサービスです。

WordPressブログの始め方・10分で終わる最速クイックスタートを解説

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;}

WordPressスタイルシート

手順
  1. 外観の中の「テーマの編集」をクリック
  2. コード貼り付け
  3. ファイルを更新をクリック

子テーマ??って方はこちらを先に

WordPress子テーマCyberduckの使い方WordPressの子テーマを分かりやすく解説

SANGOアニメーション各コードの解説

この先はそれぞれのコードがどのアニメーションをOFFにしてるのかを解説します。下記のコードを削れば部分的にアニメーションを残すこともできます。

補足

部分的に消す場合は、class同士の間にある,の消し忘れに注意してください。

style.css
.home .header(PCヘッダー), .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ーPCヘッダーアニメーション

SANGO【モバイルナビ】アニメーションをOFF

class名=.mobile-nav ul
SANGOモバイルナビアニメーション


SANGO【ヘッダー下お知らせ欄】アニメーションをOFF

class名=.header-info a
SANGOーヘッダー下お知らせ欄アニメーション


SANGO【記事一覧タブ切替】アニメーションをOFF

class名=.post-tab
SANGO記事一覧タブ切替アニメーション


SANGO【トップ記事一覧】アニメーションをOFF

class名=.cardtype__article:nth-child(n+1)
SANGOトップ記事一覧アニメーション


SANGO【カテゴリー・タグ一覧】アニメーションをOFF

class名=.sidelong__article:nth-child(n+1)
SANGOカテゴリー・タグ一覧アニメーション

SANGOアニメーションOFF【まとめ】

個人的にアニメーションは部分的に使うものであって、トップやアーカイブページで連続して見ると少し疲れますね。

同じく気になってい方の参考になれば〜。

SANGOのSNSシェアボタンをカスタマイズ【SANGO】のタイトル下シェアボタンを丸い追従型にカスタマイズ【SANGO】PCで見たときのあらゆる幅を広げるカスタマイズHTML&CSSカスタマイズ特集コピペですぐ使える・ブログデザイン用カスタマイズコードまとめ

コメントはお気軽にどうぞ

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