認識が違っておりました。
メニューバーとタイトルロゴが左にずれるのではなく、コンテンツが右にずれるようです。
ネガティブマージンで確認できました。
とりあえずネガティブマージンで修正は出来ましたが、原因等をご存知の方お教え願えればと思います。
こんにちは、
現在ご使用のテンプレートは、front page template だと思いますが、このテンプレートで確認したところ こちらでは特に問題は、見つかりませんでした。
ただ、blank front テンプレートを使用した場合は、右にずれている事が確認できました。スタイル指定のバグです。
この問題は、1.452だと
style.cssの最後の行を削除していただくと、修正できると思います。
.rd-col-1.page-template-blank_front.page #yui-main article{
margin-left:135px!important;
}
この blank-front.phpは、かなり古くからあるテンプレートなのですが ちょっと筋が悪いです。
本当は、廃止したいのですが、既存サイトで使用しているユーザーがいると、サイトを壊してしまうため、だましだまし修正しています。
front page templateを使用していて、右にずれているようでしたら、
修正されたスタイルルールを教えてください。（できれば、壊れた状態のサイトがみれるといいのですが、、、）
いつもご丁寧なお答えありがとうございます。
テンプレートは、ご指摘のように「front page template」を使用させていただいています。
変わらずコンテンツが右にずれております。
現在練習中の２つのページでご説明します。
どちらも「front page template」です。
１）ページ幅を950pxに設定したページ
修正したのは、最上部のスライダーを囲むブロック
.slide{
flex-flow:row nowrap;
justify-content: flex-start;
width: 950px;
margin: -30px 0 0 -31px;/*この部分の左マージンで修正しました。現在は修正前の状態にしています。*/
border: 1px solid #666;
}
exp.utairui.com/exp/
２）ページ幅をフルサイズレスポンシブに設定したページ
ブラウザ幅を広げる（またはコンテンツを縮小する）と、メインメニュー内のメニューテキストが左に寄って行くのが確認できると思います。
rev.utairui.com/wp-rev/
もう一つあります。この作業中に「この投稿のカスタムCSS」内に、コメント（/* */）を挿入し「更新」をプレスすると、404エラーになってアクセスできなくなります。
（これは以前にもご相談した内容です。）
以上、ご確認いただければ大変助かります。
CG
(@du-bist-der-lenz)
CSSで使えるコメントは/*ここにコメント*/です。全角のスペースが挟まっていないか、コメントの前はセミコロン出終わっているか確認しましょう。
こちらで、二つのサイトのスクリーンショットをとったものが以下です。
こちらでみると、正常に見えます。
一度確認してほしいのですが、ブラウザの（chromeだと）拡大縮小という項目があると思いますが、これが100%になっているかどうかを調べてみてください。
この作業中に「この投稿のカスタムCSS」内に、コメント（/* */）を挿入し「更新」をプレスすると、404エラーになってアクセスできなくなります。
（これは以前にもご相談した内容です。）
すみませんが、前回の顛末を忘れてしまいました。
投稿のカスタムCSSに以下を記入してみて、
rev.utairui.com/wp-rev/
は、404になりますか？
/**/ {
border:1px solid red;
}
このスタイルの場所が見つからないのですが、ファイル名教えてください。
スライダープラグインのスタイルみたいですが、スライダーのタイプは flex slider とか nivo とか、どれでしょうか？
.slide{
flex-flow:row nowrap;
justify-content: flex-start;
width: 950px;
margin: -30px 0 0 -31px;/*この部分の左マージンで修正しました。現在は修正前の状態にしています。*/
border: 1px solid #666;
}
こんにちは
ずれているように見えますね・・・
style.cssの
body:not(.rd-primary-menu-responsive-active) #access .menu {
margin-right: 2%;
margin-left: 2%;
}
を削除すれば真ん中に来るようですが、レスポンス時などへの影響はよく分かりません。
@munyagu さんありがとうございます。
body:not(.rd-primary-menu-responsive-active) #access .menu {
margin-right: 2%;
margin-left: 2%;
}
ご指摘の通り、responsive用のmargin:autoが、固定ページ用のスタイルで上書きされていたんですね。
@yoisyowaiwai さん 上記スタイルを削除していただくと、とりあえず問題は解決すると思うので、親テーマのstyle.cssから上記のスタイル部分を削除していただくと、問題は解消すると思います。
親テーマのスタイルを変更してほしいという事の意味について、
.rd-primary-menu-responsive-active というクラスは、「カスタマイズ/外観/メニュー/自動レスポンシブ表示」の項目を「はい」にした時に、動的に追加されるクラスなのですが、
プライマリーメニューの項目が、項目数が多いと、小さなブラウザで表示するとメニューが2段になったりしますよね 2段以上の表示を検知した場合に、rd-primary-menu-responsive-activeクラスが、自動的にbody要素に追加されます。 で、このクラスを使って レスポンシブレイアウトのブレークポイントに関わらず「モバイル用のメニューに切り替えるために使っています。」
ここで、CSSだけの問題では解決しない。さらに大きなバグがある事がわかりました。
750pxとか、950px 974px とかの固定ページ幅を選択した場合でも、この機能が働いて、メニューが多いと携帯用のメニューを表示してしまうという問題です。
固定ページ幅では、このような機能は必要ないので、工夫をする必要が出てきました。
このため、レスポンシブレイアウトページでしか、rd-primary-menu-responsive-active クラスを出力しないように変更し、
「カスタマイズ/外観/メニュー/自動レスポンシブ表示」に、固定ページ幅が設定されている場合は、「今固定ページ幅を設定しているので、この機能は働かないよ」というメッセージを表示するように、変更する事にしたいと思っています。
というような変更を考えているので、アップデートの時に、スタイルシートの変更が削除されて、新しい設定になってもらわないと、おかしなことになるかもしれないので
よろしくお願いします。
いずれにしろ、これからしばらくの間テストを重ねてみたいと思っています。
よろしくお願いします。
只今、修正版 Raindrops1.455がライブになりましたので、お知らせします。
@yoisyowaiwai さん 不具合が修正済みであることを確認していただけるとうれしいです。
訂正
誤
responsive用のmargin:autoが、固定ページ用のスタイルで上書き
正
responsive用のmargin:autoが、固定ページ幅用のスタイルで上書き
皆様ありがとうございます。
遅くなりましたが、とりあえず「1.455」に変更してみたところ、メインメニュー内の項目が正常にセンタリングされるのを確認できました。
初歩的な質問ですが、このページは子テーマを作っており、親テーマresponsiveでの確認では正常ですが、子テーマでページを表示すると修正されておりませんでした。
ちなみに、子テーマのstyle.css、function.phpはなにも記述しておりません。
FTPで入れ替えないと反映されないものなのでしょうか。
このページは子テーマを作っており、親テーマresponsiveでの確認では正常ですが、子テーマでページを表示すると修正されておりませんでした。
チャイルドテーマのコメント部分
/*
Theme Name: revsite
Theme URI: -------------
Author: -------------
Author URI: -------------
Version: 0.1
License: GNU General Public License v2.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: raindrops
*/
Versionの項目を0.2とかに変更してください。
変更すると、HTMLソースは、
http://example.com/wp/wp-content/themes/revsite/style.css?ver=0.2
に変更され、style.cssのキャッシュは削除されます
この作業を行って、表示がおかしい場合は、教えてください。
そういうことなのですね。
いつも丁寧なお答えありがとうございます。
正常に修正されておりました。
このトピック中で、お返事もいただいている「この投稿のカスタムCSS内に、コメント（/* */）を挿入し「更新」をプレスすると、404エラー」の件につきまして
404エラーは記入ミスで「403エラー」で、「指定されたページ（ＵＲＬ）へのアクセスは禁止されています。」のメッセージが出るものです。
これはサーバー（lolipopサーバを利用しています）との相性の問題なのかとも考えております。
わかる方がおられれば教えていただきたいと思います。
尚、全角が混じっているとか、セミコロンが無いなどということはありません。
また、このトピックのnobita様からの２回目のお答えの画像について、
＞「こちらで、二つのサイトのスクリーンショットをとったものが以下です。 の部分です。
２番目の小さいカラフルな画像についてですが、「http://exp.utairui.com/exp/」でアクセスすると、上記のnobita様のスクリーンショットと同じ、画像が右に寄ったページが表示されますが、ログイン画面からダッシュボードに行き、そこからサイト表示を選択して同じページを表示すると、画像がセンターにあり、大きさも倍ほどの本来の形（練習中で形は整っておりませんが、他のコンテンツもCSSの効いたもの）でページが表示されます。
不思議な現象で悩んでおります。
この現象は当初気付かないでおりましたが、現在は何度やり直しても同じ症状が出ます。（Firefoxを使用）
理由が想定できる方がおられましたら、是非教えてください。
CG
(@du-bist-der-lenz)
/* */のみではどうでしょう。その間に記載される内容に要因があるのではないか
ありがとうございます。
「/**/」でもスペースを入れて「/* */」でも同じです。
