コピペでOK！スマホでヘッダーを最上部に固定表示する方法

こんにちは、連久実子です。

前々回くらいに、PCサイトのグローバルナビゲーションをトップに固定表示させる方法をご紹介しましたが、今回はこの応用です。

PCサイトでグローバルナビゲーションをトップに固定表示する方法

こんにちは、連久実子です。 当サイトでは、構築に無料のWordPressテーマであるSimplicityを利用させていただいています。 このSimplicity、JavaScriptやCSSをごにょごにょしなくとも"管理画面 > カスタマイ…

shuhu-marketing.com

2017.06.20

当サイトでは、構築に無料のWordPressテーマであるSimplicityを利用させていただいていますが、デフォルトの状態だと、スクロールした時ヘッダーやメニューが追従して表示されないので、「メニューを使いたい」と思った時は再びページトップまでスクロールして戻る必要があります。

特にスマホページは、縦に長くなってしまう事が多いので、「これじゃ使い勝手悪いよねー」という事で、メニューを含むヘッダーをトップに固定表示されるようカスタマイズしてみました。

ヘッダーのカスタマイズ方法

今回もSimplicityを利用されている方がそのままコピペで使えるようにソースコードを書いています。JavaScriptやCSSがわからなくても、コピペで実装できますよ！

1. “レイアウト(全体・リスト) “の設定変更

“管理画面 > カスタマイズ > レイアウト(全体・リスト) “で「完全レスポンシブ表示を有効」にチェックを入れます。

次に「モバイルメニュータイプ」からモダールメニューを選択します。

2. “ヘッダー”の設定変更

“管理画面 > カスタマイズ > ヘッダー”で、まずモバイル用の「ヘッダーの高さ」を40にします。

その後つづけて、モバイルヘッダー背景画像を設定してください。画像サイズは、私は幅640px、高さ80pxで作成しました。もし、画像の高さを100pxにするのであれば、先に設定した「ヘッダーの高さ」を50・・・というふうに、「ヘッダーの高さ」は画像サイズの1/2を設定すると良いです。

3. CSSファイルの編集

“管理画面 > 外観 > テーマの編集”で「responsive.css」を選択し、下記のソースコードを追記します。

@media screen and (max-width: 639px) {
#header {
 position: fixed; /* ヘッダーをトップに固定する記述 */
 top: 0;
 width: 100%;
 z-index: 9998;/* ヘッダーがモダールメニューの上に被らない様子にする記述 */
}
#site-title {
 position: relative; /* 「#site-title a」幅を、この要素を基準にさせるための記述 */
 height:40px; /* 「ヘッダーの高さ」と同じ値を設定 */
 margin:0 30px 0 0;
}
#site-title a {
 display: block; /* 「#site-title」の
エリア全体をトップページへのリンクエリアにする記述 */
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}
#site-title a .site-title-img,#h-top #site-description {
 display:none;/* キャッチコピーとタイトル画像を非表示させる記述 */
}
div#main {
 padding: 50px 10px 10px;/* 50pxの値は「ヘッダーの高さ」+10pxを設定 */
}
}

追記ができたら「ファイルを更新」ボタンを押してください。これで完了です。

jQueryがスラスラ書けたら、もう少しスマートに実装できそうなのですが、現時点の私の知識ではこれが精一杯でした。

JavaScript勉強しなきゃ〜