【サボ 様】メニューの固定について(CSSのみ?CSS+JavaScript?)

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


WordpressのSEO対策ならRoot-013 Root-013ではWordPress・SEO対策・アフィリエイトなどサイト運営に関するご質問に無料でお答えしております。
WordPress 無料相談 アフィリエイト SEO 無料相談 無料!WPインストール代行・集客サポート

メニューの固定について

はじめまして、サボと申します。
ワードプレス歴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://sample.com/wp/wp-content/themes/twentytwelve/css/
http://sample.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の知識が無ければ大変な部分かもしれません。ご依頼頂ければ作業も可能です。
参考にしていただければ幸いです。

おすすめコンテンツ

コメントをどうぞ

  1. ぬおぉぉぉおお(*ノωノ)
    お駄賃ゼロなのに懇切丁寧なリプをもらえ、感謝感激でございますw( ゚Д゚)w
    難しそうということがわかりました。。
    まだWPをはじめてまもなく、ホムペお引越し中でございますので、
    ご回答を頂き恐縮ですが、しばらくメニューはそのままにしとうと思います。
    メニューの追従を希望する際は、こちらにご依頼という形で再度お伺いしたいと思います。
    この度は誠にありがとうございました!m(_ _)m

    1. >サボさま
      コメントありがとうございます!
      僕自身も知識0から始めたので、WordPressを始めた時の苦しみはよく理解できますからね(笑)
      なるべく力になれればなと考えています。

      引っ越しも検討されているということですので、こちらも参考にして頂けると嬉しいです。(宣伝乙w)
      おすすめレンタルサーバー
      また何かあればご相談下さい!

コメントを残す

メールアドレスが公開されることはありません。

コメントの前にご確認ください。

  • コメントは承認制のため、反映・表示までお時間を頂きます。
  • メールアドレス等の入力も必須ではありませんので入力の必要はありません。お気軽にどうぞ。(冷やかしは止めてね!)
  • コメントや返信があっても通知は届きませんのでご注意下さい。
  • 忙しい時はレスが遅れることもあります。
  • 当ページによる一切の不利益および損害に関し、責任を取ることはできません。