ぐうたら紺の勉強帳

WordPress、アフィリエイトなど勉強中です。旅行からセール情報まで雑多に書いております。

Gush2

【Gush2】ヘッダーのカスタマイズ:メニューをタイトルの下に表示しよう!

投稿日:2015年6月7日 更新日:

こんにちわ、紺です。
先日、リニューアルの際に、テーマをStinger3からGush2に
変更しました!

実はヘッダー部分が、私がやりたい形にデフォルトで近かった、
というのがGush2を使わせてもらうことの決め手でした!

実際使ってみて、見やすいし書きやすいので、お気に入りの部分は
他にも色々あるのですが、忘れないうちにカスタマイズした内容を
書いておこうと思います。

初心者がカスタマイズ記事を書くことで、初心者の皆様も
「私にも出来るかも」と思っていただければと思い、
間違いをおそれずに書いてみますw

間違いがありましたら、こっそり突っ込んでいただけたら嬉しいです(´・ω・`)

デフォルト状態のヘッダー

タイトル画像も何も入れてないキャプチャですが、標準ではタイトルの
上にメニュー(ピンクの部分)が表示されるようになっています。

これをタイトルとキャプションの下に表示するように、変更します。

guhs2_h_before

ちなみに、この状態ではすでにデフォルトの背景画像を消して、
背景を紺色に変えてあります。
その方法は公式で説明してくださっていますので、ご参照くださいね。

背景画像の削除と設定方法.

header.phpを変更

変更するファイルは、header.phpです。
ダッシュボードの外観>エディタで開きましょう。

開くと、いきなり宇宙語みたいなのが羅列されていてメゲそうになりますが、
よく見て、区切りさえ見つけられれば順番の変更は可能です。
がんばりましょう・・・!

実は、いま久しぶりに見たので、え・・・何この宇宙語?どうやるんだっけ、と
私が一番思っているのは秘密です。

変更するのはここの箇所!

上記箇所をパーツに分けて見る

上記箇所は「header」という箱のなかに、「メニュー部分」と
「タイトル&キャプション部分」の2つのパーツが収められています。
これを、大枠である

の中に、収めれば良いはずです。
というわけで、メニュー部分とタイトル&キャプション部分の
ソースを、まるっと順番を入れ替えましょう。

メニュー部分

タイトル&キャプション部分

入れ替えてみました

タイトルとキャプションの下に、メニューが表示されるようになりました!

guhs2_h_after

メニューのマウスオーバーの表示がはみでる!

メニュー部分には、マウスオーバーした時に、色が変わるような
設定がデフォルトで入っています。ステキ。

ステキなのですが・・・
ここんとこ、下にはみ出ているのが気になってしまうよね!!

guhs2_menu_before

直し方がわからず・・・

ここはCSSなんだろうなぁ、と思い、ごちゃいじってみましたが、
自分では直せず・・・。

細かいところにこだわっていると、他が進まなくなってしまうため、
一旦は無視することに決めました(´・ω・`)
見る度に、はみ出てるよね~と思いながらも、リニューアル版を
公開した時には、はみ出たままになってましたw

Blogger Baseで相談だっ

メニュー部分にカテゴリなどを増やしたかったのですが、それも
はみ出る問題が解決してからでないとなぁ・・・と、なんだか
もやもやしておりました。

そこで、Gush2の開発者であるエローラさん(@uszero800)が
運営されている、「Blogger Base」で相談させていただくことに
しました。

Blogger Base.

そこで回答をくださったのが、いつもお世話になっている、神たまこと
あめたま先生!(@ametama)
「nav#menu ul li」にulと同じheightを設定しなさいよ、と的確な回答を
いただいたのでした!

教えに従い、早速修正。

「1024px ナビゲーション」配下のCSSを修正

Gush2のCSSは、PC用、タブレット用、モバイル用、というように
分けて書かれています。

今回のメニュー部分はPCだけの表示箇所なので、
「1024px ナビゲーション」配下の「/* ナビを表示 */」のところを
下記のように修正しました。

超すっきり解決しました(*´▽`*)!!

修正前

修正後

悩むことも多いけど、カスタマイズは楽しい!

今回は、自力で最後まで解決できていないので、記事にしても
良いのかしら?と思いましたが、あめたま先生(@ametama)が
快く許可してくださったので、せっかくなので書かせていただきました。

お試しになる際は、必ずバックアップをとってから作業してくださいね!
バックアップさえあれば、間違えたら戻せば良いのですから、いくらでも
チャレンジできます。

ちょっと変更して、上手く行った場合はその時のバックアップを
めんどくさいけど、都度都度とっておきましょう。
最初しかとっていないと、また最初からやり直しになってしまいますからね・・・。

出来るだけ自力で頑張りたいところですが、調べてみて、やってみて、
どうしても解決できなければ、先生に教えていただくという方法も
ありますので、ぜひチャレンジしてみてください(*´ω`*)

あめたま先生も講師として参加されるセミナー、心から行きたいのですが、
遠方のため行けないことが残念です(;-;)
【告知】あめたまさんがなんかセミナーで先生やるらしい。 | Love2Labo.com.

-Gush2

Copyright© ぐうたら紺の勉強帳 , 2017 All Rights Reserved Powered by AFFINGER4.