うーん・・・

ワードプレスの子テーマ内でcssを使うとデザインが崩れます。

締切済

質問者：yum2yum2
質問日時：2016/04/01 03:32
回答数：2件

お世話になります。
よろしけば教えて頂けると嬉しいです＾＾

当方はhtmlとcssは一応編集出来ますがワードプレスは全くの初心者です。
この度、バズ部さんの[xeory extension]を使い始め、カスタマイズしていますが、質問タイトル通り子テーマを作ってテーマを有効化するとデザインが崩れてしまいます。

始めは「single.php」を主に編集し、記事内にアドセンスを表示するよういじっていたのでそれのせいかと思い、いったん子テーマ内の「single.php」を削除し、style.cssだけ変更して上げたのですがcssは効いても関係の無い所までデザインが崩れました。

その後、ただ単に主となるテーマにリンクするだけで特に指定しない空のstyle.cssを子テーマにしても、有効化するとやはり崩れます。

ドリームウィーバーでutf-8(bomでない)に修正したり、FFFTPの設定をutf-8で上げてるか今一度見直したり、他の方が配布してるzip形式の対応子テーマをそのままFTPでなくワードプレスの管理画面から上げて有効化してもデザインが崩れてしまいました。

色々やってみても共通するのは子テーマ内のcssを適応させた時のみデザインが崩れると言う共通口しか掴めませんでした。
ちなみにテーマの編集からcssを変更してもデザイン崩れは起きませんでした。

何時間やっても解決出来ず、ほとほと困っています。
どうぞ宜しくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： ORUKA1951
回答日時：2016/04/02 09:29

ちゃんと、書いてある。

＞@import url('../xeory_extension/style.css');
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
6.3 @import規則
　'@import'規則は、ユーザーが他のスタイルシートからスタイル規則の取り込みを可能にする。CSS 2.1では、あらゆる@import規則は、他のすべての規則の前に置かなければならない（@charset規則が存在する場合を除く）。ユーザーエージェントが@import規則を無視しなければならない条件については、構文解析の節を参照のこと。'@import'キーワードは、組み込むスタイルシートのURIを続けなければならない。文字列も許容される。文字列は前後にurl(...)を持つかのように解釈される。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Assigning property values, Cascading, and Inheritance - CSS 2.1 spec (ja)( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )］より
　ここだけじゃなく。
1 CSS 2.1仕様について
2 CSS 2.1の手引き
3 適合性：必要条件と推奨事項
4 構文と基本データ型
5 セレクタ
6 プロパティー値とカスケーディング、継承の割り当て
　　6.1 指定値、算出値、実効値
　　　　6.1.1 指定値
　　　　6.1.2 算出値
　　　　6.1.3 使用値
　　　　6.1.4 実効値
　　6.2 継承
　　　　6.2.1 inherit値　
　　6.3 @import規則　　★
　　6.4 カスケード処理
　　　　6.4.1 カスケード処理の順序
　　　　6.4.2 !important規則
　　　　6.4.3 セレクタの詳細度を計算する
　　　　6.4.4 非CSSの見栄えヒントの優先順位
　7 メディアタイプ

　もすべて重要です。
＞スタイルシート構造の細かな理解については基本を今一度見直し、再度勉強していこうと思います！
　決して細かい部分ではありません！！！こちらが重要でプロパティなんか細かいことです。(^^)
　￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣
　どの仕様書でも、重要なものから順番に書いてある。数学と同じように基礎から順番にきちんと学ぶ方がはるかに速く身につけれる。理科や数学と同じ・・

＞ほぼ独学で勉強して覚えた身なので
　なら、なおさらおかしなサイトや指導者に振り回されず、きちんと順番で学べる。独学のほうが早く身につけられるはずです。私はHTMLもCSSも完全に独学ですが、CSS2.1は一か月もかけていない。

@import の部分を消して、そこに
../xeory_extension/style.css
の内容をコピペするとわかるかと

※HTML4.01の仕様書( http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401 … )、CSS2.1の仕様書だけは、まず目を通してみましょう。今まで、なんと遠回りをしてきたかがわかるかと。

- 0
- 件

通報する

この回答へのお礼

ご回答有難うございます！！
仕様書を読んでからお礼しようと思っておりましたので、返事が遅くなりました；

たしかに@importは指定でしたね、そこは見落としてました(・・；！

まずはお勧めして頂いた仕様書から時間を見つけて読んでみたのですがやっぱり専門用語が多くて、
調べながら読み進めるために理解までに時間がかかりそうです。

@import を消してcssをアップロードしてみた所、画面が真っ白になってしまいました…。
何か他にも見落としてる所がありそうなので基本からもう一度見直していこうと思います！

再度ご回答頂きありがとうございました＾＾！！

通報する

お礼日時：2016/04/06 20:09

No.1

回答者： ORUKA1951
回答日時：2016/04/01 19:29

＞style.cssだけ変更して上げたのですがcssは効いても関係の無い所までデザインが崩れました。

　これは、セレクタの書き方がまずいからです。
　HTMLは一切変更しなくても、セレクタの記述ひとつで任意の要素(Element)に対してデザインを指定できます。また、すでにスタイルシートがあっても、後で呼び出されるスタイルシートで上書きもできます。
　なぜって・・・使われているスタイルシートはカスケーディングスタイルシート(CSS)で、カスケーディングの機能を持つからです。そのカスケーディングの仕組みがあるから、カスケーディングスタイルシートが重宝されるのでしたね。

例えば
<body>
　<h1>見出し</h1>
　<p>これは最初の段落</p>
　<p>これは二つ目の段落</p>
　<p>これは三番目の段落</p>
　<h1>これは章のタイトル</h1>
　<p>これは最初の段落</p>
　<p>これは二段目の段落</p>
</body>
で、
h1+p+p{color:red;}
h1+p+p+p{color:green;}
h1:nth-child(2){color:blue;}
だと、どうなる？？？。

スタイルシートをどこで学ばれたかわかりませんが、
CC仕様書( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )の最初のほうに書かれている。
1 CSS 2.1仕様について
2 CSS 2.1の手引き
3 適合性：必要条件と推奨事項
4 構文と基本データ型
5 セレクタ
6 プロパティー値とカスケーディング、継承の割り当て
7 メディアタイプ
は、きちんと順を追って身につけないと・・・
　プロパティなんてその次ですよ。
1) (php)が出力するHTMLは一切手を加えない。
　手を加えるのは、文書の内容だけで文書構造は触らない。
2) その文書構造に基づいてスタイルを適用したい要素をセレクタで特定してスタイルを書く

　この手順を間違えたらドツボにはまる。
ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HT … )
　のサイトをIEかFirefoxのように代替スタイルシートを扱えるブラウザで訪問して
1) HTMLのソースを見る。
　　ウィンドウのどこかで右クリックするとソース表示がある
　文書構造以外何も書いてない
2) ついで、ブラウザの[表示]メニューから[スタイル(シート)]に進み、色々なタイルを選択する
　デザインがガラッと変わますが、もちろんHTMLソースは同じ
3) ブラウザのファイルメニューから[印刷プレビュー]を見る
　印刷用にURLまで表示されたリンク集になる。

　このように、スタイルシートのセレクタの指定ひとつでデザインはどのようにでも変更できるものです。それがCSSの最大の特徴カスケーディング。

1) セレクタの指定でより詳細度の高い書き方をする。
2) 継承されるプロパティとそうでないプロパティを区別する。

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます！
紹介リンクを拝見させて頂きましたが、ほぼ独学で勉強して覚えた身なので言わんとしてる事を完全に理解出来るまでまだ時間がかかりそうです。
スタイルシート構造の細かな理解については基本を今一度見直し、再度勉強していこうと思います！
今はこれしか言えず申し訳ありません；

あとすみません、1点どうしても解せないのでお聞きしたいのですが、ワードプレスの子セレクタに空のスタイルシートをリンクさせただけで、
一切セレクタの指定をしてなのにも関わらず何時も同じ所がデザイン崩れを起こすのは何故なのか推測出来ますでしょうか？

例えば、子テーマのスタイルシートは下記のような記載だけで、他のセレクタへの指定もｐｈｐファイルも入れておらず、
本当にスタイルシートが一枚と子テーマのフォルダしかないのに、有効化したとたんいつも同じ場所が崩れるのです。

私の指定が間違っておりデザイン崩れを起こすのは理解出来るのですが、子テーマでリンクしただけなのにいつも同じ場所が崩れるので理解の糸口へも至らす、
再度質問させて頂きました。お暇な時で構いませんので宜しくお願い致します。

@charset "utf-8";
/* CSS Document */

/*
/*
Template:xeory_extension
Theme Name:xeoryexten_sion_child
Theme URI:http://○○○○○.jp/
Description:Xeory_extensionの子テーマです
Author:質問者
Version:0.1
*/

@import url('../xeory_extension/style.css');