hタグの入れ子と位置の関係、ブログの目次の簡単な作り方(はてな)
ブログの目次の作り方について質問が・・・
まことに申し訳ございません!
冒頭からいきなり何を謝っているのかと申しますと。
先月某日に我が「お問い合わせフォーム」に読者さまから以下のような質問が届いていました。
・・・・・・・・・・・・・・・・・・・・・・・・
ふくさんのやっていらっしゃる、
記事の最初に目次をつけて
リンク先へとぶっていうのどうやるんですか?
無償で申し訳ないですが問題なければ教えてください。
・・・・・・・・・・・・・・・・・・・・・・・・
ブログ内容のことで味玉さんと話をしてて、その続きでふと問い合わせフォームを見ると、上記の質問が届いていました。
気がついたのは今日午後。
もう2週間近く前!
これはいかん、と質問の方にメールを返すも、メールアドレスのエラー。
どなたかは分かるのですが、はてなIDが記載されてないのでブログへ飛べない。
ブクマをチラ見したがわからない。
にっちもさっちも。
ぼくはコメント欄を消してるので、連絡の取りようがなかったのでしょう。
と、いうわけで簡単に書いてみますが、すでに時遅しだったらすいません。
目次
- ブログの目次の作り方について質問が・・・
- ブログの目次の簡単な作り方(はてなブログ)
- 目次でジャンプしたいところを「見出し」設定する
- 目次を作る
- hタグの入れ子と位置の関係
- hタグの変更
- ブログの目次の簡単な作り方、まとめ
ブログの目次の簡単な作り方(はてなブログ)
読者さんの方のおっしゃるのは、これ(赤枠)のことでしょう。
他のブログと違って、はてなブログは目次を作りやすいです。
というか、ブログの目次を勝手に作ってくれます。
目次でジャンプしたいところを「見出し」設定する
画像はいつもの編集画面です。
右下がブログ文章です。
ここで、見出しにしたい所を選択します。
左上の「見出し」で、例えば「大見出し」を選択します。
例では2か所を「大見出し」にしています。
目次を作る
「目次」「もくじ」などは自分で入力してください。
その後、編集画面の上にある「目次」ボタンを押します。
[:contents]というのが編集画面に貼り付きます。
プレビューしてみましょう。
はい、これで完成です。
はてなブログの目次の簡単な作り方です。
と、いったら間違いです!
hタグの入れ子と位置の関係
※以下、hおよび<>などは、半角として見てください。
hタグをご存知でしょうか。
SEO関連記事で必ず出てきますね。
ものすごく簡単に申しますと、グーグルクローラー(検索データを集めるロボット)がページを巡回する際、Webサイトの内容を把握するためにhタグが使われます。
さらにものすごく簡単に言いますと、h1→h2→h3→h4→h5→h6と、hタグを入れ子にして順番に使うというルールがあります。
【例】
<h1>女性を紳士的に口説く方法</h1>
女性を紳士的に口説にはどうすればよいでしょうか
<h2>社内でのシチュエーション</h2>
<h3>仕事中は</h3>
社内で好きな女性に近づくには、一緒の向きで仕事をしましょう
<h3>昼休みは</h3>
恥ずかしがらずに、女性陣と共にお昼ご飯を食べましょう
<h2>もし振られた場合</h2>
泣き叫んでもよいでしょう。
hタグはこんな感じの入れ子と位置で使います。
hタグの変更
ところで、はてなブログでは「ブログタイトル」と「記事タイトル」ですでにh1タグが使われているので、次はh2タグになるのですが、さきほどのブログ編集の「HTML編集」タブをポチっとすると
「大見出し」に指定したにもかかわらず、h3タグになってしまってます。
h2タグが飛んでます。
hタグが正しい入れ子の位置の関係になっていません。
なので、h3タグをh2に書き直します。
ただ、テストケースでは文章が少ないのですぐ訂正できますが、通常は文字が多く、訂正箇所がぱっとみわかりません。
【例】
なので、みたまま画面のほうで分かりやすい印を付けておきます。
「●」とか「★」など。
すると、HTML画面でも一目でわかりやすいです。
h3タグをh2に書き直します。
もちろん、後ろの</h3>も</h2>に直します。
「●」とか「★」は消します。
完成!
ブログの目次の簡単な作り方、まとめ
本当はhタグを書き換えるアプリがあるらしく、欲しいのですが、見つかりません。
hタグのうちh1タグはタイトルに使われるほど重要なタグで、よく言われるのが「ページに1つか2つ」らしいのですが、本当のところがわからない。
グーグル様のブラックボックス内なので未だによくわからないのであります。
グーグルのお偉いさんが、以前「h1タグは複数個使っても構わない」と発言されたのは有名です。
いくつ?どれくらい?と具体的なことはわかってません。
hタグなど細かいところはわからないづくしです。
まあ、分かればみんな同じことをやるからでしょう。
とりあえず、SEOに有効な記事タイトルを考え、h2、h3タグをうまく使った記事を作るしかないかな、と思ってます。
ありがとうございました。
【おすすめ記事】も見てみる
fuku-utsuo.hatenablog.com