子テーマのstyle.cssの記述が反映されません。

[なっと]

自分のサイト:http://gadjetlife.com/

先日からSimplicity2を利用させていただいています。

初歩的な質問かもしれませんが、テーマの編集のstyle.css及びmobile.cssに記述しても反映されません。

対策として、テーマのカスタマイズの最下部にある追加cssに記述したところ無事反映されました。
ですが、相変わらずmobile.cssを編集する手段がないので困っています。

環境は
　・ロリポップサーバー
　・子テーマ適応済み
　・ブラウザキャッシュ削除済み
　・プラグイン停止済み

といった感じです。
下手くそな文章で申し訳ありませんが、どなたか助言お願いします。

[みき]

相変わらずmobile.cssを編集する手段がないので困っています。

たしかカスタマイザーの完全レスポンシブがオンになっているときは読み込まれないはずです
オフにしてみるとどうなりますか?

[わいひら]

どちらのファイルにも何も記述されていないので、今のところは反映しようもありません。
ファイル自体は読み込まれているようです。
http://gadjetlife.com/wp-content/themes/simplicity2-child/style.css
http://gadjetlife.com/wp-content/themes/simplicity2-child/mobile.css
動作を確認するには、できれば何か双方にスタイルを書き込んでください。

[なっと]

完全レスポンシブの設定はオフになってます。

取り敢えずmobile.cssの方に、

.entry h2 a {
  font-size: 18px;
}

と記述してみました。

[わいひら]

mobile.cssのスタイルもちゃんと適用されています。
スタイルが反映されないのは、以下のスタイルが疲れているからです。

.entry h2 a {
    color: #4387e9;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.4;
}

これはおそらく、テーマカスタマイザーで書かれた部分だと思いますが、これ（もしくはテーマカスタマイザーで書かれた部分全部）をstyle.cssに移動してください。
テーマカスタマイザーで書かれたCSSは、おそらく後から読み込まれるので、mobile.cssの設定を上書きしてしまっています。
どうしても、テーマカスタマイザーで書く必要がある場合は、.entry h2 aより優先度の高いCSSセレクタをmobile.cssに書く必要があります。

[Hidekichi]

> テーマの編集のstyle.css及びmobile.css

いずれもファイルは読み込まれていますので、何かしら書いてもらわないと正しく適用されているかどうかの判断ができません。現在は記述がない、つまり書いてはみたけれどもその内容が保存されないというのが反映されないということなら、ファイルの適用自体はできてますがwordpress上からstyle.cssなど書き込みができないということかと思います。

> mobile.cssを編集する手段がないので困っています

基本的にはftpを使って下さい。cssといえど記述ミスがあれば表示が崩れることがあります。wordpress上で本番環境に直接手を加えてよいのは、だいたいのことをリカバリーできる人です。

それ以外はローカルのPCで記述ミスがないかどうか、できればローカル開発環境やテスト開発環境で動作を確認した後、本番環境に適用させるのが望ましいです。

cssの値を少し変えるぐらいならwordpress上で行っても構わないわけですが、バックアップを取ることを考えると、それでもftpで行うのが望ましいです。

で、cssには読み込み順があるので最後に読み込まれたものがhtml、各セレクタに適用されます。wordpressの追加cssはインラインで、hradタグの中のstyleタグの中に出力されるかと思います。
これは外部cssよりも優先度が高いので子テーマstyle.cssを上書きします。

親テーマstyle.css
子テーマstyle.css
head内のstyleタグ内のインラインcss
htmlタグのstyle属性のcss

と、!importantがついていない場合は優先度は下に行くほど高くなります。またセレクタの書き方によっても変わりますが基本は上記のとおりです。

これらは、親テーマのスタイルを基準に、同じセレクタの同じプロパティをあとで読み込むものが上書きしていくことで最終出力をします。これらはcssの基本なので覚えておいて下さい。

で、本題ですが、確認すべきはまずパーミッションです。
ロリポは過去の問題からセキュリティがガチガチにしてあると思うので、第三者の編集ができないようになっている可能性があります。

パーミッションがガチガチでもftpからログインしたユーザーはオーナーになるのでファイルの上書きができます。
wordpressにログインしたユーザーはwordpress上では管理者ですが、サーバーにあるファイルからしてみればサーバーにログインしたオーナーではありません。

つまり、ここらをまず確認してwordpress上からファイルを上書きできる権限がサーバーの各ディレクトリ、ファイルに対して付けられているかをまず調べます。
これを変更するということは、もし誰かがwordpressにログインしたら各phpファイルやcssを編集できるようになるということです。もしパーミッションが問題ということなら、これら理由を含めftpでやるほうが良いという事に更に意味があることを理解してもらえると思います。

パーミッションの確認と、ftpで何かしら子テーマsyle.cssに書いたものをアップロードするのを基本に、念のため後でそれらをテーマ編集で変更できるかも確認して下さい。

この手の質問は第三者が、サイトを見るだけではわからないwordpress内部やサーバーの使用などの話なので、まずはテーマに問題があるのか、サーバーなどの環境設定に問題があるのかを分ける必要があります。

ロリポでwordpressを利用している人はたくさんいるでしょうから、それらの人が設定をどうやるか書いてると思います。それらをググって意味を理解した上で内容を適用して下さい。それらを行ってもなお、ファイルの編集をwordpress上からできない場合は、wordpressのテーマ編集などについて調べて下さい。

Simplicityはwordpress上のファイル編集に対して何も手を入れてないと思います。上記のサーバーやwordpressの環境を整えてもなおテーマに問題があるかも知れないと思った時は、別のテーマで同じことができるかできないかを確認して下さい。

ここまでやらってもらわないと問題の切り分けができないので、面倒くさいですが確認お願いします。
ftpでやれば確認するまでもないですけどね(笑)

[Hidekichi]

お、回答している間に返信があったようですな。

なんだ書けるじゃん(笑)と思いました。
見た時は中に何も書いてなかったので、てっきり書き込みができないものと想定して回答しましたが、書けるなら単にcssの問題ですね。

インラインで書いたものを全部、style.cssやらに移す所からなので面倒くさいでしょうが頑張って下さい。

[なっと]

解決しました。

style.cssに記述して時間をおいてから確認してみたところ無事反映されていました。
style.cssは、編集が反映されるまで時間がかかるんですね。

くだらない質問をしてしまい申し訳ありませんでした。
そして親切に答えて頂いた皆様、本当にありがとうございましたり

[わいひら]

style.cssは、編集が反映されるまで時間がかかるんですね。

そんなことありません。
通常、ブラウザキャッシュさえ残っていなければ、すぐに反映されます（※CloudFlareのようなCDNを使用していたり、リソースをキャッシュするようなものを使用していなければ）。
トピックの最初の書き込みには、「ブラウザキャッシュ削除済み」とは書いてあるのですが、ちゃんと削除されていなかったのではないかと思います。
次回、もし同様のことがあれば、別のブラウザで表示させるか、ブラウザのシークレット（プライベート）モードなどで表示させてみてください。

[投稿者]

投稿