Simplicityでモバイルのヘッダーを狭くして最上部に固定表示する方法

Simplicityでは、サイト名にロゴ画像を使用しているとモバイル表示時のヘッダー上下幅がやけに広くなってしまい、狭い値を設定しても思い通りに狭くなりません。

なのでこれまで、当ブログのスマホでの表示はこんな感じでした。

モバイルヘッダーのカスタマイズ

これ、ヘッダー背景を黒系の画像にしているからまだ見れる感じですが、明るい色の背景画像だとこのヘッダー部分がやけに広く感じ、凝ったデザインの背景画像にでもしないと美しくできない感じでした。

ということで、ずっと後回しにしていたけれど今日やっと手を加えてみました。
まずやろうと思ったのは、シンプルに次のこと。

  1. モバイルではロゴ画像を非表示にする
  2. モバイルヘッダーの上下幅を狭くする

で、ちょっとSimplicityのカスタマイズ情報を探してみていたら、なんだかモバイルでのヘッダーがいい感じになっているSimplicity使用ブログを発見。

参考 コピペでOK!スマホでヘッダーを最上部に固定表示する方法 | 主婦の知恵いかがですか

『ヘッダーを最上部に固定表示』

スマホで見た時、パッと見で「これいい!」って感じだったので、ほぼ丸っきり同じようにさせてもらうことにしました。

その完成形がこちらです。

モバイルヘッダーのカスタマイズ

狭いスマホの画面に合った、狭いヘッダーに変更。
さらに、記事をスクロールしていくと画面上部にヘッダーが固定表示される仕様です。

モバイルヘッダーのカスタマイズ

ブログって名前を覚えてもらうのも大事ですよね? まあ英語の長ったらしいブログ名にしておきながら何を言ってるんだって感じではあるんですが、一応このブログも名前を覚えてもらってリピート訪問してもらえたら嬉しいので、ヘッダー固定表示にすることにしました。

以下、やったことの手順を解説します。

Simplicityで広すぎるモバイルのヘッダーをカスタマイズ

このカスタマイズ、ロゴ画像をモバイルでも表示する設定のままだとモバイルヘッダーの上下幅を狭くすることができないので、CSSでロゴ画像を非表示にし、ロゴ画像の代わりにモバイルヘッダー背景画像を使うようなイメージになります。

ということで、まずは設定をいじる前にモバイル用のヘッダー背景画像を用意してください。

モバイルヘッダー背景画像を用意

人によってモバイルヘッダーの理想的なサイズは微妙に違うと思うので、一例として僕の今回作った背景画像のサイズと設定例を紹介します。

モバイルでのヘッダーの高さは「45」で、画像サイズは幅640px、高さ80pxで作成しました。

モバイルヘッダーのカスタマイズ
▲ダッシュボード → 外観 → カスタマイズ → ヘッダー

画像サイズは、高さをヘッダーの設定の約2倍のサイズで作るとちょうどいいようです。
ただ、2倍でジャストサイズというわけではないので、微妙な誤差は出てきてしまいます。僕の場合も本来はヘッダーの高さを当初「40」で設定していましたが、ヘッダー画像の下部が微妙に見切れてしまうので「45」に設定し直しました。適宜調整してみてください。

その他の設定

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

モバイルヘッダーのカスタマイズ

次に「レイアウト(モバイル)」で「モバイルメニュータイプ」を「モーダルメニュー」にします。

モバイルヘッダーのカスタマイズ

「アコーディオン」だと、記事の途中でメニュー操作を開いて閉じた場合も記事のの出だし部分に戻ってしまい、「アコーディオンツリー」だと、メニューボタンがヘッダーの幅いっぱいに表示されてしまうので、今回モダールメニューを選択しています。

引用:shuhu-marketing.com

CSSでロゴ画像の非表示など

ここまでの状態だとヘッダーのロゴと背景画像がダブって表示されたおかしな状態になっているので、最後にCSSを書き加えて表示を整えます。

ダッシュボード → 外観 → テーマの編集 → responsive.css に下記CSSをコピペしてください。

/* モバイルのヘッダーカスタマイズ 参考https://prime-dict.com/?p=1074 */
@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を設定 */
}
}

これで「ファイルを更新」すれば完了です。

おわり

上記CSS、最後に「/* 50pxの値は「ヘッダーの高さ」+10pxを設定 */」というところがありますが、これはヘッダーの高さを「40」にするつもりだったCSSのままの記述です。ヘッダー高さを「45」にしたら僕的にちょうどいい感じになったのでCSSをこのままにしていますが、何か微妙に気に食わない状態だったりしたらこの辺の数字もいじってみてください。

ほとんど丸パクリな記事になってしまったので、最後に改めて今回参考にさせてもらった記事へリンクを貼っておきます。
参考 コピペでOK!スマホでヘッダーを最上部に固定表示する方法 | 主婦の知恵いかがですか

以上です、
ではまた

シェアする

RSS/Feed

この記事と同じカテゴリーの記事一覧はこちら→ Simplicityカスタマイズ, ブログの話


コメント

  1. 匿名 より:

    素晴らしい記事ありがとうございます。
    自分は初心者なのでこういう記事は助かります。
    ただ、simplicityのカスタムは
    あちら立てば、こちら立たずって事が多いです。
    (特にモバイル表示は)
    横表示にすると半分切れた状態になりますねー。

    • ぴらひこ より:

      コメントありがとうございます。

      >Simplicityのカスタムは あちら立てば、こちら立たずって事が多いです

      確かに気持ち分かります。ただどちらかと言うと正確には
      初心者でもカスタムし易いようになっているからつい手に負えないカスタムにまで手を出してしまう、という感じじゃないでしょうか。
      他の有料無料のテーマをいくつも使ったことありますが、特に有料のものだとここまでいじろうとすること自体がそもそも困難なので。

      横表示にすると半分切れた状態になってしまうとのこと、初めて知りました。
      で、(恐らく初めて)このブログをスマホで横表示で見てみたところ、このブログの場合は
      「本来見えてほしくないヘッダーロゴが表示されてしまっている」という状態でした。
      半分切れた状態とは違うので、何かもしかしたらこちらはこの記事更新後にちょろっとCSSをいじったりしていたかも…??
      とにかく理想的な状態とは違う状態でした。ご指摘ありがとうございます。

      自分としては「まあいいや」と思える範囲内かつ、ちょっと以前ほどにはカスタマイズ熱がなく、
      でも今ある知識ではどう修正したら良いか分かりません。
      力不足ですみません。

トップへ戻る