WordPressカスタマイズまとめ←クリック

【SANGO】トップページのアニメーションを完全OFFにするCSS

SANGOアニメーションOFF

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

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

そこでアニメーションをOFFにしたら、体感速度がスピードの向こう側に・・・は盛り過ぎかもですが、高速化はされたのでサンゴタク(SANGOを弄りまくってるヲタク)さんやアニメーションに飽きた方はご参照ください。

補足

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なので、書き手の自由を限りなく実現してくれた数少ないレンタルサーバーなのです。(アドセンスもアダルトNGなのでそこだけ注意)

※クレジットカード登録不要で10日間無料お試しできますその後は自動解約されるのでほったらかしでOK!!

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. ファイルを更新をクリック

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

Cyberduckと子テーマの使い方 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【まとめ】

アニメーションをOFFにするだけで、ここまで体感速度が変わると思いませんでした。

スピードの向こう側を体験できたって方は、サンゴタクの方にシェアしてあげてくださいな。

サンゴタク・・・サンゴタク・・・そういえばもうすぐサンタクロースがやってくる季節ではありませんか。

今Amazonでは、豊富なクリスマスギフトを選べる会場が用意されています。売り切れる前に限定品は今のうちからチェックしておきましょう。

この記事のURLとタイトルをコピー
お使いの端末ではこの機能に対応していません。
下のテキストボックスからコピーしてください。
★Amazonは現金チャージがお得★
Amazonギフトチャージ

チャージ額に応じてポイントが貯まります。

プライム会員」なら最大2.5%ポイント還元!!貯まったポイントは次回のお買い物から使えます。さらに、今なら初回購入1000ポイントキャンペーン中!!

※キャンペーン条件がやや複雑なので不安な方は下記の手順を確認してください

STEP1

キャンペーンページへ

Amazonギフトポイント付与キャンペーン

STEP2

エントリー完了後、「Amazonギフト券チャージタイプ」をクリック

Amazonギフトポイント付与キャンペーンエントリー

STEP3

キャンペーン条件の5000円以上を選択または自由金額を5000円以上に入力次へをクリック

Amazonギフトチャージタイプ購入

STEP4

Amazonギフトチャージタイプ支払い方法選択PC

「コンビニ・ATM・ネットバンキング払い・電子マネー払い」を選択次に進むをクリック


STEP5

注意×10

特に何もせず注文を確定するをクリック

Amazonギフトチャージタイプ購入PC

以下キャンペーン条件から外れてしまうトラップについて。

  • 支払い方法の「電子マネー」はNG
  • Amazonギフト券・Amazonショッピングカード・クーポンも使用できるようになっていますがNG
  • 2000円以上で200ポイントも初回特典ですが、チャージは対象外なのでこちらを選択すると本来1000ポイントもらえるのに200ポイントになってしまうのでNG

私はAmazonヘビーユーザーですが、このキャンペーンに関してはユーザーを欺くようなUX(導線)でよろしくないなと思いました。


STEP6

Amazonギフトチャージタイプ購入確認メール

Amazonに登録してるメールアドレスに「お支払い番号のお知らせ」メールが届きます。お支払い方法別の手順」のリンクをクリックしてください。


STEP7

Amazonギフトチャージタイプ支払い確定PC

もう一度言っておきますが、ここで「電子マネーでの支払い」を選択しないように注意してください。

それ以外の支払い方法をクリックすると詳細が載っているので、期限である6日以内に支払いを済ませて完了です。

以上がキャンペーンの手順です。注意点に気をつけながらぜひこの機会に1000ポイントGETしてください。

プライム会員」なら最大2.5%ポイント還元!!

※チャージした金額の有効期限は安心の10年間

ご質問・ご感想・受付中

「メールアドレス入力欄」を削除した為「返信通知」は届きません。
確実に返信が必要な場合は「お問い合わせ」または「TwitterのDM」よりご連絡ください。

他の方にも有益になると判断した質問やコメントは記事に引用させて頂く場合がありますのであらかじめご了承下さい。