見出し画像

【SANGOカスタマイズ】スマホで上にスクロールしたらヘッダーを表示する

ごきげんよう、ブログ書こうと思って気が付くとCSSをいじってます、バビです。

今回は、下にスクロールすると消えて、上にスクロールすると表示されるヘッダーのカスタマイズです。

言葉だとよく分からないので、以下のサンプル動画で実際の動きを確認してください。

サンプル動画

このタイプのヘッダーをよく見かけていて、ユーザーの邪魔にもなりにくいのでSANGOでも導入できないかと思いカスタマイズしてみました。

<注意>

※WordPressテーマ「SANGO」向けのカスタマイズです。

※このカスタマイズは、私が検索して得たコードをSANGO用に調整したものです。
ある程度知識がある方なら、時間をかけて調べれば作成することができます。
時間を短縮したいという方だけ購入してください。

※FTP(ファイルマネージャー)を操作する必要があり、操作を誤るとサイトが動作しなくなる場合があります。
バックアップをとり、慎重に操作してください。

※基本的に質問は受け付けていません。カスタマイズは自己責任でお願いします。

※最後のjavascriptだけ有料です。


1.SANGOでJavascriptを読み込めるようにする

WordPressは、通常そのままではJavascriptを読み込めません。

ですが、SANGOでは「Javascriptを使いたい」というユーザーのために、簡単に対応できる方法が用意されています。(ほんと凄い!)

以下のページを見ながらJavascriptを読み込ませるための設定を行ってください。

2.CSSコードを子テーマのstyle.cssに貼り付ける

ヘッダーが表示された状態のデザインをCSSで設定します。

こちらのサイトの「SANGOでヘッダーメニューを固定する方法」にあるCSSをコピーします。

外観→テーマの編集→(子テーマの)「style.css」に貼り付けます。

3.JavaScriptをscripts.jsに貼り付ける

手順「1」で作成した「scripts.js」ファイルに以下のコードを貼り付けて保存すれば完成です。

この続きをみるには

この続き:564文字

【SANGOカスタマイズ】スマホで上にスクロールしたらヘッダーを表示する

バビ

300円

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

10

バビ

雑記ブログhttps://shikamori-p.com をメインに、複数ブログを運営しています。 WordPress、特にSANGOの設定やカスタマイズばっかりやっているので、肝心のブログがおろそかです。
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。