こんにちは!泉です。
このブログでグローバルメニューを作ったのですが、どうにも左に寄ってしまっているのが気になっていました。
こんな感じです。
で、グーグル先生に聞いてみたところ、コピペだけで出来るっていうブログ記事を見つけました!
AFFINGER5カスタマイズ!ヘッダーメニューの幅を調整する方法!
このコードを外観⇒カスタマイズ⇒追加CSSに貼って「公開」を押せばOK!
@media print, screen and (min-width: 960px) {
header .smanone ul.menu {
display: flex; /*フレキシブルボックス*/
text-align: center; /*センタリング*/
}
header .smanone ul.menu li{
width: 100%;
}
}
まさに「これだ!」と思って喜んでコピペ。でもいざコピペをしたのですが、公開ボタンを押すと「何かうまくいかなかったようです。時間を置いてもう一度お試しください。」とワードプレスに言われました。
経験則からこういう場合は時間をおいて後日やってもうまくいきません。
なので調べたのですがよくわからない。CSSとか超苦手なんです。
でも結果としては解決できました!
私の場合は二つ原因がありましたので、同じようなことで困っている方がいたら参考にしてもらえればと思いシェアしますね!
スポンサードサーチ
グローバルメニューがセンタリングできない理由
メニューを作っていなかった
まず一つ目。
私のこのブログはアフィンガー5(WING)を使っているのですが、固定ページで自己紹介とかお問い合わせページを作ったんです。
そしてアフィンガー5の場合固定ページで記事を書くと、メニューが作られていない状態の場合は自動的にそれがグローバルメニューに掲載されるんです。
勝手にグローバルメニューに掲載されて「あ、自動的に作ってくれるんだ。こりゃ便利。」と思ってそのままにしていました。
そして上記のCSSを張り付けたのですが、そもそもプレビューで何も変わりません。
この時点で「公開」ボタンを押しても「何かうまくいかなかったようです。時間を置いてもう一度お試しください。」と表示されます。
しばらく考えてみて、「もしかしてメニューを自分で作らなきゃこのCSSは使えないんじゃ?」と思い、外観⇒メニューからメニューを作りました。
「ヘッダー用メニュー」にチェックをいれるのも忘れずに。
これで自作のグローバルメニューが出来ましたので、もう一度CSSを貼ってみると、ちゃんとプレビューでセンタリングされた!
喜んで「公開」ボタンを押しますが、やっぱり「何かうまくいかなかったようです。時間を置いてもう一度お試しください。」と表示されます。
コメントが邪魔だった
二つ目。
プログラムを書く時、書いている内容が何をしているのかをコメントとして書きます。
今回のを例に挙げると
@media print, screen and (min-width: 960px) {
header .smanone ul.menu {
display: flex; /*フレキシブルボックス*/
text-align: center; /*センタリング*/
}
header .smanone ul.menu li{
width: 100%;
}
}
の
/*フレキシブルボックス*/
/*センタリング*/
の二つがコメントです。
/*と*/で囲むことで「この部分は人が読むのでプログラムとは関係ないですよ」とシステム側に教えているんです。
本来は/*と*/で囲むと、プログラム側はそれを無視してくれるのですが、これがなぜか邪魔だったみたい。
コメント部分を取ってみて公開ボタンを押してみたらちゃんと公開出来ました!
無事にグローバルメニューを真ん中に寄せて公開出来ました!よかった!
まとめ
追加CSSって結構便利で、色々な追加CSSを書くことがあると思うのですが、いろんな機能を書いてみて公開しようとしたら「何かうまくいかなかったようです。時間を置いてもう一度お試しください。」って表示されてしまって追加CSSが公開できない!という状況であれば、コメント部分を取ってみると公開できるかもしれませんよ!
ちなみにテーマのCSSに記載しても反映されなかったけど、追加CSSに記載したら反映したっていう内容もちょいちょい聞くので、もしもStyle.cssに書いてっていう記事を見つけて何か追加で書いたのに反映されない!っていう場合は追加CSSに書くっていうのもオススメですよ!
今回結構な時間悩まされましたが、結果はこういう事でしたwコメントが邪魔することがあるんだねぇ。
尚、追加CSSが保存できない場合は上記なのですが、グローバルメニューがセンタリングできないっていう症状だと、もしかしたら私と同じようにメニューを作っていないってことはないでしょうか?
あなたのお役に立てれば幸いです^^