【サボ 様】メニューの固定について（CSSのみ？CSS+JavaScript？）

ヘッダー・メニューの固定についてご相談頂きました。

目次

メニューの固定について

はじめまして、サボと申します。 ワードプレス歴1週間の新参者でして、とうとう行き詰ってしまいました。。

メニューの固定ができずに困っております。 下にスクロールしてもメニューが追いかけてくるものです。 テーマは『twentytwelve』子テーマには『style.css』『functions.php』『header.php』『single.php』があります。

https://plusers.net/wordpress_header_fix このページに紹介されている header { position: fixed;/*ヘッダーを固定*/ z-index: 9999;/*一番前に表示されるように設定*/ top: 0;/*画面一番上で固定*/ width: 100%;/*ヘッダーが横幅いっぱいになるように指定*/ background-color: #ddd;/*背景色を指定*/ } を外観→カスタマイズ→追加CSSに入力してみたところ、 ヘッダーは固定されました。 しかし、コンテンツの先頭部分ががヘッダーの後ろに回り込んでしまったので、 #header { width: 100%; min-width: 960px; height: 100px; position: fixed; left:0; top:0; z-index: 10; } #content{ padding-top: 100px; } #link01 { margin-top:-250px; padding-top:250px; } （ヘッダーの高さは250px） を同じく追加CSSに入力すると、ヘッダーが下がってしまい、コンテンツだけを下げることができませんでした。 貼る場所が悪かったと思うのですが、どこでございましょうか？

他にも、『clingify-master』なるものをDLしまして、子テーマの『css』フォルダにclingify、『js』フォルダに『jquery.clingify』のコピーしましたが、その解説サイトは私が使っているテーマとは異なるテーマでしたので、CSSの貼り付け先がわからず、断念してしまいました。 また、できればヘッダーではなく、メニューのみだけを追従する方法はございますでしょうか。長くなってしまいましたが、お時間がございましたらご回答をよろしくお願いいたしますm(_　_)m

回答

＞サボ様 ご相談ありがとうございます。

まず、基本的にtwentytwelveは固定ヘッダーに向いていないかなと思います。 固定ヘッダーに向いているのはヘッダーが最上部にあるテーマだと思います。 twentytwelveはコンテンツ全体が枠に囲まれたような状態（余白のある状態）になっているため、サイトのHTML構造自体をカスタマイズしないと難しいかもしれません。

固定ヘッダーにこだわるのであれば、最初から固定ヘッダーのテーマを利用した方が良いでしょう。 現在のテーマで、CSSのみでヘッダーを最上部に固定するのは逆に難しいと思います。CSSで固定する場合

基本的にCSSで固定表示する場合は常時固定と思っていただいた方が良いでしょう。

最上部にヘッダー画像、その下にメニューがあって、メニューだけを固定というのはCSSだけではできません。サイトをスクロールしてメニューが最上部に来た時に固定にするという仕組みになっているからです。そういった技術はJavaScriptで行われることが多いです。

例えばメニューを最上部にし、その下に画像を入れるなどができれば、CSSの固定だけで良いと思います。

CSSは追加CSSで構わないと思います。追加場所ではなく、追加するCSSがテーマに合っていないことが問題です。clingifyを利用する場合

こういったライブラリを利用する場合でもヘッダーが最上部にあるテーマの方が望ましいと思います。

利用方法としては 1.サイトにアップする 2.アップしたCSSやJSを読み込ませる 3.CSSやJSの記述をテーマのファイルに行う という形になります。

clingify http://theroux.github.io/clingify/

＞子テーマの『css』フォルダにclingify、『js』フォルダに『jquery.clingify』のコピーしました ということですが、問題はそれらを上手く読み込めているかです。 これにはサーバー上のディレクトリ（フォルダ）の階層・パスに関する理解が求められます。 <script type="text/javascript" src="/js/jquery.js"></script> <script type="text/javascript" src="/js/jquery.clingify.js"></script>

といった記述があると思いますが、これだけではWordPressでは読み込めません。テーマに入れたのであれば、テーマのパスまでを指定しなくてはいけません。

http://example.com/wp/wp-content/themes/twentytwelve/css/ http://example.com/wp/wp-content/themes/twentytwelve/js/ のような形ですね。/wp/などは無い場合もあるでしょう。

WordPressには関数も用意されています。 子テーマフォルダにアップしたなら get_stylesheet_directory_uri 親テーマフォルダにアップしたなら get_template_directory_uri でテーマフォルダまでのURLをPHPで取得することも可能です。上記のキーワードで検索してみましょう。

使用例 <script type="text/javascript" src="<?php echo get_stylesheet_directory_uri() ?>/js/jquery.js"></script>

これがきちんとできれば、後はCSSとJSの記述だけにはなりますが、やはりTwentyTwelveでやるのは逆に難しい作業になってしまうかなという印象です。

CSSは 外観 ＞ カスタマイズ ＞ 追加CSSでも構わないと思いますが、スクリプトの読み込みは公式に習えば footer.phpで行う形になるでしょう。

HTMLやCSSの知識が無ければ大変な部分かもしれません。ご依頼頂ければ作業も可能です。 参考にしていただければ幸いです。