ヘッダー上部に灰色の隙間ができた時の対処法【SANGOカスタマイズ】

sango ヘッダー 灰色 隙間 対処法 カスタマイズ

SANGOといえば、ユーザーに柔らかい印象を与えるデザイン性が素敵ですよね。

僕もオシャレデザインにしたくて、SANGOを購入してすぐカスタマイズに取り掛かりました。

そしたら事件が起きたんです!

そう、ヘッダー部分に謎の灰色が出現したんです!

言ってる意味が分からないって?

大丈夫、僕も同じこと感じていたから。

そのくらいあたふたして、あーでもないこーでもないとやりくりすること小一時間。

やっとの思いで忌まわしき灰色部分を駆逐することができました。

本日はみなさんが僕と同じ苦しみを味合わないために、ヘッダー部分に突然登場した灰色部分の対処法についてまとめました!

ヘッダー上部に灰色の隙間とは?

事件が起きたのは僕がヘッダー部分のデザインカラーや幅を変更している時でした。

sango デザイン テーマ wordpress

ぇ。(・ω・`)

画像上部に見える灰色の部分がお分かりでしょうか?

突然現れたこいつ。
自ら望んで入れたわけではなく、断りなしに登場したんですよね。

よし直そう!と直前の作業を思い出しながらイジること数分・・・。

なおらねぇぇぇえええ!!!!!_(┐「ε:)_

困ったことに直前まではカスタマイズとテーマエディターを往復していたため、どこでミスったのか分からず・・・。

自分が超初心者であることを呪った瞬間でした、ええ。

結局灰色部分を消すのに小一時間かかり、すごく疲れたのが最近のハイライトってわけです。

ヘッダー上部に灰色の隙間ができた時の対処法

直前の作業まで戻る

何か更新作業を入れた後に問題が発生したのであれば、すぐに直前作業に戻りましょう

すごく古典的なことですが、そこで焦ってあれこれイジるとさらに自体は悪化するので。

一旦落ち着いて、どこをどうイジったか思い出して、冷静に対処することをオススメします。

結構直前に戻ったら原因がすぐにわかって、問題点が浮き彫りになったりするんですよね。

バカらしいですが、バカにできない作業なんです。

ちなみに僕はこの作業でも分からずあたふたしたので、次の作業で治りました!

headに全角スペースがある

問題が発生した時、僕はヘッダー部分をイジっていました。

そこで改めて、外観<テキストエディター<テーマヘッダー(header.php)をチェックすることにしました。 sango デザイン テーマ wordpress

確認すると・・・全角スペース入っとるやん!!_φ(TーT )

ということで、速攻全角スペースを消して更新したところ、邪魔だった灰色は一瞬で消え去りました。

なんという凡ミス!

ですが気づけて良かったですし、意外とWordPress上だと分かりにくいんですよね。

テキストエディターだと確実に気づいたのに・・・くっそ!!

反省。バックアップを必ず取ろう

デザイン部分を変更・修正する時はあれから必ずバックアップを取るようになりました。

また直接CSSに修正を入れるんじゃなくて、一度別ファイルでイジってからはめ込むことをオススメします。

その方が間違った時にすぐに戻ることができるので、トラブル回避に繋がりますぜ!

初心者の方ほど間違いやすいですし、1度トラブルとどこで間違ったのか分からなくなります。

ドツボにハマると改修作業だけで何時間もかかってしまい、すごく勿体無いです。

僕みたいにおバカな状態にならないように、バックアップは必須です!

SANGOの子テーマは必須です

補足ですが、子テーマは必ず適応しておきましょう

万が一間違ってしまった時も、子テーマであれば最悪全て消すことも可能です。

また少しの訂正であれば、親テーマのコードで塗り替えればスタートには戻れるんでね。

子テーマ推奨はSANGOのカスタマイズガイドにも書いてあるので、設定方法や使い方は下記でご確認を♪

まとめ

困った時は直前の作業まで全て戻すことが大切ですね!

というか必ずCSSをイジる時はバックアップを取りながら作業することをオススメします。

何かあってからでは修正不可能となる場合も無きにしも非ずですからね。

今回の件のように、header部分に全角スペースが1コマあっただけというボンミスであれば可愛いんですがね(自分で言うな)

この記事が同じお悩みでトラブっている初心者さんに届くことを信じています。

そして早急に解決して、記事制作なりデザインカスタマイズに時間をかけてくだせぇ〜!!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください