お世話になります。
よろしけば教えて頂けると嬉しいです^^
当方はhtmlとcssは一応編集出来ますがワードプレスは全くの初心者です。
この度、バズ部さんの[xeory extension]を使い始め、カスタマイズしていますが、質問タイトル通り子テーマを作ってテーマを有効化するとデザインが崩れてしまいます。
始めは「single.php」を主に編集し、記事内にアドセンスを表示するよういじっていたのでそれのせいかと思い、いったん子テーマ内の「single.php」を削除し、style.cssだけ変更して上げたのですがcssは効いても関係の無い所までデザインが崩れました。
その後、ただ単に主となるテーマにリンクするだけで特に指定しない空のstyle.cssを子テーマにしても、有効化するとやはり崩れます。
ドリームウィーバーでutf-8(bomでない)に修正したり、FFFTPの設定をutf-8で上げてるか今一度見直したり、他の方が配布してるzip形式の対応子テーマをそのままFTPでなくワードプレスの管理画面から上げて有効化してもデザインが崩れてしまいました。
色々やってみても共通するのは子テーマ内のcssを適応させた時のみデザインが崩れると言う共通口しか掴めませんでした。
ちなみにテーマの編集からcssを変更してもデザイン崩れは起きませんでした。
何時間やっても解決出来ず、ほとほと困っています。
どうぞ宜しくお願い致します。
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
ちゃんと、書いてある。
>@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の仕様書だけは、まず目を通してみましょう。今まで、なんと遠回りをしてきたかがわかるかと。
ご回答有難うございます!!
仕様書を読んでからお礼しようと思っておりましたので、返事が遅くなりました;
たしかに@importは指定でしたね、そこは見落としてました(・・;!
まずはお勧めして頂いた仕様書から時間を見つけて読んでみたのですがやっぱり専門用語が多くて、
調べながら読み進めるために理解までに時間がかかりそうです。
@import を消してcssをアップロードしてみた所、画面が真っ白になってしまいました…。
何か他にも見落としてる所がありそうなので基本からもう一度見直していこうと思います!
再度ご回答頂きありがとうございました^^!!
No.1
- 回答日時:
>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) 継承されるプロパティとそうでないプロパティを区別する。
ご回答ありがとうございます!
紹介リンクを拝見させて頂きましたが、ほぼ独学で勉強して覚えた身なので言わんとしてる事を完全に理解出来るまでまだ時間がかかりそうです。
スタイルシート構造の細かな理解については基本を今一度見直し、再度勉強していこうと思います!
今はこれしか言えず申し訳ありません;
あとすみません、1点どうしても解せないのでお聞きしたいのですが、ワードプレスの子セレクタに空のスタイルシートをリンクさせただけで、
一切セレクタの指定をしてなのにも関わらず何時も同じ所がデザイン崩れを起こすのは何故なのか推測出来ますでしょうか?
例えば、子テーマのスタイルシートは下記のような記載だけで、他のセレクタへの指定もphpファイルも入れておらず、
本当にスタイルシートが一枚と子テーマのフォルダしかないのに、有効化したとたんいつも同じ場所が崩れるのです。
私の指定が間違っておりデザイン崩れを起こすのは理解出来るのですが、子テーマでリンクしただけなのにいつも同じ場所が崩れるので理解の糸口へも至らす、
再度質問させて頂きました。お暇な時で構いませんので宜しくお願い致します。
@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');
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS Dreamweaver のテンプレートでの相対パスの設定について 2 2023/06/13 17:28
- HTML・CSS ワードプレスで太字が反映されません PC(MacBook)の画面上には、太字は反映されるのに、スマホ 3 2022/12/18 18:56
- Ameba(アメーバブログ) アメブロ テンプレート 1 2022/06/27 00:54
- WordPress(ワードプレス) WordPressの編集画面がいつもと違うのですがこれは何でしょう? 1 2023/03/29 10:26
- WordPress(ワードプレス) Wordpress プラグイン Mail Form 7 のファイル添付の表示が切れてしまう 1 2022/03/24 09:05
- その他(プログラミング・Web制作) ワードプレスのプラグインであるAddQuicktagを使いたいが… 3 2022/04/18 15:03
- WordPress(ワードプレス) WordPress のブログを初期化したい。リスクは? 1 2023/01/01 05:47
- WordPress(ワードプレス) Wordpress 複数プラグインの不具合? 1 2022/10/09 21:52
- Wi-Fi・無線LAN 映像も音声も記録出来る無料動画キャプチャソフトを教えて下さい。 3 2023/05/12 16:20
- その他(ブログ) シーサーブログのタイトル文字位置とブログ説明文字位置の変更方法 2 2022/09/22 20:55
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
brにクラスをつけてcssでdispla...
-
最近、HTMLのヘッダーをIDで定...
-
個別にリンクの色を変える方法
-
htmlのid属性って必要なの?
-
HTML要素のid/class名の長さに...
-
divの入れ子を多用してページを...
-
dreamweaverのコード画面で波線。
-
CSSを多用すると遅くなる?
-
CSSに同じclass名がいっぱい‥。...
-
CSSのクラス名・ID名の指定でワ...
-
セルの高さが変化しない(ワー...
-
CSSの文
-
CSS, リンクの色を一部変えるに...
-
クラス内のテーブルが全体に適...
-
スタイルシートで、id属性の中...
-
style属性を使って擬似クラスを...
-
IEにおいて、CSSの記述順番によ...
-
フロートのクリアについて
-
同一行の行頭と行末に2つの要素
-
文字の右寄せの書き方
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
個別にリンクの色を変える方法
-
CSSに同じclass名がいっぱい‥。...
-
HTML要素のid/class名の長さに...
-
idの中のid指定
-
最近、HTMLのヘッダーをIDで定...
-
サイトにjQueryが使用されてい...
-
liリストタグの背景色に色がつ...
-
CSSのホバーエフェクト
-
ページの左右の余白(枠外)に...
-
CSS, リンクの色を一部変えるに...
-
スタイルシートで、id属性の中...
-
htmlのid属性って必要なの?
-
透過背景を解除するにはどうす...
-
外部css定義したclassをht...
-
<span>で2重にかけているものを...
-
CSSのクラス名・ID名の指定でワ...
-
子孫セレクタの読み方をおしえ...
-
Bootstrap3でcontainerがずれる...
-
CSSが効かずどのように指定すれ...
-
brにクラスをつけてcssでdispla...
おすすめ情報