見出しタグ

このページの記事目次 (タグ: 見出しタグ の検索結果)

執筆ガイドライン2、本文見出しは大→小へ

本文見出しは大(h2)→小(h6)の順で書く

これを守らないと、Google先生のところのロボットが混乱するらしいです。公用文などの見出しには編、章、節、款、目の5区分があるみたいです。へぇ~。階層は5階層ぐらいまでにしておこう!みたいな教えでしょうか?

最大見出しの編にあたる<h1></h1>タグは、記事を分けるのに使用されています。この為、それより小さいタグをそれぞれ、章<h2></h2>、節<h3></h3>、款<h4></h4>、目<h5></h5>というように記事内で使い分けるといいのかな?

当ブログの見出し構成

当ブログでは、これを受けて、CSSを下記の通り書き直しました。

章<h2></h2>

.entry_m h2 {
margin:1em 0 0.25em 0;
padding:0.25em;
border: 1px solid #cceeff;
background:#cceeff;
font-size:1.3em;
line-height:1.5;
}

節<h3></h3>

.entry_m h3 {
margin:0.75em 0 0.25em 0;
padding:0.25em;
background: linear-gradient(transparent 50%, #cceeff 0%);
font-size:1.3em;
line-height:1.5;
}

款<h4></h4>

.entry_m h4 {
margin:0.5em 0 0.25em 0;
padding:0.25em;
border-bottom: 4px solid #cceeff;
font-size:1.2em;
line-height:1.5;
}
目<h5></h5>
.entry_m h5 {
margin:0.5em 0 0.25em 0;
padding:0.25em;
border-bottom: 4px double #99ddff;
font-size:1.1em;
line-height:1.5;
}
業務連絡用タグ<h6></h6>
.entry_m h6 {
margin:0.5em 0 0.25em 0;
padding:0.25em;
border: 4px double #99ddff;
font-size:1.0em;
line-height:1.5;
}

見出しタグのスペーシング(マージンとパディング)は、あまり差をつけていません。大きくても、小さくても、一応見出しですから、読むときの呼吸感は同じなのかな?、と。

文字の大きさは、px指定から、em指定に書き換えました。使うガジェットによって、見出しの文字が本文の文字より小さいという変な状況が起きていたりするのですが、これがある程度解消されるのかな?っと思っています。

h6は基本的には使わないのでしょうけれど、業務連絡に割り当てました。今後は、カテゴリー「ブログは楽しい」の記事は過去記事としてこっそり公開することにしました。先週テンプレートの仕立て直しの記事を最新記事として更新したら、自分の記事なのに自分で鬱陶しくて仕方なかったのです。まぁ、そういう時に業務連絡タグは便利かな…なんて。

当ブログでの執筆ガイドライン

記事の見出しタグはちゃんと大きい方から使用する!

え?、今まで?

そりゃーもう適当に、オリジナルテンプレートの中で最も好きなサイズのh4と空き番だったh6だけで書いていました。今回のCSSの書き直しで過去記事のスペーシングとか、見出しデザインとか相当微妙なことになっています。号泣。

Template 30、コメントのマークアップ

関連記事、「執筆ガイドライン10、コメントはArticleだ!」を受けて、HTMLとJSON-LDのマークアップを施しました。

HTMLのマークアップ

HTMLでは、コメントをArticleタグ内に投入しました。こんな感じ↓

コメントHTMLマークアップ
Article(ピンク)
コメントは、固有のidを持つarticleにしました。
Heading(黄色)
Articleは独立したコンテンツなので、ヘッディングタグが必要です。当ブログでは、本記事同様h2タグにいたしました。
コメント本文(赤色)
地味ですが、全てを囲んで1段落になっています。
footer(水色)
お名前、URL、投稿日時などが入ります。
time(灰青色)
Article投稿日です。

今のところ私の技術でできるのはこのくらいです。

空のヘッディングに対するエラー対処

コメントタイトルをh2タグにしたところまではよいのですが、見出しタグは空にしておくと↓のようなエラーがでます。

W3C, Markup Validation Serviceのエラーメッセージより

Empty heading. (=見出しタグの中が空だよ。)

ふぅむ。っと思って、タグ内が空にならないように、コメントする人がタイトルを書かなかった場合、No titleと記述されるように書き換えました。テンプレートを書き換えました。

<dt><label for="subject">タイトル</label></dt>
<dd><input id="subject" type="text" name="comment[title]" size="25" class="name" value="No title" onfocus="if (this.value == 'No title') this.value = '';" onblur="if (this.value == '') this.value = 'No title';"  /></dd>

とりあえずdtとddタグは無視してください。クリックすると書き換えられるようになっています。

でも、これ、過去記事には使えないので、結論としては削除することにしました。笑。

その代り、タイトルは必ず★と★の間に挟まれるように配置しました。タイトルがない場合は★★という表記になり、HTML的に空になりません。
そんなリア充っぽいタイトルになるのが嫌な方もいらっしゃるかも??(←代表・私)
♪とか、【】なども考えたんです。でもとりあえず★スタートで。
いつでも変えられますから…

JSON-LDでのマークアップ

<!--comment--><script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Comment",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "<%topentry_link>#<%comment_no>"
  },
   "headline": "<%comment_title>",
   "datePublished": "<%comment_year>-<%comment_month>-<%comment_day>T<%comment_hour>:<%comment_minute>:<%comment_second>+08:00",
   "description": "<%comment_body>",
  "author": {
    "@type": "Person",
    "name": "<%comment_name>"},
  "author": {
    "@type": "thing",
    "name":"<%comment_name>",
    "sameas":"<%comment_url>",
    "url":"<%comment_url>"}  
   }
}
</script><!--/comment-->

うーん。URLの入れ方が重複しているっポイのですが、とりあえず入ったので良しとします。JSON-LD版では、コメントいただいた方をauthorとしてマークアップできるほか、urlも投入され、元ブログとの連結もsameAsにて繋がっています。これぞウェブ!って感じで楽しいです。

え?、私だけ??

そう。だからこっそり過去記事として公開しているんです。

ちなみに私自身はこれまで通り余所のブログでは最初の自己紹介や引用させていただいた時のご挨拶以外はurlを残さないと思います。ウェブにおいては、つながっている事(ソーシャルグラフ)が一つの価値で、その概念はとても好きなのです。それがブログを始めた理由の一つだったりするのですが、コメントに関しては、リンクメンテができないから、私がブログを止めると、残したリンクはリンク切れになってしまいます。今のところ、外部サイトへのリンク切れはSEOに影響しないと言われていますが、それでもリンクしてみたら切れていたというのは、それなりにユーザのストレスになるものです。大好きなブロガーさんたちにご迷惑をおかけするのは嫌ですし。かといって、これからも続けます!なんて自信がつく日は来なさそうです。やれやれ。笑。

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