見出しの変更について

Simplicityの特徴 フォーラム Simplicityについての質問 見出しの変更について

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

      子テーマを編集して見出しの部分を変えようと思うのですが
      子テーマのスタイルシートには何も文字が書かれておらず

      /* Simplicity子テーマ用のスタイルを書く */ と最後に書かれています。

      見出しをカスタマイズするには、親テーマから
      見出し部分をコピーして子テーマに貼り付け、その部分を変えてカスタマイズしていくのでしょうか?

    • #23601
      hidekichi
      ゲスト

      その通りです。
      変更したい部分のセレクタのプロパティを変更していけばよいのですが、いくつか問題もあります。

      例えば「継承」されるような場合、一部分を変更するだけでは他の部分で指定されているパラメーターが適用されたりするので、子テーマでスタイルできないと言われる場合がありますが、おそらく構造的には、親テーマと子テーマのcss情報を表示して、子テーマを優先してあると思うので、親テーマが優先されているようなパラメーターは子テーマ側で書き変えないといけません。
      ぶっちゃけて言うと、親テーマのスタイルを子テーマ上部でimportしていると思いますが、これをコメントアウトしてしまえば親テーマのスタイルは適用されません(色々不備が出るのでたいていはコメントアウトしないで下さい)。

      ウチのサイトでは試験的にflexboxでsimplicityの構造を書き変えているのですが、親テーマのどの部分が適用されているのかを探すのが面倒臭い大変なので、親テーマのimportをコメントアウトしています。
      それでも問題なく表示されます。

      基本的なカスタマイズは、親テーマの設定を流用しつつ変更したい部分を新たに書き変えたり、あるいはノーマライズしたりして利用するのが良いと思います。

      ◆ノーマライズの例

      #new-entries, #popular-entries {
        line-height: normal; /*元々は150%。 normalにすると若干指定セレクタ内の文字の行間狭くなる*/
      }

      ただ、line-heightは直接 line-height: 130%; などと指定すれば良いのであまり良い例ではないですが、CSSはそれ自体がブロッキングリソースなので、継承してそのデザインが問題ない場合は少しでも少なくするほうがベターです。より簡素に簡潔に書くためにできるだけショートハンドを利用しましょう。
      ※ブロッキングリソースとは、ぶっちゃけて言うとページ読み込みの際に表示に時間がかかるもの
      ※ショートハンドとは、font: normal normal normal 16px/150% sans-serif; あるいは、border: 1pz solid #ddd; などひとまとめにできる書き方。

      例えば.articleの中ではline-heightは170%に設定されています(ウチだけかもしれない^^;)が、.articleの子要素の更にまたその子要素の行間を変更する際に、.articleの子要素にもその子要素にもline-heightがあるような場合、.articleの子要素にはline-heightは本来必要ないと思うので(結果がわかりにくいなどの理由)、normalを入れて打ち消したりします。
      ※継承の問題で色々不備が出たりすることがあります。顕著なのはfontのemやremの倍率指定。
      http://jsfiddle.net/mLd504m2/light/ 元記事:Simplicity を少し改造してみた(若干内容が古くなってます。記事真ん中あたりのフォントのサイズについて)

      またセレクタは右側から読んでいきます。つまり、#id .class a{…}と指定があった場合、aでその親は.classで…と読んでいくわけです。この指定が多いと表示に若干ながら時間がかかることがあるそうです。※javascriptやjQueryは#idから探します。

      質問の内容であれば、
      .entry h2 {
      color: #333;
      font-size: 24px;
      text-decoration: none;
      font-weight: bold;

      border-left: 2px solid #999;
      border-right: 2px solid #999;
      padding: 10px 5px;
      }

      こんな感じです。改行して書いてあるのは自分が追加した分がわかるように、あるいはコメントを入れるために開けてあります。上記例はウチのcss部分です。borderは追加しました。特別問題がなければ改行やコメントもできるだけ控えめに(素早くCSSを読み込ませるため)。

      またモダンブラウザではweb開発環境が搭載されているので、それらを駆使してまずcssを試してから、親・子それぞれのstyle.cssを編集するのがベターでしょう。使い方は「モダンブラウザ(chromeとかfirefoxとか) web開発環境」で詳しく解説しているサイトがたくさんあります。

    • #23602
      hidekichi
      ゲスト

      毎度、投稿時に読み返してるのに間違いがあったりして申し訳ありません(背中に冷や汗

      border: 1pz solid #ddd; ☓
      border: 1px solid #ddd; ◯

    • #23626
      アバター画像わいひら
      キーマスター

      hidekichiさんありがとうございます。

      ブラウザなどで、変更したい部分の要素を右クリックして「要素を検証」で表示されるデベロッパーツールの右部分に表示される一番上のスタイルの変更したい部分だけを記入すれば、大抵の場合なら、それでOKかと思います。この方法で、できないケースもありますけどタイトルとかならそれで大丈夫だと思います。

      投稿ページのh1見出しを変更するなら添付画像みたいな感じで。Chrome以外でも同じような操作&表示です。

    • #23670
      HAYA
      ゲスト

      わかりやすいお返事ありがとうございます!

4件の返信スレッドを表示中
  • トピック「見出しの変更について」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)