★★★ たった "1日" でできるWordPressブログの作り方講座 ★★★ はじめてみる

simplicityでヘッダー部分を画面上に固定表示する方法

WordPressのテーマの1つである「simplicity」は内部SEO対策が簡単でレスポンシブに対応しているので多くのブログやサイトで使用されている人気のあるテーマです。

また設定から簡単にテーマの外観を変更することができ、カスタマイズ性もあります。

ただヘッダーを固定しようとした場合、そのような設定はsimplicityのカスタマイズ画面にはないので独自にスタイルを追加する必要があります。

そこでここではsimplicityで上部に表示されるヘッダーを固定し、スクロールしても常に表示され続けるようにする方法について解説します。

ヘッダーとは

ヘッダーとは名前通りサイトの上部(ヘッダー)部分に表示されるコンテンツのことです。

simplicityではデフォルトで次のような見た目になっています。

ヘッダー部分には次の内容が表示されます。

  • サイト名
  • サイトデスクリプション(概要)
  • SNSなどのフォローボタン
  • ヘッダー背景

ページを開いたときに一番最初に表示されるサイトの顔になる部分です。

ただしヘッダーのすぐ下に表示されるナビメニューはヘッダーには含まれていません。もしsimplicityでナビメニューもヘッダーに含めたい場合は以下の記事で解説した方法などを使ってください。

ヘッダーの空きスペースが無駄なのでナビメニューをタイトル横やサイト概要横に設置したいと思う人も多いと思いますが、simplicityのカスタマイズ画面ではそのような設定はありません。しかし設定は無くてもテーマのCSSなどを少しだけ編集するだけでそのようなカスタマイズは可能です。ここではヘッダーのタイトルやサイト概要横にナビメニューを表示する方法を解説します。

このヘッダーをカスタマイズするにはメニューから「外観」ー>「ヘッダー」と進み、カスタマイズ画面を開きます。

「ヘッダー」を開くと次のようにヘッダーのカスタマイズ画面がでてきます。

この画面でPCやスマホでのヘッダー画像やヘッダー高さやタイトルテキストの代わりになるロゴ画像などを設定することができます。

ただしヘッダーを固定する設定項目は無いので次に紹介する方法で独自にスタイルを追加する必要があります。

ヘッダーを固定するには

ヘッダーを固定する手順は次の通り

まずメニューから「外観」ー>「カスタマイズ」を開きます。

開くと現在使用しているsimplictyのカスタマイズ画面が開くので次のように一番下までスクロールして「追加 CSS」という項目を開いてください。

「追加 CSS」を開くと下の方に独自CSSコードを入力するテキストエリアが表示されます。

ヘッダーを固定するにはこの独自CSSコードを入力するテキストエリアに次のようなCSSを追加します。

@supports (transform: translateX(-50%)) and (-webkit-transform: translateX(-50%)){
  header{
    height: 100px;
  }

  #header{
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%)

    width: 1070px;
    height: 100px;
    z-index: 100;
    margin: 0 auto;
  }
}

以上の内容を保存すればヘッダーが固定されて表示されます。

ただこれだけですがこのCSS内で何をしているのか次で少し説明しましょう。

このCSSではまず「#header」内の次のコードでヘッダーを固定しています。

position: fixed;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);

position: fixed」と指定することで画面内での位置が固定になります。

そして「left: 50%」で左側から50%の位置にヘッダーの左端を置いて、「transform: translateX(-50%)」で要素の大きさの半分だけ位置を移動させることで画面横中央にヘッダーを表示させています。

またほんの一部ですが、transformプロパティに対応していないブラウザがあるのでその場合はヘッダーを固定しないように最初に@supportsを使って条件分岐させています。

@supports (transform: translateX(-50%)) and (-webkit-transform: translateX(-50%)){

このCSSコードを「公開」ボタンを押して公開するとスクロールされても追従し、画面上部に固定されたヘッダーの完成です。

完成したヘッダーは次のようにサイトを表示したときは普通のヘッダーと見た目は全く変わりません。

しかし下にスクロールしてみると次のようにヘッダーが上部で固定され、常に同じ位置に表示されるようになります。

まとめ

ヘッダーの固定されたサイトというのはあまり多くないのでsimplicityでは固定ヘッダーの設定がないですが、このように独自スタイルを追加すれば簡単に固定ヘッダーは作成できます。

以上simplicityでヘッダーを上部に固定表示する方法について解説しました。

The following two tabs change content below.

フク郎

昔はプログラミングに熱中していたが、ブログとWordPressに興味を持ち始め今はサイト・ブログ作りが生きがい。自分の「好き」をブログに変えたい、情報発信したい人に役立つWordPress術・サイト構築術を発信中。一日一歩楽しんでブログ構築できるように読みやすい&楽しい記事作りを心がけています。Twitterアカウントはこちら ⇒ フク郎@Fukuro-Press