うつ病で引きこもり専業主夫の日々・育児ブログ

うつ病とアルコール依存症をわずらった無職、専業主夫のつらい父さんがイクメンになろうと家事や子どもの育児子育てに奮闘する 。闘病記・体験談あり

スポンサーリンク

ブログでの目次の簡単な作り方。hタグに注意!(はてなブログ)

スポンサーリンク

読者様から、ブログの目次の作り方について質問が・・・

 

まことに申し訳ございません!

謝る

冒頭からいきなり何を謝っているのかと申しますと。

 

先月4月26日に我が「お問い合わせフォーム」に読者さまから以下のような質問が届いていました。

 

・・・・・・・・・・・・・・・・・・・・・・・・
ふくさんのやっていらっしゃる、


記事の最初に目次をつけて


リンク先へとぶっていうのどうやるんですか?


無償で申し訳ないですが問題なければ教えてください。
・・・・・・・・・・・・・・・・・・・・・・・・

 

ブログ内容のことで味玉さんと話をしてて、その続きでふと問い合わせフォームを見ると、上記の質問が届いていました。

 

気がついたのは今日5月9日の午後

 

もう2週間近く前!

 

これはいかん、と質問の方にメールを返すも、メールアドレスのエラー!

 

どなたかは分かるのですが、はてなIDが記載されてないのでブログへ飛べない。

 

ブクマをチラ見したがわからない。

 

にっちもさっちも。

 

ぼくはコメント欄を消してるので、連絡の取りようがなかったのでしょう。

 

と、いうわけで簡単に書いてみますが、すでに時遅しだったらすいません。

 

目次

ブログで目次の簡単な作り方(はてなブログ)

読者の方のおっしゃるのは、これ(赤枠)のことでしょう。

 

ブログの目次


他のブログと違って、はてなブログは目次を作りやすいです。

 

というか、勝手に作ってくれます。

目次でジャンプしたいところを「見出し」設定する

画像はいつもの編集画面です。

見出し作成

右下がブログ文章です。

 

ここで、見出しにしたい所を選択します。

 

左上の「見出し」で、例えば「大見出し」を選択します。

 

例では2か所を「大見出し」にしています。

見出し作成 ブログ

目次を作る

「目次」「もくじ」などは自分で入力してください。

 

その後、編集画面の上にある「目次」ボタンを押します。

目次作る ブログ

[:contents]というのが編集画面に貼り付きます。

 

プレビューしてみましょう。

目次完成 ブログ



はい、これで完成です。

 

はてなブログで目次の簡単な作り方です。

 

と、いったら間違いです!

hタグ問題に注意

スポンサーリンク

 

※以下、hおよび<>などは、半角として見てください。

 

hタグをご存知でしょうか。

 

SEO関連記事で必ず出てきますね。

 

ものすっごく簡単に申しますと、グーグルクローラー(検索データを集めるロボット)がページを巡回する際、Webサイトの内容を把握するためにhタグが使われます。

 

さらにものすっごく簡単に言いますと、h1→h2→h3→h4→h5→h6と、順番に使うというルールがあります。

 

【例】

<h1>女性を紳士的に口説く方法</h1>

  女性を紳士的に口説にはどうすればよいでしょうか

  <h2>社内でのシチュエーション</h2>

    <h3>仕事中は</h3>

      社内で好きな女性に近づくには、一緒の向きで仕事をしましょう

    <h3>昼休みは</h3>

      恥ずかしがらずに、女性陣と共にお昼ご飯を食べましょう

  <h2>もし振られた場合</h2>

  泣き叫んでもよいでしょう。

内容は置いといて、hタグはこんな感じに使います。

hタグの変更

ところで、はてなブログでは「ブログタイトル」と「記事タイトル」ですでに<h1>タグが使われているので、次は<h2>タグになるのですが、さきほどのブログ編集の「HTML編集」タブをポチっとすると

ブログ HTML


大見出し」に指定したにもかかわらず、<h3>タグになってしまってます。

 

<h2>タグが飛んでます

 

なので、<h3>タグを<h2>に書き直します。

 

ただ、テストケースでは文章が少ないのですぐ訂正できますが、通常は文字が多く、訂正箇所がぱっとみわかりません。

【例】

ブログ HTML

 


なので、みたまま画面のほうで分かりやすい記しを付けておきます。

 

「●」とか「★」など

スポンサーリンク

 

hタグ


すると、HTML画面でも一目でわかりやすいです。

ブログのHTML


<h3>タグを<h2>に書き直します。

もちろん、</h3>も</h2>に直します。

「●」とか「★」は消します。

 

完成!

ブログ完成

ブログで目次の簡単な作り方、まとめ

本当はhタグを書き換えるアプリがあるらしく、欲しいのですが、見つかりません。

 

hタグのうち<h1>タグはタイトルに使われるほど重要なタグで、よく言われるのが「ページに1つか2つ」らしいのですが、本当のところがわからない。

 

グーグル様のブラックボックス内なので未だによくわからないのであります。

 

グーグルのお偉いさんが、以前「h1タグは複数個使っても構わない」と発言されたのは有名です。

 

いくつ?どれくらい?と具体的なことはわかってません。

 

hタグなど細かいところはわからないづくしです。

 

まあ、分かればみんな同じことをやるからでしょう。

 

とりあえず、SEOに有効な記事タイトルを考え、<h2><h3>タグをうまく使った記事を作るしかないかな、と思ってます。

 

ありがとうございました。 

スポンサーリンク

 

 

【オススメ記事】もどうぞ

www.fuku-utsuo.work