テーマの編集がstyle.cssでは効かないがfooter-insert.phpだと上手く行く

Simplicityの特徴 フォーラム Simplicity2に関する話題何でも テーマの編集がstyle.cssでは効かないがfooter-insert.phpだと上手く行く

  • このトピックには3件の返信、1人の参加者があり、最後にuにより10年、 6ヶ月前に更新されました。
3件の返信スレッドを表示中
  • 投稿者
    投稿
    • #36742
      u
      ゲスト

      こんにちは。
      いつもお世話になっています。
      今日も、非常に初歩的な質問ですみません。
       simplicity2.0.9a.zip
       simplicity2-child20160110.zip
      を使っています。

      site-description

      の部分の背景色を変えたいと思ったので、初めてテーマの編集機能を試してみました。

      最初に、
      Simplicity2 child: スタイルシート (style.css)

      /*
      #site-description{
      background-color:yellow;
      }
      */

      と記述してみましたが効果ありませんでした。Simplicity1.9.3のstyle.cssを参考に書いてみました。
      /**/で囲う意味も良く分かっていません。

      次に、
      Simplicity2 child: footer-insert.php

      <style>
      #site-description{
      background-color:yellow;
      }
      </style>

      と書いたら上手く行きました。

      質問1
      なぜ style.css では設定が反映されないのでしょうか?

      質問2
      cssの記述を /**/ で囲う理由は何ですか?

      質問3
      Simplicity子テーマ内に入っているファイルの役割について解説
      http://wp-simplicity.com/simplicity-child-theme-files/
      にある、
      javascript.js
      を編集する方法を試したいのですが、このファイルを編集する機能が
      テーマの編集
      画面に見当たりません。どうやって編集すれば良いでしょうか?

      以上、急ぎではありませんので、お時間の有る時にお教え頂けると有り難いです。
      よろしくお願いします。

    • #36743
      Hidekichi
      ゲスト
      /*
      #site-description{
      background-color:yellow;
      }
      */

      これはコメントアウトです。つまり、無効化(コメント化)してます。cssのコメントの記述は/**/で囲みます。なので子テーマstyle.cssに書いても効果がないわけです。書くなら、

      /* ディスクリプション背景色 */
      #site-description{
        background-color:yellow;
      }

      こうです。cssでは次のようにして使います。

      #test {
        /*font-size: 18px;*/
        font-size: 14px;
        color: #f00;
        line-height: 1.3;
      }

      これはつまり、元の値をコメント化して残しておいて、何かあった時に元に戻せるようにする処置です。ブラウザは/*font-size: 18px;*/をコメントとして処理するので無視します。しかし実際は次のようにします。

      #test {
        font-size: 18px;
        font-size: 14px; /*追記*/
        color: #f00;
        line-height: 1.3;
      }

      これ、例がフォントサイズなのでアレですが、例えばposition: relativeなど何故そこにそのプロパティがあるのかをコメント化したりして後から見た時にわかるようにしたり、グループで編集する時他人にわかるようにするなどとして用います。
      上記は、font-size:14pxで出力されます。1つの要素に2つのフォントサイズは持てませんから、最後に書かれたものが有効化されるわけです。

      #test {
        font-size: 18px; /*デフォルト*/
        font-size: 14px;
        font-size: 0.875rem; /*14px相当。14/16 = 0.875 */
        color: #f00;
        line-height: 1.3;
      }

      もっと良いのはこんな感じです。つまり、18pxを14pxで上書きしているわけですが、更にそれを0.875remで上書きします。古いブラウザはremという単位がわからないのでpxで処理しますし、remがわかる新しいブラウザはremで処理します。
      14pxは絶対値なので、どんな条件でも14pxですが、remはhtmlのフォントサイズに対しての相対値なのでhtmlのフォントサイズを変えれば全体を基準に対する相対的なサイズに変えることができます。こういった便利機能が古いブラウザにはないので、念の為に14pxを書いておくということです。こういうのをフォールバックといいます。

      その時に、0.875remって何pxかがパッとわからないことがあるので14px相当とコメントしておくという感じです。※ remは前述通りhtmlのfont-sizeで変化します。

      質問3ですが、基本wordpressからファイルの操作をせず、ローカルで編集したものをftpのソフトなどでサーバーのwp-contentにあるtheme、更にはsimplicity-childにアップロードして反映させます。
      何故そうするかは、wordpressの編集機能より、最近のテキストエディターのほうが優れているからです。

      例えば/**/で囲んである部分はグレーアウトして、それがコメントであると見た目にわかります。background-colorも綴りが間違っていたら色がつかないとか、入力途中に候補が出るとか、カッコの閉じ忘れ等も設定次第でわかったり、;の抜けなどもわかります。

      例えば、cssの高さのheightをhieghtと入力した場合、ブラウザはそのプロパティがわからないので無視します。パッと見た目に気が付かないこともあるので、こういう時にローカルで編集してるほうが修正箇所がわかって便利なのです。

      サーバーによっては、ftpの設定方法、またwordpressの更新方法など詳しく書いてる業者もあります。記事は投稿画面から書けばよいですが、wordpressのカスタマイズ等の作業をする場合はローカルとリモート(サーバー)にそれぞれファイルを持つこともメリットがあります。

      本番環境を直接イジるのではなく、まずはローカルでファイルを作り、バックアップを取りながらアップロードして確認していくと、何かあった時に元に戻すのが簡単になります。こういうことからもまずはローカルでファイルを作りftpでアップロードするという環境を作るのが良いかと思います。

    • #36744
      Hidekichi
      ゲスト

      慣れてきたらプロパティ見るだけで意味がわかるので、そのセレクタがどの部分かぐらいしかコメントをつけないですけどね(笑)

      最近それすらしてないので、後から見て絶望することがあります(笑)

    • #36755
      u
      ゲスト

      Hidekichiさん

      /**/はコメントアウトですか。普通の意味だったのですね。
      1.9.3子テーマstyle.cssにこの形式で沢山のcssの記述があったので/**/で囲う必要があるのかと勘違いしました。

      フォントサイズを0.875remで上書きする記述方法、大変参考になりました。

      javascript.jsを編集するのは当面はやめておきます。
      とりあえずWordPressやSimplicityの機能で出来る範囲でカスタマイズの練習をします。
      全てのページから呼び出したいJavaScriptの関数があるのでそれをjavascript.jsに入れれば良いのかなと思ったのですが、各ページにのhead_customに入れる事にしました。ちょっと冗長ですが。

3件の返信スレッドを表示中
  • トピック「テーマの編集がstyle.cssでは効かないがfooter-insert.phpだと上手く行く」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)