広告

AFFINGER6 スクロール時にヘッダー&メニューをtopに固定表示!

3268_affinger6-customize-header-fixed-1

コピペで簡単!ヘッダー&メニューをスクロール時に固定表示!!

観覧者(読者)が見やすいと感じるサイトは「ヘッダー」と「メニュー」が充実している!
→ 見やすいサイトを目指して!簡単な設定をご紹介^^

こんにちは "osaboo"です。"@osaboo_Bot"

Question

スマホのヘッダーメニューはスクロールしても追従するのにパソコンのヘッダーメニューは見えなくなって...ヤダ!

スクロールした時にtopに固定できないの?スクロー中にメニューを見たい時ってあるじゃん...

PCのヘッダーメニューをスクロールに関係なく固定したい!でも...難しい事は解らないし、めんどくさいのはヤダ!初心者でもわかる簡単な方法はないの...

こんなことを感じたことはありませんか!?「当サイトの管理人」は、思いっきりありました!
なので、簡単でおすすめなヘッダーメニューの固定方法をご紹介します。

「手順」通りにやれば、10分足らずで出来ちゃいます。
\(^^)/ 是非やってみてください。

\当サイトで愛用しているおすすめWordPressテーマ  ACTION / AFFINGER6 です!/
『 すごいもくじ LITE 』無料キャンペーン実施中!!

AFFINGER6

「CSSコード」ヘッダー固定用をAFFNGER6用の『WordPress管理画面』で追加する

CSS-code-000

CSS:Cascading Style Sheets

CSSの詳細説明と設定手順を説明していきます。

そもそも『CSS』って何? → 『Cascading Style Sheets』

『CSS』とは「Cascading Style Sheets」の略で通常、スタイルシートとも呼ばれます。

HTMLは見出しやヘッダー情報などWebページの『文書構造』を形作るための言語です。

対してCSS言語は、HTMLで作られた文書構造にデザインを加えて『見栄え』を整える役割を担っています。

Webページは、『MTML』と『CSS』で『文書構造』と『見栄え』を整えてできでいます。

osaboo

サラッと、頭に入れるぐらいで今回は十分だよ!

CSSコードの作成と概略説明【サンプルコード:コピペOK】

それでは、CSSコードを作りましょう。とは言ってもコピペでOKです。

軽く理解できれば問題無いです。

CSSコード(サンプル)

.fixed{

position:fixed;
top:0;
width:100%;
z-index:999999;

}

「.fixed」のclass名は任意ですが『JSコード』でこのclass名にアタッチするので合わせる必要があります。
(CSSとJSで同じ名称になっていれば問題ありません。)

単語意味数値
fixed固定する-
position位置-
top上から0
width100%
index索引・見出し999999

概略説明は飛ばしても構いません。直ぐにコピペしたい方は『CSSの追加方法』へ!

略説明CSSコード(サンプル)

position:fixed;

指定した要素の位置(position)を固定(fixed)するコードです。

postionプロパティーは、今回にように特定の要素の表示位置を固定するさいに使います。

top:0;

「position:fixed;」で指定したセレクタの位置を、上から見てどこに表示するかを指定するコードです。

サンプルコードの値は0。これはブラウザの上から0px、つまり一番上に固定する設定です。

z-index:999999;

z-indexプロパティーは重なる順番を指定するコードです。

何かしら重なるさい、z-inidexの値が低いほど指定セレクタは下になります。

ブラウザはコードは上から順番に読み込みます。
今回は「999999;」を値に設定していますが、より大きなコードでも、小さいなコードでも問題ありません。

ページ内のデザイン要素の中で、一番大きな値を持っていれば問題ありません。

CSSコードの追加方法【WordPress管理画面から追加する】

それでは、CSSコードを追加しましょう。

『WordPress管理>外観>カスタマイズ>追加CSS』を選択すると下画面が表示されます。

『コピーした『CSSコード』を貼り付けます』

3268-1

貼り付けが完了したら『Save』して、CSSの設定は完了です。

osaboo

CSSの設定は、以上でおしまい!超簡単でしょ^^

\ 初心者でも安心」!コスパ最強の洗練されたWordPressテーマ /

AFFINGER6 購入 ▶︎ 詳しくはこちら

「JSコード」ヘッダー固定用をAFFNGER6用の『AFFINGER管理画面』で追加する

JS-code-000

JS:JavaScript

JSの詳細説明と設定手順を説明していきます。

そもそも『JS』って何? → 『JavaScript』

『JS』とは、「JavaScript」を略です。

Webページを動的表現をさせるの簡単なプログラムです。

osaboo

こっちもサラッと、頭に入れるぐらいで今回は十分だよ!

JSコードの作成と概略説明【サンプルコード:コピペOK】

続いて、JSコードを作りましょう。ここもコピペでOKです。

同じ様に、軽く理解できれば問題無いです。

JSコード(サンプル)

<script>
$(function() {
var offset = jQuery('#gazou-wide').offset();

$(window).scroll(function () {
if (jQuery(window).scrollTop() > offset.top) {
jQuery('#gazou-wide').addClass('fixed');
} else {
jQuery('#gazou-wide').removeClass('fixed');
}
});
});
</script>

単語意味
script(scr)簡易なコンピュータープログラム
function関数(タスクが完了するまで使用するプロセス)
jQueryJavaScriptで出来る事をより簡単な記法で実現できる様に設計されたJavaScriptライブラリ
addClassjQuery側から任意のタイミングでclass属性を追加できる命令
if〜elseif文→もしxxxならoooをする等の分岐命令

概略説明は飛ばしても構いません。直ぐにコピペしたい方は『JSの追加方法』へ!

osaboo

ここがキモ!『f12』キーで「自身のサイト」の項目をちょっとだけ理解すると細かく設定できるよ!^^

本記事では『AFFINGER5or6』にて動作確認をしています。固定したいパーツが固定できない場合はサイト上で『F12』キーを使うと確認できます。

「ヘッダーメニュー」以外に「ヘッダー画像」を設定している!あるいは「ヘッダーロゴ」を「ヘッダーメニュー」と一緒に固定したい等の場合は固定するパーツを理解する必要があります。

osaboo

『F12』キーを使って「#」以下のところを探すんだよ!

概略説明JSコード(サンプル)

#gazou-wide(ヘッダーメニュー&ヘッダー画像等を含むので注意)→ 参考 #headbox-bg(ヘッダー部分のみ背景画像含む)#headbox(ヘッダー部分のみ背景画像含まず)※メニューだけの指定もできます。

yajirusi-sita-002

#gazou-wideは「WordPressテーマ AFFINGER5or6」のヘッダーメニュー&ヘッダー画像であり、固定するパーツです。
ヘッダーに画像を設定してなければ特に問題ありません。(ヘッダー画像も固定されます。)

※ 細かく指示したい場合はご注意が必要です。

scrollTopとoffset.top

scrollTopとoffset.topでスクロールの位置がどこにあるのかを判断して、条件分岐につなげています。

addClass

addClassで#gazou-wideに.fixedのclassを付けています。

このクラスの挙動は先ほどのCSSで設定した「位置を固定する」という内容です。

removeClass

removeClassは、条件分岐で動的に付与したクラス(.fixed)を外す役割のコードです。

注)CSSのクラス名をfixedを変更した場合は、JSコード内のfixedの名称も合わせて変更しましょう。

JSコードの追加方法【AFFINGER管理画面から追加する】

それでは、JSコードを追加しましょう。

『AFFINGER管理>その他>コード出力>headに出力するコード』を選択すると下画面(コード未記入)が表示されます。

 コピーした『JSコード』を貼り付けます。

3268-2

貼り付けが完了したら『Save』してサイトを確認しましょう。

osaboo

JSの設定は、以上でおしまい!超簡単でしょ^^

ロリポップ!レンタルサーバーをご利用中の方向けの注意事項 → 本記事の操作を行なって「403Error」が出た場合は、下記の記事にて対処方法をご紹介していますのでご覧ください。

2120_affinger6-403error-1
AFFINGER6&ロリポップ!レンタルサーバー『403 Error』が出た時の対処方法!

ロリポップ!レンタルサーバーを使用してAFFINGER6(ACTION)のヘッダー等の表示系をカスタマイズするとセーブ時に『403 Error』が表示されセーブできない! こんな時はロリポップユーザー専用ページにログインしてWAFの設定を無効にするだけ!

『403Eroor』の対処方法はコチラ

AFFINGER6 ヘッダー&メニュー固定用の各コードを整理

「CSSコード」と「JSコード」をコピペしやすい様に以下のタブに入れておきました。

ご利用ください!

osaboo

①:コードを追加するメニューは、タブに記載したよ!
②:サンプルコードはタブをクリックすると切り替わって見えるよ!

yajirusi-sita-001

CSSコード(サンプル)

.fixed{

position:fixed;
top:0;
width:100%;
z-index:999999;

}

JSコード(サンプル)

<script>
$(function() {
var offset = jQuery('#gazou-wide').offset();

$(window).scroll(function () {
if (jQuery(window).scrollTop() > offset.top) {
jQuery('#gazou-wide').addClass('fixed');
} else {
jQuery('#gazou-wide').removeClass('fixed');
}
});
});
</script>

2203_affinger6-customize-menu-1

AFFINGER6 カスタマイズ!メインカラーとデザイン&メニュー編

AFFINGERをインストールしたけど、どこからカスタマイズすれば良く解らないという方必見です。インストール直後の画面から「サイト全体のデザイン」や「メニュー」等、標準のテンプレート機能を使って簡単に設定する手順をご紹介します。かっこいいメニュー表示も!

記事詳細はこちら

3489_affinger6-customize-header-overall-1a

AFFINGER6 カスタマイズ【ヘッダー画像を全体に表示する方法!】

AFFINGER6を簡単に!大幅に!イメージチェンジさせる方法を初心者が実践。ヘッダー画像をtopページ全体に表示させる方法をご紹介。AFFINGER6を使って初心者でも簡単にカッコよくここまでできるカスタマイズの手順を丁寧にご紹介します。

記事詳細はこちら

「稼ぐ」に特化したWordPressテーマ

action-affinger6-ex-1

ACTION / AFFINGER6
コスパ最強のWordPressテーマ

価格:14,800円(税込)

今なら漏れなく特典付き!!

AFFINGER6 購入 ▶︎ 詳しくはこちら

「結果」を出すためのテーマ・プラグインが揃った戦略的セット

まとめ!AFFINGER6 スクロール時にヘッダー&メニューをtopに固定表示!

今回は、AFFINGER6ヘッダーとヘッダーメニューをご紹介しました。記事中にも書きましたが「固定したい場合」を少しだけ理解するとヘッダー部分のカスタマイズの幅が広がって個性的になると思います。また、楽しいかと...^^

本記事でご紹介した内容が、カスタマイズを楽しむきっかけになればとても嬉しいです。
是非!お試しください。

「最後まで、ご観覧いただきありがとうございました。」
また、次の記事で…お会いしましょう。\^^/