グローバルメニューをスクロール固定する【Simplicity2】

閲覧所要時間: 約 2

74281b8770b9cc5360dbb3bb37f84352_s

グローバルメニューをヘッダーの一番上に固定する方法を紹介したいと思います

私がSimplicityに導入したものはスクロール追従型のグローバルメニュー

スクロール追従型というのは

ページを上下へスクロールしても画面上部に固定表示され続けるメニューのことです。

それではザックリとメモ書きします

スクロール追従型グローバルメニュー実装方法

1、Clingifyをダウンロード

2、必要となるファイルを子テーマフォルダへアップロード

3、子テーマファイルを修正。ClingifyのCSSとjsファイルを読み込み、実行コードを書く

それではザックリ説明させて頂きますね。。。

Clingifyをダウンロード

まず最初にGitHub – theroux/clingifyにてClingifyをダウンロードします。

2018-01-08_19h36_04

clingify-master.zipファイルがダウンロードされるので、その後解凍してこの中にある以下のファイルを使います。

  • clingify.css
  • jquery.clingify.js

テーマへアップロード

Simplicity子テーマフォルダ内に「css」「js」というフォルダを用意してください

wp-content/themes/simplicity2-child/css

wp-content/themes/simplicity2-child/js

css」「js」というフォルダを用意したら、その中へ先程ダウンロードした「clingify.css」と「jquery.clingify.js」をアップロードします。

子テーマへコード追記

CSSを読み込む

アップロードした「clingify.css」を読み込みするため、以下のコードを<head>〜</head>内に記入します。

jsを読み込む実行コードを書く

jquery.clingify.js」を読み込み込む実行コードを書きます

フッター内の手前辺りに記入します!

以上でカスタマイズ完了ですよ!

実際使っているサイトです



JSを使わずCSSだけでも実装出来ますが
私はこの方法が1番お気に入りです。
軽くてサックと動くしグローバルメニューの位置も気にせず使えますよ!

他カテゴリで本日よく読まれてる記事

まだデータがありません。

 関連記事-こちらもどうぞ

 タグ関連記事

20170602170051

Simplicityで使えるスキンの「m-tomato」が凄く良い

Simplicityではスキンと言う機能があり スタイルシートのみで、手軽に外観を変更したい場合は、スキンがお勧めです。 m-tomatoは野菜が背景画像を使っていて私の心にグッと来たので紹介...

記事を読む

ELFA79_jellybeanssk_TP_V4.jpg

wordpressカテゴリ別にカラフル色をつける「Colorful Categories」

Colorful Categoriesの標準はウィゼットに配置する使い方なのですが 今回は個別記事の日付の横などのカテゴリの部分に色を付けるやり方をメモ書きしたいと思います。 通常...

記事を読む

20161029113222

Simplicity 2.3.0 安定版が出ましたよ!

更新がかなり早いので見落としていましたwww かなり前になるけどSimplicity 2.3 安定版 が出ていましたね! もうあえて説明するまでもないくらい知名度のあるテーマで無料...

記事を読む

050b4e229c4b4c1f7cf100a204f2c35d_s.jpg

Simplicityのテーマを使って3つハマった事

1、バイラルサイトっぽいFacebookフォローエリアを作成する方法 2、ブログカード 3、SSL化したサイトで混在アクティブコンテンツが出る 1番ハマったのはバイラルサイトっぽいFa...

記事を読む

20160414162918

最新記事にNEWマークをつける

Simplicityのテーマを使って最新記事にNEWマーク 上の画像のように新しい記事にNEWマークがつきます ソースは以下で配布しています http://codepen.io/Hidekichi...

記事を読む

ブログ管理者などによく売れてる本です

コメントを残す

更新情報

ご挨拶  更新日: 11月05日
20180114005419.jpg
WordPressテーマ国産品の無料テーマchameleonの紹介

chameleonの特徴 1、シンプル なデザイン 2、ヘ

PAK58_kiokuyorikiroku_TP_V.jpg
エックスサーバーでSimplicityをカスタマイズしても反映されない

久々にwordpressテーマSimplicityのカスタマイズを

74281b8770b9cc5360dbb3bb37f84352_s.jpg
グローバルメニューをスクロール固定する【Simplicity2】

グローバルメニューをヘッダーの一番上に固定する方法を紹介したいと思い

b27a471af36017d6c98acf63487003b3_s.jpg
LiteSpeed CacheをONにするとアフィリエイト広告が表示されない現象

アフィリエイト広告を貼り付けても広告が表示されない現象 問題は

050b4e229c4b4c1f7cf100a204f2c35d_s.jpg
Simplicityのテーマを使って3つハマった事

1、バイラルサイトっぽいFacebookフォローエリアを作成する方

→もっと見る


スポンサードリンク