Simplicityの特徴 › フォーラム › Simplicityについての質問 › スキン使用時のH2見出しのだぶりについて
- このトピックには11件の返信、2人の参加者があり、最後にかうたっくにより6年、 10ヶ月前に更新されました。
-
投稿者投稿
-
-
chanゲスト
皆さん、こんにちは。
スキンについて、もう一つ質問させて下さい。
スキンの適用の順番なんですがわいひらさんの記事によると、子テーマにあるスキンが最優先されるとのことなのですが、子テーマのstyle.cssにあるH2やH3の見出しとダブって表示されます。
以下の記事がダブっているサンプルです。
https://chan-bike.com/frankflowr-popは、元々親テーマに入っていたのですが、適応順番を考えて子テーマにコピーして試してみたりしたのですが、中々上手くいきません。何度も画面を真っ白に^^;
複数投稿IDの指定は、arrayをかまさないと私の環境ではできませんでした。
function get_skin_file(){ //特定の投稿でスキンを指定する(style.cssのURLを指定) if (is_single(array(1125,732))) {//投稿スラッグでも可 return 'https://chan-bike.com/wp-content/themes/simplicity2-child/skins/flower-pop/style.css'; } else {//それ以外はスキンを適用しない return get_theme_mod( 'skin_file', null ); } }
スキンを適応させた時には、スキン作者が作られた見出しを使いたいので、その時の注意点を教えていただければと思います。
-
わいひらキーマスター
子テーマのstyle.cssにあるH2やH3の見出しとダブって表示されます。
H2とH3がダブっているわけではなく、以下の子テーマのH2カスタマイズとあわせて表示されているだけかと思います。.article h2 { background-color: #effbfb; border-left: 6px solid #4d517d; font-size: 24px; line-height: 2; padding: 0 0 0 25px; }
.article h2::before
や.article h2::after
もきちんと上書きされて、以前の設定がキャンセルされるように子テーマのstyle.cssで書く必要があるかと思います。 -
chanゲスト
わいひらさん、回答ありがとうございます。
まずは、.article h2 を奇麗に並べ替えて下さってありがとうございます。
疑似要素を使って、子テーマのstyl.cssに書くのですよね。
.article h2::before {
content: “”;
display: block;
position: absolute;contentはないので””
displayはblockを指定
positionはabsolute;もう少し、ヒントを下さると助かります。
過去記事やら色々検索したのですが、以前の設定がキャンセルされるように書くというのが、どう書いて良いのかわからないでいます。
お時間のある時に、よろしくお願いします。 -
かうたっくゲスト
.article h2::beforeや.article h2::afterもきちんと上書きされて、以前の設定がキャンセルされるように子テーマのstyle.cssで書く必要があるかと思います。
これは下記と同じ事かと…
スタイルを初期値に戻すか、コメント化させるか、削除すれば良いかと思われます^^
/* コメントアウト:消したいスタイルを残したい時 */
-
chanゲスト
かうたっさん、コメントありがとうございます!
#52481の記事は、見てたのですが、beforeとafterがなかったので、違うかなと思ってました。
それで、以下を子テーマのstyle.cssの各見出し前に追加してみたのですが、変わりませんでした。
.article h2 { border-left :none; margin: 0; font-size: medium; }
そこで、スキンのstyle.cssのh2のスタイルの前に上記を追加すると、出来るのかなと思ってflower-popとskyのH2の前に追加してみたのですが、かわりませんでした。
現在は、子テーマのh2.h3.h4すべてをコメントアウトしました。
これだとスキンを設定した時には良いのですが、スキンのない場合には親テーマの見出しが表示されます。親テーマのstyle.cssの見出し部分のcssを変えれば、出来そうですが、なるべく子テーマのstyle.cssだけで完結する方法のほうが、バージョンアップの際などにも便利かなと思います。
もう少し勉強してみます。
-
わいひらキーマスター
例えば、.article h2のみを例に挙げますが、before, after今後CSSカスタマイズ使用しないのであれば、以下のように書いても、ポイント部分は消せると思います。
.article h2::before, .article h2::after { display: none; }
キャンセルするということは、CSSの初期値にするということです。
以下などを参考にしてみてください。
CSS初期値一覧なチートシート – Qiita
その他にも「CSS 初期値」で検索するといろいろ出てくるかと思います。 -
chanゲスト
わいひらさん、かうたっくさん、ようやく解決できたような気がします。
#53333のわいひらさんが、教えてくれた
.article h2::before, .article h2::after { display: none; }
を小テーマのstyle.cssに書き込んでみました。
こうすると、sken適用時に子テーマのスタイルが適応されます。h2からh4です。この時の意味なのですが、beforeは親テーマのstyle.css afterはskinのstyle.cssを指すのでしょうか? そこの解釈が理解出来てないです。
【自分なりの解決策】
かうたっくさんが、教えてくれた通り、子テーマのstyle.cssの見出しをコメントにしました。
そして、カスタマイザーで設定している、シックのstyle.cssに子テーマで使用していたスタイルを書き込みました。これで、一応は自分の思う、スキン使用時は、スキン作者の方のスタイルを表示。それ以外のシックのページは自分が作成したh2からh4までの見出しスタイルとなりました。
この解決策でよろしいでしょうか? と、私が聞くもの変なのですが、ここでまた疑問が
別に立てたほうが良いのか気になりますが、simplecityデェフォルトで使用する場合には、どこのstyle.cssに書いたらいいんだろうと、いう疑問です。新たに一つshinを作成してやれば良いのかな。
まあ、これも勉強課題です。 -
かうたっくゲスト
#53333のわいひらさんが、教えてくれた .article h2::before, .article h2::after { display: none; } を小テーマのstyle.cssに書き込んでみました。 こうすると、sken適用時に子テーマのスタイルが適応されます。h2からh4です。 この時の意味なのですが、beforeは親テーマのstyle.css afterはskinのstyle.cssを指すのでしょうか? そこの解釈が理解出来てないです。
before、afterは疑似要素といって、この場合はh2タグの前・後ろに装飾したい要素(スタイルやフォント・記号など)を置いて、それを好きな場所にCSSで移動させ装飾することができヤツです笑 おおざっぱですけど…わかるまでが難しい!とか思います><
子テーマstyle.cssに書かれたのなら、その記載は全体デフォルトのCSSです。スキンを使ってないページも、おそらく消えてるかと思います。(キャッシュを削除して確認すれば・・・確認してませんが…)
simplecityデェフォルトで使用する場合には、どこのstyle.cssに書いたらいいんだろう
Simplicity2 child: スタイルシート (style.css)が全体のデフォルトで、個人的にAMPを使ってないので、これだけでもスマホ・タブレット・PCに反映します。ほかAMP用、モバイル用、レスポンシブ用もありますが・・・。
-
chanゲスト
かうたっくさん、コメントありがとうございます!
とりあえず、自分の表示したいスタイルは出来たので良いかとはおもうのですが、違う方法があれば知りたいです。
ここまで、教えて貰ったことを記事にしました。
Simplicityでページ毎にスキンを変える方法多分、違う所も多々あるかと思いますが、現時点での私のようなシロウトおっさんの分かったことを書いてます。
あとは、get_theme_mod( ‘skin_file’,null); }でカスタマイザーでスキンを指定しなかった場合の、デェフォルト状態で、自分の見出しを優先させる方法が分かればなあとは思います。 -
かうたっくゲスト
デェフォルト状態で、自分の見出しを優先させる方法が分かればなあ
Simplicity2 child: スタイルシート (style.css)が全体のデフォルトで、個人的にAMPを使ってないので、これだけでもスマホ・タブレット・PCに反映します。ほかAMP用、モバイル用、レスポンシブ用もありますが・・・。
Simplicity2 child: スタイルシート (style.css)がデフォルトですよ^^
あとは、get_theme_mod( ‘skin_file’,null); }でカスタマイザーでスキンを指定しなかった場合の、デェフォルト状態で、自分の見出しを優先させる方法が分かればなあとは思います
こちらですが
#53333のわいひらさんが、教えてくれた
.article h2::before, .article h2::after { display: none; }を小テーマのstyle.cssに書き込んでみました。
子テーマのCSS、Simplicity2 child: スタイルシート (style.css)『デフォルトのスタイル』に書いてます。。
.article h2::before, .article h2::after { display: none; }
get_theme_mod( ‘skin_file’,null); }でカスタマイザーでスキンを指定したCSSに書けば、スキンに出てくるh2のbefore、afterのスタイルの表示が消えて、デフォルト状態の子テーマの見出しは反映されませんか
子テーマのその記載を消す。スキンのほうで指定する。
-
chanゲスト
かうたっくさん、コメントありがとうございます!
色々と、検証したくて、それにはまずはローカル環境を構築して検証するのが良いですよね。
そこで、instantwordpressで色々と試しているのですが、中々出来ずに試すことが出来ていません。http://127.0.0.1:4001/chan-bike と、ローカルアドレスをいれると、
Index of /chan-bike と出て、下にフォルダらしきものが並ぶ所まで止まってます。
・public_html/ の部分をクリックするとスマホ表示のようには表現されているようですが、どこが違うのやらで、毎日格闘しております。 まあ、むつかしいですね!わいひらさん、かうたっくさん、引き続き検証していきますので、もうしばらく閉じずに待っていてください<(_ _)>
-
かうたっくゲスト
C:\InstantWP_4.5\iwpserver\htdocs\wordpress\wp-content\themesフォルダ内にSimplicity2と子テーマを入れるといいですよね^^
C:\InstantWP_4.5\iwpserver\htdocs\wordpress ←この名前をchan-bikeに変更しましたか?
削除して再導入したほうが早いと思いますよっ^^chanさんへ
Tweets by kautakku対応は遅いかもですがここに連絡してもらっても、、すでに当初のものとずれてるので^^;
-
-
投稿者投稿