セクショニングタグ

このページの記事目次 (タグ: セクショニングタグ の検索結果)

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を示したことで、その範囲から検索用語に近いものを選んでくれるといいな~。っと思いました。

Template 23、テンプレートをHTML5に書き換えた

HTML5にて採用されたセクショニングタグ(header、nav、section、footer、asideなど)を使ってみたくてたまらない。動機はたったそれだけです。

もしかすると昔の宣誓文(HTML1.0)のままでもHTML5から有効になっているタグを使っても新タグ自体はエラーにならなりません。ただHTML5に変えなさいとアドバイスされます…

問題はタグじゃない!らしいです。

そして、今、最大の疑問は、HTML5について触れているサイトで、HTML1.0のサイトがそのままにしている理由です!私のような初心者が下手に手を出したらじわじわ困る何かがあるんじゃないの??的な不安です。

1、Head部分の大幅改定

ウェブ上に資料が豊富にありましたので、そこに「FC2の変数」を埋めました。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link href="<%css_link>" rel="stylesheet">
<title><%sub_title><%blog_name>】</title>

charset(文字コード)用のFC2変数?

ここまでは、ウェブ上にたくさんの資料があったので、助かりました。

唯一疑問だったのは、元のテンプレートでは、charset(文字コード)に<%template_charset>という変数が使われていたのですが、現在の変数リストからは見当たらなかったことです。使えるものかどうかよくわかりませんでしたので、一般的であると思しきutf-8にしておきました。

titleタグの簡略化

元々のテンプレートには、ページタイプ毎に、とても手の込んだSEO対策をして下さっていたのですが、私には難しくて理解できなかったので、シンプルな構成にかえました。

今後の課題1
ページタイプ毎のタイトルタグの設定法を読解・自作できるようになりたい。

2、class名の振替(idはまだ難しい)

関連記事「Template-22、ページ構成を示すセマンティックなタグたち」で発見した通り、HTMLではセクショニングタグが設けられています。

これを使ってみたくてしようがないのですが、sectionとaside以外は他のところで使われているターミノロジーだったので、混乱を避けるため既存のCSSを一部改名したり、新タグ用のCSSを追記したりしました。

但し、今のところclass属性の範囲内です。

id属性はページ内でユニーク(1回しか使えない)特徴から、ヘッダー部、ラッパー部、コンテンツ部、サイドバー部などの位置指定に使われていたりすることが多く、ちょっとでも変えるとテンプレートが大崩れします。

というか、大崩れさせまくったことで、id属性とclass属性の違いを叩き込まれました。あはは。

今後の課題
id属性を使いこなせるようになる

3、アンカーリンク・テキストの書き換え

え~。頻繁に使うものまで推奨の書き方とかが変わっちゃうの??っと驚きました。

記事を書いている分にはウィザードボタンを使って書くのであまり困りませんが、テンプレートに書いているアンカーテキストは殆ど手書きなので、四苦八苦しながら修正しました。

当ブログで多かったものから

見たことがないスタイル
<a id="xxx"></a>などは、全て盲目的に<div>か<span>に置き換え。
name属性
name="xxx"的な属性表記は削除

まだ完全に終わったわけではなくて、どう修正したらいいか分からないものがエラーとして残っていますが、ボチボチ続けます。

今後の課題
アンカーリンク、テキスト、idの再設定を続ける。

4、その他「禁止・変更」タグのチェック

いつものごとくサーチコンソールとそのヘルプから当てもなくいろいろ散策していた際に発見したもので、ハマっているもの一つに、「Markup Validation Service」という、ページが有効なHTMLかどうかを判定して、エラーメッセージをくれるサイトがあります。

このサイトでページを検索すると、ロボ語のエラーチェックをしてくれます。

例えば、関連記事、「Template-22、ページ構成を示すセマンティックなタグたち」は、現在(2017年3月5日)、12個のerror、4個のwarningをいただいています。

HTLM Validator

って、これでも減ったのです。

ダメだしされるのに慣れすぎて笑っちゃいます。落ち込んでいる時にそれどころじゃない気分にさせてくれるので、オススメです。

これでHTML5の禁止、非推奨タグがすべて洗い出せるわけではなさそうですが、文法エラーも含めて教えてくれるので、重宝しています。

私の場合、「HTMLではなく、CSSに書きなさい!」のエラーが多いです。調べものが大変です。そういう訳で、当ブログ、見た目は殆ど変っていませんが、中身が前よりはロボ子フレンドリーになっています。

今後の課題
とりあえずエラーゼロを目指す!

5、テンプレート内のbrタグを最小限にする!

FC2には、「自動改行」の設定に、「HTMLタグ以外は無視」という選択があって、それにしているのですが、編集で行をあけちゃうとbrタグが入っちゃう模様です。それで、大量のエラーをいただいております。

過去記事は追々編集画面で修正するとして、テンプレートのbrタグは先に減らして置くに越したことがないので、消せるものは殆ど削除しました。そもそもテンプレートにbrタグを入れまくるなぞ、プロには考えられない発想なのかもしれませんが…

CSSでのスペーシングに完全切換えすべき?

ちなみに本記事はbrが入らないように書いたらどうなるか実験中で、↓こんな感じ↓です。

FC2本文の編集

CSSを見やすいスペーシングに調整するためにbrタグなしで書いています。CSSを修正すると過去記事は全て後で修正されない限り広々と行間が空いたページになってしまいます。

どんまい、私。

逆にスペースが詰まりまくって読みにくくなるよりましだと思うことにします。

ロボ語は英語に感覚が似ている!?

CSSを調整するだけなら過去記事の行間を詰めるだけでいいのですが、それとは別にどのくらい書きにくいのかを試す実験も兼ねています。

文を書き始める前にタグを入れるのは感覚的には英語の冠詞「the」や「a」を先に考えてから口に出す(文書を書く)のに近い感覚です。欧米語圏の人には大した苦じゃないのかもしれません。

メール送信前に英語の冠詞を付け足す感覚でタブ忘れを付けたしていっています。そして英語と同じ感覚で文書を改行なしの塊で書いています。笑。

今更ながら「リアルタイムプレビュー」が何のためにあるか理解できた感じです。あはは。

ちなみにbloggerのHTMLモードだと改行してもbrタグが入らないので便利です。タグを閉め忘れると警告が出る+保存できないので、ロボ語学習用にはbloggerの方が助かります。

Blogger本文の編集

私はいったいどこへ向かっているのか…

そもそも豊かなコンテンツを持っていることが最優先になりつつ世界で、修辞にハマっちゃダメでしょ的な自己矛盾です。

最近全く記事を書いていませんからね…

実際にサイトをクリックするのは人間なので、ロボ語文法がダメダメでも、中身がよければアクセスは集まるものですよね。おそらくそれがブロガーが目指すべきところ。ところが最近は興味の対象が完全にロボ子とロボ語になっちゃっています。ま、趣味だからこそ許される?、的な??

何事もそうですが、飽きるまでは存分にハマっておくことにします。

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