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のブログタイトルをロゴ画像に変更する方法

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

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

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

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

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

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

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

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

/*-- タイトルの配置 --*/
#header-l {
	float: left;/*後に続く内容を右に回り込み*/
	text-align: left;/*左寄せ*/
}
/*-- ヘッダーの背景部分 --*/
#headbox-bg {
	background: #98fb98;/*背景色*/
	position: fixed;/*要素を上部に固定*/
	top: 0px;/*上からの位置*/
	height: 75px;/*領域の高さ*/
	width: 100%;/*領域の横幅*/
	z-index: 8000;/*重なりの順序*/
	box-shadow: 0px 5px 4px -2px #a0a0a0;/*影*/
}
/*-- タイトルロゴ画像 --*/
.sitename a img{
	position: fixed;/*要素を上部に固定*/
	top: 0px;/*上からの位置*/
	left: 30px;/*左からの位置*/
	width: 250px;/*領域の横幅*/
}
/*-- キャッチフレーズの非表示 --*/
#header-l .descr {
	display: none;/*非表示にする*/
}

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

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

メニュー領域を調整する

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

/*-- グローバルメニュー --*/
#st-menuwide{
	position: fixed;/*要素を上部に固定*/
	top: 18px;/*上からの位置*/
	left: 400px;/*左からの位置*/
	z-index: 8000;/*重なりの順序*/
}
header .smanone ul.menu li a{
	color: #0000ff;/*文字色*/
	font-size: 15px;/*文字サイズ*/
	font-weight: bold;/*文字を太字にする*/
}
#st-menubox a:hover{
	background: #2f4f4f;/*ホバー時の背景色*/
}
header .smanone ul.menu li a:hover{
	color: #fff;/*ホバー時の文字色*/
}
/*-- メニュー幅の自動調整 --*/
header .smanone ul.menu {
	width: 80%;/*領域全体の幅*/
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;/*項目幅の自動調節*/
}

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

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

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

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

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

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

<div id="search">
<form method="get" class="searchform" action="<?php echo esc_url( home_url('/') ); ?>">
<input type="text" placeholder="キーワード検索してみる？" name="s" class="searchfield" value="" />
<input type="submit" value="" alt="検索" title="検索" class="searchsubmit">
</form>
</div>
<!-- /stinger -->

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

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

/*-- ヘッダーの検索フォーム --*/
.searchform {
	float: right;/*右寄せで後の内容を左に回り込み*/
}
.searchfield {/*検索のテキスト*/
	position: fixed;/*要素を上部に固定*/
	background: #7fffd4;/*背景色*/
	border: none;/*ラインなし*/
	border-radius: 10px;/*枠線の丸み*/
	color: #333;/*文字色*/
	cursor: pointer;/*リンクカーソル*/
	height: 40px;/*領域の高さ*/
	width: 40px !important;/*領域の幅*/
	opacity: 0;/*領域の透明度*/
	outline: none;/*縁取りなし*/
	top: 15px;/*上からの位置*/
	right: 25px;/*右からの位置*/
	transition: all 0.7s;/*変化にかかる時間*/
	z-index: 9000;/*重なりの順序*/
}
.searchfield:focus {/*フォーカス時の変化*/
	cursor: text;/*テキストカーソル*/
	opacity: 1;/*領域の透明度*/
	width: 300px !important;/*領域の幅*/
}
.searchsubmit {/*検索のボタン*/
	position: fixed;/*要素を上部に固定*/
	font-family: FontAwesome;/*検索アイコン*/
	font-size: 20px;/*アイコンサイズ*/
	background: #00bfff;/*背景色*/
	border-radius: 50%;/*ボタンの丸み*/
	display: inline-block;/*横並びブロック要素*/
	height: 40px;/*領域の高さ*/
	margin: 0 auto;/*外側の余白*/
	top: 15px;/*上からの位置*/
	right: 25px;/*右からの位置*/
	text-align: center;/*中央揃え*/
	width: 40px;/*領域の幅*/
	z-index: 8000;/*重なりの順序*/
}

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

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

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

　　　　　　　　　　　　　　　　</div>
　　　　　　　　　　　　　　　　<!-- /gazou -->
<?php get_search_form(); ?>
　　　　　　　　　　　　</header>
　　　　　　　　　　　　<div id="content-w">

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

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

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

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

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

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

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

/*-- スクロール広告用エリア --*/
#scrollad {
	padding-top: 80px;/*内側上部の余白*/
	margin-top: -80px;/*外側上部の余白*/
}

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

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

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

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

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

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

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

　　　　　　　　　　　　　　　　</div>
　　　　　　　　　　　　　　　　<!-- /gazou -->
<?php get_search_form(); ?>
<?php if ( is_home() ) : ?>
<div class="header-gazou"><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/画像のファイル名.jpg"></div>
<?php endif; ?>
　　　　　　　　　　　　</header>
　　　　　　　　　　　　<div id="content-w">

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

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

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

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

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

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

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

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

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

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

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

/*-- ヘッダー画像 --*/
.header-gazou {
	margin-top: 15px;/*上の余白*/
	margin-bottom: -30px;/*下の余白*/
	text-align: center;/*中央揃え*/
}
.header-gazou img {
	width: 100%;/*サイズ*/
}

/*-- ブログヘッダー下エリア --*/
#content{
	margin-top: 50px;/*上の余白*/
}

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

スマホ表示を最適化する

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

@media only screen and (max-width: 420px) {/*スマホのみ*/
.sitename a img{/*タイトルロゴ*/
	left: 60px;
}
.header-gazou {/*ヘッダー画像*/
	margin-top: 35px;
}
.searchfield {/*検索テキスト*/
	height: 40px;
	width: 40px !important;
	top: 35px;
	right: 0px;
}
.searchsubmit {/*検索ボタン*/
	height: 40px;
	top: 35px;
	right: 0px;
	text-align: center;
	width: 40px;
}
}

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

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

/*-- アコーディオンメニューボタン --*/
#s-navi dt.trigger .op {
	position: fixed;
	top:35px;
	color: #fff;
	font-size:25px;
	line-height:10px;
	background:#00acff;
	display:block;
	float:left;
	height:auto;
	max-width:20%;
	box-sizing:border-box;
}
#s-navi:after {
	content: "";
	display: block;
	clear: both;
	margin-bottom:5px;
}
#s-navi dd.acordion_tree {
	position: fixed;
	padding: 10px 10px 20px;
	background-color: #00acff;
	color: #fff;
	display: none;
	overflow: hidden;
    top: 75px;
	width: 100%;
	box-sizing: border-box;
	text-align: left;
}
.acordion_tree ul.menu li {
	float: none;
	font-size: 15px;
	padding: 10px 15px 10px 15px;
	list-style:none;
	border-bottom:solid 1px #fff;
}
.acordion_tree ul.menu li a {
	text-decoration: none;
	color: #fff;
}
.acordion_tree ul.menu li .fa {
	min-width: 1em;
}
.acordion_tree ul.menu li:last-child {
	border:none;
	padding-bottom:0px;
}
.menu-close {
	padding:10px;
}
#s-navi dt.trigger {
	cursor: pointer;
	height: 40px;
	overflow: hidden;
}

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

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

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

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