id属性とclass属性

このページの記事目次 (タグ: id属性とclass属性 の検索結果)

Template 26、セクショニングタグとid属性が喧嘩

当ブログのタグツリー

まず最初に、記事にセクションタグをつけようと思い立ってから、人間の目にも心地よいように専用のCSSを準備していました。ところが、header、nav、footerの3要素は、id名と被っちゃっていて追記したCSSが効かないみたいです。(←ド素人なので確信はありませんが、多分理由はコレ)

それなら、単にid名を変えればいいじゃん!と思ったりもするのですが、折角なので、当ブログでのメインコンテンツ(=記事)までの経路を調べてみました。

ピンクの文字の部分が、当ブログの記事部分です。赤色文字の部分が、被っちゃって改名しようと思っているid名です。

  • head
  • body
    • FC2-1
    • wrapper
      • top
      • container
        • site-title
        • nav
        • header
        • content
          • mokuji
          • highlight
            • record-id
            • entry-title
            • entry-top
            • entry_m
              • header
                • nav
              • section-1
                • h2
                • h3
                • h4
                • h5
                • h6
              • section-2
              • section-3
              • footer
              • FC2_footer
              • FC2_text_ad
            • thread-1
            • thread-2
            • entry-bottom
          • next-entry
          • comment-top
          • comment-m
          • next-entry
        • sidebar
        • footer
    • FC2-2

結構深いですね。ぐふっ。難しい…

ド素人には、class属性とid属性の使い分けポイントがよくわかりません。号泣。

因みにこの階層は、ディレクトリ階層でも、リンク階層でもありませんし、いくつ階層があろうとも賢いロボ子には、あまり関係がないかもしれません。素人の私が見て、理解できないだけです。

セクションタグはどの階層でも差し替えられそうに見える

記事がある第7階層は、(CSSは効いていないけれど)セクションタグを入れながら記事を書いて行くことができます。

よく見てみると、第6階層、第5階層もセクションタグをつけられそうに見えなくもありません。つまり記事にいたるまでの経路はArticleに到達するまでユニークな名前になりますが、それ以外は全てセクションタグをつけてみたくなります。

セクションタグについての復習

まずは本家(?)、W3Cサイトにてセクション用のタグにどんなものがあるか眺めてみます。

W3Cページ、HTML/Elements、4 Sectionsより引用

Sections

  • body
  • section
  • nav
  • article
  • aside
  • h1, h2, h3, h4, h5, and h6
  • hgroup
  • header
  • footer
  • address

補足:日本語サイトは見つかりませんでしたm(__)m

うーん。body (第2階層)とarticle (第6階層)以外はどの階層にいても不思議じゃないですよね。なんだか階層ごとにclass属性もしくはid属性をふってそれぞれのCSSを書けばスッキリしそうな、そうでないような…

ついでに階層も減らせるかも??

ここから先は、3月13日に修正しました。新しい階層は下記の通りです。

  • head
  • body
    • FC2-1
    • layout_top (旧、top)(第2層、wrapperを削除)
    • container
      • header (id=site_header)(旧、site-title)
        • h2 (ブログ名)
        • h3 (ブログ説明)
      • nav
        • site_nav (ナビゲーションメニュー)
      • section
        • feed
        • container_title
          • h1(ページタイトル)
      • main (id=content)
        • nav (記事タグ)
        • nav (パンくずリスト)
        • article(id=entry number)
          • header(id=entry-title)
            • h2 (記事タイトル)
          • nav(id=entry-nav)
            • time(投稿日)
            • category
          • section (class="entry_m") (記事内容)
            • header
            • nav
            • section
              • h2
              • h3
              • h4
              • h5
              • h6
            • footer
            • FC2_footer
            • FC2_text_ad
          • aside (class="thread")-1(記事フッター、タグ)
          • aside (class="thread")-2(記事フッター、スレッドテーマ)
          • footer (class="entry-bottom")
        • aside(next-entry)
        • comment-top
        • comment-m
          • article(コメント1)
          • article(コメント2)
        • h4(コメント投稿欄header)
        • form(コメント投稿フォーム)
        • trackback
          • h3(トラックバックheader)
        • trackback_m(トラックバック投稿欄)
        • aside(next-entry)
      • aside(sidebar)
      • footer(site_footer)
    • layout-bottom
    • FC2-2

作業進捗

最初は下の階層からさかのぼる形でセクショニングタグに置き換えていったのですが、途中で全部やり直しになりました。

今回は、上の階層から仕立て直しています。

第1階層
headとbody
メタタグエリアとボディーエリア
第2階層
レイアウト
FC2のヘッダーラインとブログ部分のデザイン画像
描画エリアの大きさ・枠の設定
wrapper、container、ってなるほどね
第3階層
サイトの大枠構成
ヘッダー、ナビゲーションメニュー、メイン、サイドバー、フッターなど
第4階層
各部位の中での構成
(記事部分の場合)ヘッダー、記事、コメント、トラックバックなど
第5階層
(記事部分の場合)記事のタイトル、日付、内容、カテゴリー、タグ、テーマ-など
第6階層
(記事の場合) 記事そのもの。
イントロ、章、まとめ

しぇ~。よくできていますね。

こんなに込み入っているのに、ユーザーが記事を書く時に必要なのは、第5階層以降の一部分だけです。googlebot(以下、ロボ子)が読み取って検索結果に表示するスニペットが微妙だと悲しく思っていたのですが、ある意味ここにちゃんと到達できるだけでもロボ子を尊敬しちゃいます。

当ブログでよくありがちなのは、ホームの新着記事として並んで表示されたことによって、全く違う内容の記事が検索にかかっていたりすることなのですが、今回mainやarticleを示したことで、その範囲から検索用語に近いものを選んでくれるといいな~。っと思いました。

スポンサーサイト
申し訳ありません。 お探しの記事は現在、この ユーザータグ (Keyword) を設定していない可能性があります。 右の検索BOXで 再度用語を短めに入力していただくと記事が見つかる場合があります。