スキン使用時のH2見出しのだぶりについて

Simplicityの特徴 フォーラム Simplicityについての質問 スキン使用時のH2見出しのだぶりについて

このトピックには11件の返信が含まれ、2人の参加者がいます。5 ヶ月、 1 週前 かうたっく さんが最後の更新を行いました。

  • 投稿者
    投稿
  • #53247 返信

    chan

    皆さん、こんにちは。

    スキンについて、もう一つ質問させて下さい。
    スキンの適用の順番なんですが

    Simplicityのスキン機能の仕様

    わいひらさんの記事によると、子テーマにあるスキンが最優先されるとのことなのですが、子テーマのstyle.cssにあるH2やH3の見出しとダブって表示されます。

    以下の記事がダブっているサンプルです。
    https://chan-bike.com/frank

    flowr-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 );
    }
    }

    スキンを適応させた時には、スキン作者が作られた見出しを使いたいので、その時の注意点を教えていただければと思います。

  • #53261 返信
    わいひら
    わいひら
    キーマスター

    子テーマの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で書く必要があるかと思います。

  • #53302 返信

    chan

    わいひらさん、回答ありがとうございます。

    まずは、.article h2 を奇麗に並べ替えて下さってありがとうございます。

    疑似要素を使って、子テーマのstyl.cssに書くのですよね。

    .article h2::before {
    content: “”;
       display: block;
       position: absolute;

    contentはないので””
    displayはblockを指定
    positionはabsolute;

    もう少し、ヒントを下さると助かります。
    過去記事やら色々検索したのですが、以前の設定がキャンセルされるように書くというのが、どう書いて良いのかわからないでいます。
    お時間のある時に、よろしくお願いします。

  • #53308 返信

    かうたっく

    #53261

    .article h2::beforeや.article h2::afterもきちんと上書きされて、以前の設定がキャンセルされるように子テーマのstyle.cssで書く必要があるかと思います。

    これは下記と同じ事かと…

    見出しのカスタマイズがデフォルトのデザインと重複してしまう

    スタイルを初期値に戻すか、コメント化させるか、削除すれば良いかと思われます^^

    /*
    コメントアウト:消したいスタイルを残したい時
    */
  • #53317 返信

    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だけで完結する方法のほうが、バージョンアップの際などにも便利かなと思います。

    もう少し勉強してみます。

  • #53333 返信
    わいひら
    わいひら
    キーマスター

    例えば、.article h2のみを例に挙げますが、before, after今後CSSカスタマイズ使用しないのであれば、以下のように書いても、ポイント部分は消せると思います。

    .article h2::before, 
    .article h2::after {
        display: none;
    }

    キャンセルするということは、CSSの初期値にするということです。
    以下などを参考にしてみてください。
    CSS初期値一覧なチートシート – Qiita
    その他にも「CSS 初期値」で検索するといろいろ出てくるかと思います。

  • #53391 返信

    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を作成してやれば良いのかな。
    まあ、これも勉強課題です。

  • #53454 返信

    かうたっく
    #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用、モバイル用、レスポンシブ用もありますが・・・。

  • #53463 返信

    chan

    かうたっくさん、コメントありがとうございます!

    とりあえず、自分の表示したいスタイルは出来たので良いかとはおもうのですが、違う方法があれば知りたいです。

    ここまで、教えて貰ったことを記事にしました。
    Simplicityでページ毎にスキンを変える方法

    多分、違う所も多々あるかと思いますが、現時点での私のようなシロウトおっさんの分かったことを書いてます。
    あとは、get_theme_mod( ‘skin_file’,null); }でカスタマイザーでスキンを指定しなかった場合の、デェフォルト状態で、自分の見出しを優先させる方法が分かればなあとは思います。

  • #53465 返信

    かうたっく

    デェフォルト状態で、自分の見出しを優先させる方法が分かればなあ

    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のスタイルの表示が消えて、デフォルト状態の子テーマの見出しは反映されませんか

    子テーマのその記載を消す。スキンのほうで指定する。

  • #53654 返信

    chan

    かうたっくさん、コメントありがとうございます!

    色々と、検証したくて、それにはまずはローカル環境を構築して検証するのが良いですよね。
    そこで、instantwordpressで色々と試しているのですが、中々出来ずに試すことが出来ていません。

    http://127.0.0.1:4001/chan-bike と、ローカルアドレスをいれると、
    Index of /chan-bike と出て、下にフォルダらしきものが並ぶ所まで止まってます。
    ・public_html/ の部分をクリックするとスマホ表示のようには表現されているようですが、どこが違うのやらで、毎日格闘しております。 まあ、むつかしいですね!

    わいひらさん、かうたっくさん、引き続き検証していきますので、もうしばらく閉じずに待っていてください<(_ _)>

  • #53656 返信

    かうたっく

    C:\InstantWP_4.5\iwpserver\htdocs\wordpress\wp-content\themesフォルダ内にSimplicity2と子テーマを入れるといいですよね^^

    C:\InstantWP_4.5\iwpserver\htdocs\wordpress ←この名前をchan-bikeに変更しましたか?
    削除して再導入したほうが早いと思いますよっ^^

    chanさんへ

    対応は遅いかもですがここに連絡してもらっても、、すでに当初のものとずれてるので^^;

返信先: スキン使用時のH2見出しのだぶりについて
あなたの情報:




スポンサーリンク
アドセンス(大)
アドセンス(大)