回遊率を高めることを目的に、少し前から当ブログではヘッダーを固定しています。今回はそんなヘッダー固定のカスタマイズのご紹介です♪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]
おわりに：コピペで簡単にヘッダーを固定できる
スクロールで透明にするのは少しむずかしいですが、固定ならコピペで１発でできちゃいます。もしも「いいじゃん！」って思ったら、ぜひやってみてください♪
透明になるコードを書いていただいたふうやくんも要チェックです！プログラマーでありアフィリエイターであり、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]