サポート » テーマ » h1、h2,h3と見出しを分ける

  • 解決済 kazuya 2013

    (@kazuya-2013)


    今、CSS実験サイトで実装したいデザインをためしているのですが、本文の見出しの部分を色分けと線で区切りたく、CSSを触っています。

    何処を変えれば、h1、h2、h3が変るのか分ったのですが、本文以外の部分に反映されています。本文の部分にだけ反映させるにはどうすればいいですか??

    テーマは、Twenty Fourteenです。
    よろしくお願いします。

10件の返信を表示中 - 1 - 10件目 (全10件中)
  • dontkou

    (@dontkou)

    実験環境が無いので基本的なお話になりますが。。
    h1/h2/h3等に定義されているcssを変更すると言う事は、
    当然のことながら使用している全てに適用することになるのでは?

    個別に一部を変更したいのであれば、当該部分で使用するh1等に
    classを振ってスタイルを別で定義してみれば如何でしょうか?

    ただ・・・見出し(hタグ)ってのは個別ページで何度も
    登場させるタグでは無いので、

    【適切な量を適切な場所で】

    と言うことをご理解の上カスタマイズして下さい。

    見た目を意識した文字装飾だとお考えなのであれば、
    本来のタグの使用方法とは異なりますので
    hタグを使用せずに他の文字装飾方法をご検討される事をお勧めします。

    スレッド開始 kazuya 2013

    (@kazuya-2013)

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

    私は、根本的に分っていないのかもしれません。
    本文を分りやすくするために

    小見出しの部分を装飾したかったのです。
    装飾するにあたりh1,h2,h3,h4,h5,h6で囲めば簡単に変化させることが出来れば楽だなと思っていました。

    천궁 메텔

    (@digitmaetel)

    h1,h2,h3… と見出しタグにはルールがあり、h2,h3,h1のような使い方は勧められません。
    重要度の見出しですから、本文の装飾には<span>や、良く使う装飾はクラスで用意しましょう。
    HTML記述ルール http://www.sync-d.jp/guideline/coding/html.html

    スレッド開始 kazuya 2013

    (@kazuya-2013)

    digit@maetelさんコメントありがとうございます。

    h1は題名で
    h2は小見出しで
    これ以降はh3h4h5h6と続くと言うことで理解は大丈夫ですか??

    貼って頂いたURLで勉強したいと思います。

    ありがとうございます。

    実験用のサイトです。
    このサイトでh1を装飾した時、サイドバーとサイトタイトルの部分が反応してしまいます。

    h2を装飾すると、キャッチフレーズが反応してしまいます。

    h3を装飾すると、コメントを残すが反応してしまいます。

    ブログを書く時、記事タイトルがh1で自動的に反映されますので、反応がない残りのh4h5h6を使って、ブログ記事として本文の小見出しを装飾することになるということでしょうか??

    もし、その様にするなら
    h1h4h5h6と順番になってしまいますが、これは大丈夫なのでしょうか??

    よろしくお願いします

    천궁 메텔

    (@digitmaetel)

    具体例として、わたしの今日のブログで恐縮ですが

    サイトのタイトルは当然 h1
    一番最初に利用されるので、移行は h1 は登場しません。

    記事タイトル、サイドバーの『カレンダー』、『天気予報』という見出しが h2

    本文記事の「Carlo …」「Nationalist」が h2
    その下に位置する内容である Product などは h3(黒バックに白文字の部分です)

    その次にアマゾンリンクで、「Pictures at An Exhibition」(ブルーのラインが左側に入っている部分が) h4 を当てています。

    サイト全体の中に 記事部分と サイドバー、フッターが分岐点となりますから、それぞれのグループの中で『見出しのルール』に沿うように装飾を割り振れば良いのです。

    尚、WordPressに関することではなく html,css のレベルの問題ですから、このフォーラムでは好ましいことではありません。

    スレッド開始 kazuya 2013

    (@kazuya-2013)

    digit@maetelさんありがとうございます。

    キレイなサイトですね。お手本にさせて頂きます。

    >それぞれのグループの中で『見出しのルール』に沿うように装飾を割り振れば良いのです。
    それぞれのグループの指定ができるのですね、探してみます。

    천궁 메텔

    (@digitmaetel)

    WordPressのサイトは、大きく分けて
    ヘッダー(サイトのタイトルがある部分)
    コンテンツ、あるいはエントリー(記事本文)
    ウィジェット(サイドバーまたはフッターウィジェット)
    フッター(最下部のDesigned by… などとある部分)
    このそれぞれがグループに分かれているので、同じh2,h3を文字装飾を個別に出来るのです。

    例えば h2 でも、
    .content h2
    .widget h2
    でスタイルシートをそれぞれに書けば宜しいです。

    css,css3 で検索して、その先のサイトで質問をするのが学びが早いですよ。

    kodamatic

    (@kodamatic)

    CSSの書き方で、「AAという範囲の中のBBという要素」という書き方があります。

    #content h1,h2,h3 {
    text-size: 12pt
    }

    とか書くのでどうでしょう。contentの部分はchromeの「要素の検証」でご自身のサイトを確認してみてください。

    スレッド開始 kazuya 2013

    (@kazuya-2013)

    digit@maetelさんたびたびありがとうございます。

    検索してみます。
    最初に私が知りたかったのは、分かれるか分かれないかだったので、それだけでも知れてよかったです、ありがとうございます。

    スレッド開始 kazuya 2013

    (@kazuya-2013)

    kodamaticさんコメントありがとうございます。

    今、デベロッパーツールでサイド確認してみたところ、widgetと場所が出ていました。
    お蔭様で前進出来そうです。ありがとうございます。

10件の返信を表示中 - 1 - 10件目 (全10件中)
  • トピック「h1、h2,h3と見出しを分ける」には新たに返信することはできません。