お家で「好き」を仕事にしたい!ぱるのブログ

ぱるろぐ

ブログカスタマイズ

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

投稿日:2017年10月6日 更新日:



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

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

[aside type="normal"]この記事に協力していただいた方
[voice icon="https://palulog.com/wp-content/uploads/2017/10/IbeZocW6_400x400-150x150.jpg" name="" type="l thanks"]

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

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

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

ブログ ITWeber

[/voice][/aside]

固定ヘッダーとは

固定ヘッダーのサンプル

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

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

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

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

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

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

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

[box class="blue_box"]/* ヘッダーを固定(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);
}
}[/box]

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

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

[box class="blue_box"]#logo img {
   max-height: 40px;
}[/box]

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

[box class="blue_box"]   height: 数字px !important;[/box]

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

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

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

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

[aside type="warning"]「ストークで記事内の見出しをスクロールに合わせて固定する方法」をしてくれている方へ

固定ヘッダーと見出しか被ってしまうため、下記のコードを追加してください。
[box class="blue_box"].entry-content h2{
   top: 60px;
}[/box]
60pxはご自身のヘッダーの高さに合わせて調整してください![/aside]

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

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

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

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

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

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

[aside type="normal"]この記事に協力していただいた方
[voice icon="https://palulog.com/wp-content/uploads/2017/10/IbeZocW6_400x400-150x150.jpg" name="" type="l thanks"]

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

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

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

ブログ ITWeber

[/voice][/aside]

おすすめ関連記事

-ブログカスタマイズ

Copyright© ぱるろぐ , 2019 All Rights Reserved.