当ブログと運営者について
スティンガー8

STINGER8のヘッダー大改造!メニュー追尾や画像をキレイに表示する技

STINGER8のヘッダーを大改造

 

どうも、「きにぶろぐ.com」の自由に憧れるフリーマン(@free_manJJ)です。

STINGER8のカスタマイズは一通り行ってきましたが、ブログ内のコンテンツやアクセス数も徐々に多くなってきたので、そろそろブログの「顔」を変更することにしました。

 

私のブログではヘッダー部分に、ロゴ画像とメニューバーというシンプルなデザインで運営してきましたが、もう少し「見栄え良く」かつ「便利性を高く」という部分に着目してみます。

そこでよく利用されているのが追尾式のメニューや、横幅一杯に表示されて個性溢れるインパクト大なヘッダー画像です。

 

特に追尾式のメニューは追尾自体は簡単ですが、キレイに表示するのが難しかったので断念していたんですが、今回本気で乗り出すことにしました。

という訳でSTINGER8のメニュー追尾と画像表示が上手くできたので、スマホ表示の最適化も含めてご紹介していきます。

ヘッダーのビフォーアフターがこちら

まずはヘッダー変更前のビフォーデザインがこちらになります。

 

 

今回のカスタマイズ前に最近のものを撮り忘れたので、画像自体は少し古いものなんですが、デザインそのものはほとんど同じになっています。

ここからどう変化したのかというと、アフターデザインがこちらになります。

 

きにぶろぐ.comのトップページ

 

「これ別のブログじゃないの!?」と勘違いされた方もいるかもしれませんが、これは正真正銘私が運営している「きにぶろぐ.com」のブログですよ!

こうして見比べてみると全然違った印象ですし、なによりインパクトにかなりの差があるかもしれませんね。

 

今回はブログの顔となる重要なヘッダー部分だったこともあって、かなり気合を入れてカスタマイズを行ったので、見栄えと便利性に関してはそこらのブログには負けていないと信じたいです。

CSSやPHPは独学ですが、それでもある程度は使いこなせるようになるので、ぜひ挑戦されてみてほしいと思います。

 

ヘッダーカスタマイズでやりたかったこと

STINGER8のヘッダーをカスタマイズする上で、私が取り入れたかったことはこんな感じです。

  • ブログタイトルとメニューを横一列に表示させる
  • 検索フォームをボタンクリックで表示のアニメーションにする
  • タイトル・メニュー・検索ボタンを画面上部に固定して追尾させる
  • ヘッダー画像を横幅一杯の全画面表示にして余白&サイズを自由に調整
  • アコーディオンメニュー(スマホ用)のデザイン変更とその他の最適化

ロゴ画像だけだとちょっと殺風景だったので、もっとヘッダー部分を効果的に使う方法がないかと考えたら、上記の内容が私的には理想的かなと思います。

追尾式のメニューは、パソコン・スマホ共にユーザビリティに貢献してくれるものなので、ないよりはあった方が便利ですよね。

 

特に私のブログではスマホ画面でのみ、現在記事ページ内にはサイドバーを非表示にしていて「トップへ戻るボタン」もなかったんです。

そこでメニューを画面上部に固定表示させたことで、今までよりは使いやすくなったかなと感じています。

 

今まさに画面上部で追従しているメニューバーから、いつでも簡単に移動できますよね。

また、オリジナルなヘッダー画像を用意していなかったので、完全にイチから作成した訳ではないんですが、少し自分なりにアレンジして表示させたのでとりあえずは満足です。

 

カスタマイズを行う前に

まずカスタマイズを進めていく前に、STINGER8で使用していくファイルを確認しておきましょう。

  • style.css:デザインの調整
  • header.php:ヘッダーに画像・検索ボタンを埋め込む
  • searchform.php:検索フォームを構成するもの

これらのファイル編集はすべて「子テーマ(STINGER8 Child)」で行うので、まだ用意されていない人は公式サイトから入手しておいて下さい。

また、子テーマのデフォルトには親テーマのファイルがすべて入っていないので、「FTP」ソフトを使って追加する必要があります。

 

エックスサーバーを使っている場合は、「FTPソフトをインストールしてファイルを追加する方法」をご紹介しているので、わからない方は参考にされてみて下さい。

通常ファイル編集はワードプレス内で行うことができますが、前回のアップデート以降私のブログではCSS以外はすべてFTPからでないと編集ができなくなりました。

 

「重大な問題を確認するため編集が取り消しされました。」みたいなメッセージが表示されて編集ができない方は、FTPを使ってカスタマイズしていきましょう。

また、今回のカスタマイズには事前に以下の記事で行った内容を元にしています。

参考:インパクト大!STINGER8のブログタイトルをロゴ画像に変更する方法

参考:コピペで1発OK!STINGER8のグローバルメニューを色々カスタマイズ

 

必要ファイルやFTPソフト、デザインのカスタマイズなどの準備ができたら、いよいよ今回のヘッダーカスタマイズを進めていきます。

 

STINGER8のヘッダーメニューを追尾させる

ワードプレスの場合は変更デザインを確認しようとすると、画面上部に管理画面へ移動するための黒いバーが表示されていますが、これってヘッダーのカスタマイズ時は結構邪魔になるんですよね。

なので、ワードプレスメニューの「ユーザー」⇒「あなたのプロフィール」から、ツールバーの設定を変更しておくといいですね。

 

ワードプレスのツールバーの設定画面

 

ブログタイトルや背景の領域を調整する

まずは「style.css」のファイル内に以下のコードを追記していきますが、以前の編集でコードを記入しているかと思うので、その際はこちらのものに変更して下さい。

 

 

また、キャッチフレーズは非表示を想定しているカスタマイズなので、これを表示させている場合は上手く反映されないかもしれません。

これでブログタイトルの上部固定と、スクロールした時の追尾領域を指定できるので、サイズや領域の幅などは任意のものに変更されてみて下さい。

 

メニュー領域を調整する

次にヘッダーにあるグローバルメニューをタイトルエリアに並列させて、メニュー領域をキレイに調整&上部固定にする為、「style.css」の方に追加した以前のコードを以下のものに変更します。

 

 

これでタイトル部分の背景内にメニューが表示されて上部に固定することができ、メニュー項目の数によって全体の幅や文字サイズなどを調整されてみて下さい。

メニュー項目が多いと横にはみ出てしまうことがあるので、その場合は自動調節を解除して2列表示させるといいかと思います。

 

検索フォームのボタン化と追加方法

ここは特に表示させなくてもいい部分なので、とりあえずヘッダーデザインだけを変更したい人は、飛ばしてもらっても構いません。

ワードプレスには既存の検索フォームが用意されていますが、これを使うといまいち表示が上手くできなかったので、検索フォームの構成をイチから作ることにしました。

 

子テーマ内の「searchform.php」の内容をすべて削除して、以下のコードをファイル内に追記します。

 

 

検索バーの中に表示させたいテキストは、好きなものを入力してもらえればいいですよ。

searchform.phpの変更ができたら、「style.css」の方に以下のコードを追記していきましょう。

 

 

通常の検索フォームはテキストエリアと検索ボタンに分かれているんですが、これを上記のCSSコードによって、検索ボタンをクリック・タップすることでテキストエリアが表示されるようになります。

ここではボタンにアクションがあると、300pxの幅があるテキストが左方向に伸びるようになっているので、好きなサイズに変更してお使い下さい。

 

ここまでで検索フォームの構成とボタンデザインの作成が完了したので、「header.php」内に検索ボタンを読み込むコードを追加します。

 

 

header.php内の下部に上記3列目にある「?php~」のコードを追記すると、ヘッダーメニュー右横に検索ボタンが表示されるはずです。

ただ注意点として、もしサイドバーなどに検索フォームを設置している場合は、すべてこのデザインが適用されることと、どこに表示しても上部固定が反映されてしまうので、複数設置ができません。

 

また、以前の設定に戻したい場合は、親テーマ内のsearchform.phpからコードの書き換えとCSS追加コードの削除を行って下さいね。

 

スクロール広告用ウィジェットを利用中の方は

STINGER8ではウィジェットの中に「スクロール広告用」という、パソコンでのみ追従するサイドバーエリアがあります。

もしこのエリアを利用されている場合は今回のカスタマイズをすると、スクロール時に上部固定メニューとサイドバー追従エリアが被ってしまいます。

 

それを避けるためには「style.css」に以下のコードを追記します。

 

 

内側上部の余白を広げることによって間隔を作り、外側上部の余白を縮小することで実際に見たときは、今までと変わらない間隔で表示させることができます。

つまりは上部に見えない余白を作って、被らないようにするためのコードということですね。

 

ヘッダー画像をキレイに表示させる方法

次にヘッダー画像を表示させていきますが、通常であれば「外観」⇒「カスタマイズ」から画像を設定するかと思います。

ただ、ここで設定すると画像サイズが大きくてもリサイズされ、横幅一杯に表示できなかったり、サイズや上下の余白などを自由に調整できなくて、ちょっと使いにくいと感じていませんか?

 

私もそう思ったので、「header.php」にコードを直接入力してCSSで整えられるようにします。

まずはheader.phpファイル内に、先程追加した検索ボタンのコードがあるすぐ下に、以下の4~6列目のコードを追記しましょう。

 

 

5列目のコードが画像を読み込むもので、「画像のファイル名」のところは画像保存時に付けた名前の部分を入力します。

ここでは「jpg」の画像形式ですが、ファイルによって「png」や「jpeg」などがあるので、挿入する画像に対応した形式のものを入力して下さい。

 

また、4列目・6列目のコードはトップページにのみ表示させるためのコードで、これがないと記事ページの上部にも表示されてしまうので、覚えておいて下さいね。

トップページが記事一覧ではなく固定ページで設定されている方は、「home」の部分を「front_page」に変更してお使い下さい。

 

ヘッダー画像を「images」に追加する

上記のコードはSTINGER8の「images」ファイルにある画像を呼び出すものなので、このファイル内に対象の画像データがないと、表示されないので注意しておきましょう。

「images」に画像データを追加するためにはFTPソフトを使うので、早速サーバーと接続を行っておいて下さい。

 

接続できたら、「対象のブログURL」⇒「public_html」⇒「wp-content」⇒「themes」⇒「stinger8-child」⇒「images」と進みます。

あとは対象の画像ファイルを、ドラッグ&ドロップして「images」内にアップロードすることで、ブログのトップページにヘッダー画像が表示されるようになります。

 

ヘッダー画像のサイズや余白を調整する

画像の表示が確認できたら、あとは「style.css」に以下のコードを追加していきます。

 

 

ヘッダー画像が表示されない記事ページでは、「ブログヘッダー下のエリア」で余白を調整しないと、上部に固定表示しているメニューなどに記事ページが重なってしまうので、必ず最適な間隔に設定しましょう。

 

スマホ表示を最適化する

パソコン用の表示のままだとスマホで見たときに崩れてしまうので、以下のコードを「style.css」に追記します。

 

 

タイトルロゴは「center」で調整したかったんですが、うんともすんとも動いてくれなかったので、仕方なく「left」で位置調節している為、スマホ端末によっては多少左右にズレて表示される場合があります。

また、スマホ専用のデフォルトメニュー「アコーディオンメニュー」があるので、これと被らないようにするのと、デザインもわかりやすくしたものが以下のコードです。

 

 

こちらのデザインコードは少し修正していますが、基本的にはこちらの記事からお借りしたものになります。(ありがとうございます!)

【STINGER8】3種メニュー「header・accordion・footer」のデザインカスタム(アイコン有)

 

上記コードに変更後、スマホの方で見たデザインはこちらになります。

 

きにぶろぐ.comのスマホ用トップページ

 

これで問題なく表示されているかと思いますが、念のために確認はしておくようお願いしますね。

これで今回の作業は以上となるので、ここまで進めて来られた方はお疲れさまでした!

 

まとめ

STINGER8のカスタマイズは久しぶりだったのでなかなかに疲れましたが、思った以上にインパクトのあるヘッダーに変貌できたと、私自身では満足できる仕上がりです。

実は地味に苦労したのが検索ボタンで、簡単なアニメーションにするだけでこんなに難しいとは考えていませんでした。笑

 

ネット上で紹介されているコードのほとんどは、STINGER8で正常に表示されないものが多いので、コードを一つ一つ試しながらの作業でしたが、結果的に色々勉強できたので良かったのかもしれませんね。

もしSTINGER8で私のブログのようにヘッダーを変更されたいという方は、ぜひ参考にされてみて下さい。

こちらも読まれています

ABOUT ME
フリーマン
フリーマン
1988年生まれで兵庫県に在住してます。気になることをただひたすらに書き続けて、ブログ運営10ヶ月目で月間10万PV超えを達成。 将来的な資産を作る為に資産運用も実践中。>>詳細プロフィール