サポート » テーマ » スタイルシートについて

  • 解決済 経理女子ココ

    (@856rcf6a)


    こんにちは。スタイルシートについて疑問点があり、こちらで質問させていただきます。
    現在使用しているテーマは「STINGER PLUS2 Child」です。(名前のとおり子テーマです)初心者にオススメなテーマだとサイトに書かれていたので、このテーマにしました。

    私は、CSSコードを書きたいのです。たくさんのサイト様を参考にさせて頂き編集しましたが、困ったことに私の使用しているテーマには<head>~</head>が見当たりません。それ以前にphpの記載がないようです。以前使用したテーマも同様だったのですが、親テーマに<head>~</head>があって子テーマには<head>~</head>がありません。(cssコードを使用したくてテーマを変更しました)

    そのサイト様では親テーマは編集してはいけないと書かれていたので、子テーマを使用して仕方なく長々とHTMLを毎回記事編集の際に入力している現状です。何としてでも解決したいのです。

    以下が「STINGER PLUS2 Child」スタイルシートに書かれている全文になります。


    —————————————————————————————

    /*
    Theme Name: STINGER PLUS2 Child
    Template: stingerplus2
    Version: 20170621
    */

    /*カテゴリID別に色を指定できます
    例)IDが7の場合
    .catname.st-catid7 {
    background:#ff0000;
    color:#fff;
    }
    */

    /*media Queries タブレットサイズ(960px以下)
    —————————————————-*/
    @media only screen and (max-width: 960px) {

    /*– ここまで –*/
    }

    /*media Queries タブレットサイズ(600px以上)
    —————————————————-*/
    @media only screen and (min-width: 600px) {

    /*– ここまで –*/
    }

    /*media Queries PCサイズ(960px以上)
    —————————————————-*/
    @media print, screen and (min-width: 960px) {

    /*– ここまで –*/
    }

    —————————————————————————————

    何度もCSSを使用したいと思っていましたが、挫折してきました。記事投稿スピードに関わるので、是非とも解決したい事項です。
    お手数ですが、ご回答よろしくお願いします。

6件の返信を表示中 - 1 - 6件目 (全6件中)
  • DRILL LANCER

    (@rickaddison7634)

    CSS は Cascading Style Sheets の略なので、CSS ≒ スタイルシートです。
    (スタイルシートのファイル名は style.css ですよね?)
    なので、そのスタイルシートに CSS のコードを記述すれば OK です。
    参考サイト:CSS とは?

    • この返信は1ヶ月、 3週前にDRILL LANCERが編集しました。

    ご回答ありがとうございます。
    前回の質問内容はスタイルシートについてでしたが、スタイルシートは使用せず「Simple Custom CSS」を使用してCSSの追加をしたいと考えています。(テーマを変更しても追加したCSSをそのまま適応できると書いてあったので)

    以下を入力しました。

    —————————————————————————————
    p {
    font-size: 15px ;
    color: #111 ;
    margin-bottom: 10% ;
    line-height: 220% ;
      letter-spacing:4px ;
    }
    —————————————————————————————

    しかし、記事に反映されません。なぜ反映しないのかを調べようと思ったのですが、初心者ですので、分かりませんでした。簡単な方法を教えてください。
    よろしくお願いします。

    DRILL LANCER

    (@rickaddison7634)

    プロフィールに記載のブログの記事「Blog」ではしっかりと反映されていました(2重に)。
    トップページでは他に優先度が高い要素指定があるためそれに負けている感じです。
    F12から起動可能な開発者ツールを使えばそれが確認可能です。

    ご回答いただきありがとうございます。
    F12ボタンから起動可能な開発者ツールが開けましたが、どの部分(フォルダ?)を確認したらよいのでしょうか?
    また、2重に反映されているとのことですが、どのように対処すべきでしょうか?
    CSS追加した内容を優先させる方法なども教えてくださると幸いです。
    よろしくお願いします。

    DRILL LANCER

    (@rickaddison7634)

    CSS の優先順位は下記サイトが参考になると思います。
    !importantはもう使わない!CSSの優先順位をおさらいしよう

    開発者ツールで反映されている CSS の確認方法は下記が参考になると思います。
    ChromeデベロッパーツールでCSSをチェックする方法

    P.S.
    二重に反映されているのは下記の2つのようです。
    ・おそらく 外観 > カスタマイズ > 追加CSS
    ・Simple Custom CSS

    • この返信は1ヶ月、 2週前にDRILL LANCERが編集しました。

    ご回答いただきありがとうございます。
    ご紹介いただいたサイトを確認しましたが、残念ながら理解できませんでした。しかし今回は二重反映されていた以下のものを消去したところ、きちんと反映するようになりました。
    ・外観 > カスタマイズ > 追加CSS

    反映に関する質問は解決したことにします。ありがとうございました。

6件の返信を表示中 - 1 - 6件目 (全6件中)
  • このトピックに返信するにはログインが必要です。