ストーク(STORK)で固定ヘッダーを導入する方法

回遊率を高めることを目的に、少し前から当ブログではヘッダーを固定しています。今回はそんなヘッダー固定のカスタマイズのご紹介です♪CSSをコピペするだけで完了なので、ぜひ試してみてください。

また、スクロールしたら透けるようなカスタマイズも用意しました。

この記事に協力していただいた方

Fwww ⚡️ふうや(@fwww0707)さん

プログラミング歴 7年
WordPress歴 4年
の、なんと大学1年生!中学1年生のころにはプログラミングをしている強者。

プログラマーとしての面ももちろんすごいのですが、アフィリエイターである一面も。「ライバルサイトの分析に最強なSEOツール「SEO Rival Checker」開発しました!!」←アフィリエイターはもちろん、ブロガーもCheck。

ブログ ITWeber

固定ヘッダーとは

固定ヘッダーのサンプル

このページを見てくれているあなたはお気づきだと思いますが、スクロールしてもヘッダーが常に上に固定されていますよね。今回はこの固定ヘッダーの作り方をご紹介していきます!

これから紹介するコードをコピペするだけでOKです。

コピペ先は「親テーマ/子テーマのスタイルシート(外観→テーマの編集)」か「追加CSS(外観→カスタマイズ)」からお好みでお選びください♪

子テーマについては「STORK(ストーク)で子テーマを導入する方法」で詳しく説明してあります。

WordPressでCSSを追加する3つの方法と各メリット・デメリット

ストークのヘッダーを固定する方法

下記コードをコピペしてください。

/* ヘッダーを固定(PC) */
@media only screen and (min-width: 1166px){
#inner-header {
   position: fixed !important;
   width: 100%;
   padding: 0 10%;
   box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
}
/* ヘッダーを固定(タブレット) */
@media only screen and (max-width: 1165px) and (min-width: 768px){
#inner-header {
   position: fixed !important;
   width: 100%;
   box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
}
/* ヘッダーを固定(スマホ) */
@media only screen and (max-width: 767px){
#inner-header {
   position: fixed !important;
   width: 100%;
   box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
}

「PCだけ固定したい」「スマホだけ固定したい」そんなあなたは該当するコードのみコピペしてください。

また、ロゴの大きさを変えたい方はこのコードを追加してください。

#logo img {
   max-height: 40px;
}

合わせてヘッダーの高さは下記のコードを#inner-header { }内に追記していただければ変更できます。

   height: 数字px !important;

コンテンツの表示位置を下げる

このままだとコンテンツが隠れてしまいます。パンくずリストもどこいったの?状態。なので位置をずらしてあげましょう。

/* トップページのコンテンツを少し下に */
.home #content {
   margin-top: 60px;
}
/* パンくずを少し下に */
#breadcrumb {
   margin-top: 60px;
}

これでコンテンツが隠れてしまうことはなくなったはずです!

ストークで記事内の見出しをスクロールに合わせて固定する方法」をしてくれている方へ

固定ヘッダーと見出しか被ってしまうため、下記のコードを追加してください。

.entry-content h2{
   top: 60px;
}
60pxはご自身のヘッダーの高さに合わせて調整してください!

固定ヘッダーをスクロールしたら透過させる

本日のメイン(?)スクロールしたときに透けさせる方法のご紹介です。

下記のコードを、テーマフッター (footer.php)の</body>の前にコピペしてください。PHPファイルをいじるため、少しのミスでページが真っ白になる可能性があります。自分で元に戻せる人はやってみてください!

<script type=”text/javascript”>
//ページ上部からスクロールが100に達したらヘッダーを少し透過
$(window).scroll(function () {
   if ($(this).scrollTop() > 100) {
      $(“#inner-header”).css(“opacity”,”0.7″);
   } else {
      $(“#inner-header”).css(“opacity”,”1.0″);
   }
});
</script>

おわりに:コピペで簡単にヘッダーを固定できる

スクロールで透明にするのは少しむずかしいですが、固定ならコピペで1発でできちゃいます。もしも「いいじゃん!」って思ったら、ぜひやってみてください♪

透明になるコードを書いていただいたふうやくんも要チェックです!プログラマーでありアフィリエイターであり、MacBookChildrenです。すごすぎて書ききれません。笑

この記事に協力していただいた方

Fwww ⚡️ふうや(@fwww0707)さん

プログラミング歴 7年
WordPress歴 4年
の、なんと大学1年生!中学1年生のころにはプログラミングをしている強者。

プログラマーとしての面ももちろんすごいのですが、アフィリエイターである一面も。「ライバルサイトの分析に最強なSEOツール「SEO Rival Checker」開発しました!!」←アフィリエイターはもちろん、ブロガーもCheck。

ブログ ITWeber

スポンサーリンク

為になったらぽちっとシェア!

コメントを残す

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