【Cocoon】CSSでスムーズスクロールを実装

WordPress

前回、WordPressの有名なテーマ『Cocoon』にて、JQueryでスムーススクロールを実装する方法を解説しましたが、今回はプラグインの『Simple Custom CSS』を使ってCSSで実装する方法を解説します。

本記事はテーマが『Cocoon』である事、『Simple Custom CSS』を使うことが前提です。他のテーマでの動作確認および、テーマエディターでの実装は行っておりません。予めご了承ください。

スポンサーリンク

『Simple Custom CSS』をインストールする

まずは、『Simple Custom CSS』をインストール。 ※インストール方法はこちら

インストール後、『外観(1)』⇒『カスタム CSS(2)』の順に選択して『Simple Custom CSS』画面を開きます。

以下のコードを追記(※)します 

//スムーススクロール
html{
  scroll-behavior: smooth;
}

※コード入力後、警告メッセージが表示されますが、そのまま保存します。

追記したら、『カスタムCSSの更新』ボタンをクリック(※)。

※:ボタンは2ヶ所ありますが、どちらを押しても変わりはありません。

これだけです。

Microsoft EdgeやGoogleChromeでは動作確認が出来ていますが、iPhone(iOS端末)のSafariでは動作しません。手っ取り早く実装したい場合はこの方法がおすすめですが、iOS端末のSafariでも動作させたい場合、JQueryでスムーススクロールを実装する方法で実装する法がよさそうです。

タイトルとURLをコピーしました