ヘッダーロゴを左に寄せて、右側にメニューを表示させたいのに、
「ヘッダーを分割しない」が解除できない……
という悩みを解決します。
まずは結論から。
原因は、「ヘッダーを分割しない」を解除できないのは、アフィンガーの子テーマ「JET」の仕様だからです。
なので、「JET」の設定をちょちょいと弄れば、あっさり解除できます。
ちなみに設定変更の方法は
- 「JET」の管理画面から設定変更
- スタイルシート(CSS)を書き換える
この2パターンあります。
今回は、2パターンとも試して影響が出るのか出ないのかも見てみたので、同じように悩んでいる人はぜひ参考にしてみてください。
「ヘッダーを分割しない」を解除する手順(通常)
まずは、通常の解除方法の手順を確認しておきます。
1.ダッシュボード左メニューにある「AFFINGER 管理」をクリック。
2.「ヘッダー」クリック
3.両方ともチェックを外し「Save」をクリック
「ヘッダー設定」にある「ヘッダーを分割しない」と「ヘッダーをセンタリング」という項目にチェックが入っていると思うので、チェックを外し「SAVE」をクリック。
通常ならこれで「ヘッダーを分割しない」と「ヘッダーをセンタリング」が解除できてるはずなんですが・・・、なぜかチェックが復活してしまいます。
という感じで、「なんでやねん!」とイライラしていることでしょう。
何回やってもこうなってしまうのは、JET側の設定が原因です。
ノーマルの子テーマの場合は、何の問題もなくヘッダーの分割はできます。しかしJETはデザイン上、センタリングできない仕様になっていると言うことです。
ただ、ジェット側の設定でセンタリングを解除できるようにすることは可能。
その2つの方法について、手順を解説していきます。
JETの管理画面から設定変更する
まずはひとつ目の「JETの管理画面から設定変更」を解説します。
まずは、ダッシュボード左メニューにある「JET管理」をクリックします。
「JET」の管理メニューの下の方にある、「JETによる親テーマ管理設定の上書きを解除する」にチェックを入れて「SAVE」をクリック。
次にAFFINGER管理設定のヘッダー設定を見てみると、いくら外しても復活していたチェックが外れています。
「めっちゃ簡単やん!」って思ったかもしれませんが、ひとつだけ注意点があります。
以下を読んでください。
オリジナル子テーマ「JET」ではデザインを簡単に設定するために親テーマ管理の設定及びカスタマイザーを自動で上書きしています。その為、一部の機能は変更できません。「上書きを解除」することで変更可能になりますがデフォルトの設定及びデザインは無効化されます。(使用方法によってはレイアウトが崩れる可能性もございます。無効化後は必ず自身で確認をしてください。)
JETの受動設定について
なんか怖くないですか?
確認するのもめんどくさいし、もしかしたら気づかないレベルで微妙にレイアウトが変になってた・・・なんてこともありえます。
「う~ん・・・ちょっと不安です」
という方は、「スタイルシートを編集する方法」をやってみてください。
スタイルシートを編集する方法
2つ目の手順は、スタイルシートを編集する方法です。
スタイルシート(CSS)を編集するといっても、手順通りに進めればそんなに難しいことはないので安心してください。
それでは手順を解説します。
まずはダッシュボード左メニューの「外観」→「テーマエディター」をクリック。
AFFINGER JET-Childのスタイルシートが表示されるので、「テーマのための関数(functions.php)」をクリック。
スタイルシートの70行目あたりに、「ヘッダーを分割しない」と「ヘッダーエリアをセンタリング」という記述があると思います。
その上にこう書いてあります。
//←先頭にコメントアウトをつけることで個別に設定を解除できます
つまり、「ヘッダーを分割しない」と「ヘッダーエリアをセンタリング」を解除するためには、赤で囲んだコードの先頭に、「//」をつければOKということです。
先頭に「//」をつけて「ファイルを更新」をクリック。
半角と全角を間違えないように注意!
もう一度、「AFFINGER 管理」→「ヘッダー」を開き、「ヘッダー設定」を確認します。
「ヘッダーを分割しない」と「ヘッダーエリアをセンタリング」のチェックが外れているはずです。
ここまでで、設定解除の手順は終了です。
お疲れさまでした。
まとめ
今回は、「ヘッダーを分割しない」を解除できるようにする方法について解説しました。
やってみると思ったより簡単だったと思います。
2パターンを解説しましたが、どっちを選択するかはお任せします。
ちなみに僕は、2つ目の「スタイルシートを編集する方法」で設定を解除しています。
なぜなら、ピンポイントで「ヘッダーを分割しない」と「ヘッダーエリアをセンタリング」を解除できるので、ほかには影響が出にくいと思ったからです。
参考にしてもらえるとうれしいです(*^^*)