チコちゃんに叱られないブログ

人生は旅なのです😋

Hatena Blog 「編集 見たまま」のツールバーの使い方編その3【見出し編】


 Hatena Biog 「編集 見たまま」のツールバーの使い方編その3です。

注・この記事は【カップヌードル・蘭州牛肉麺を食す!】より抜き出し独立記事としたものです。

 

f:id:i-shizukichi:20190528142342j:plain

 Hatena Blog のお役立ち【見出し編】

 
  1. 太字にしたりとか文字に色を付けるときに誰でも使っているツールバーは、今回は見出しについて説明します。

  2. ツールバーに「見出し」ってありますね。今回はこの見出しの使い方です。
    Hatena Biogの編集見たままで文字に色を付けるメニュー
    ※「A」のアイコンをクリックしてカラーパレットを表示してあります。

  3. この「見出し」によりGoogleのWeb検索ロボットは適切にWeb記事を判断する材料としています。

    記事の中身がどうだかなんてのは検索ロボットには分かりっこないので、見出しがきちんとしていればへぼ記事でも「h1」タグに社会現象的ワードが入っていれば、現状は検索上位に表示される可能性が高いと思います。

  4. Google の Web 検索ロボットにより高度の人工知能が装備されて、記事の内容までもが考慮されるようになれば、記事の内容次第での検索順位となると思いますが、より高度の人工知能 Web 検索ロボットが実装されるのは多分まだ先のことだろうと思います。

  5. なので本気でGoogleアソシエイトやアファリエイトでブログとしての収益化を図りたいのであれば、必然的にページビュー(PV)数を上げることが考えられます。

  6. それにはWeb検索ロボットに自ブログをピックアップしてもらえるように、「Google 忖度特化記事」にするなんて考えが生まれることも必然でしょう。いかにブログが検索に食い込めるかが勝負です。

  7. その一つとしてHTMLLを定義する「h」タグの重要性は高まります。「h」タグとは「heading」の略であり、意味は単純に「見出し」です。

  8. 検索エンジンはこの hタグ に付けられた番号で、文章・記事の組み立てをある程度把握すると思います。「<h1>」はブログのタイトル的なタグになります。ブログはタイトルである「<h1>」について記事を書くよってことになります。

  9. だから「<h1>」タグはとても重要なタグとなります。普通は一つの記事には「<h1>」タグは一つだけにしておいた方が安全です。なぜなら多岐なジャンルにわたるタイトルで文章を作成しても、サイト閲覧者は精査してWebページを読むことをしないのです。

  10. つまり幾つもの関連タイトルを入れて充実させた内容の記事にするよりも、関連タイトルを分離して単純明快に一つのタイトルについて少し詳細な記事を書いた方が良いと思うのです。別タイトルは新記事としてブログるべきです。

  11. VPを上げるには1記事で150PVにするよりも二つの記事で150PVにした方が回転が速くなり、どちらかの記事がより多くのPVを稼ぐ可能性も高くなります。結果で広告がより多く人の目に留まりやすくもなるでしょう。

  12. さあそれではhタグの使い方役割などを見ていきましょう。

  13. Hatena Biogでは「<h>」タグで目次を作成する機能もあります。目次を作成するアイコンは、「見出し」アイコンがある右側方向へ「見出し」を含まずに 6つ目が「目次」作成アイコンです。左からは2つ目です。

  14. 「目次」は見出しを使っているからといって、何が何でも「目次」を用意しておけば良いってものじゃありません。

    わずかな記事内容に目次が、必要でしょうか?

    ティップス集で役に立つように、目次で必要な情報を得てもらう以外の目次など邪魔なだけです。

  15. 中途半端な目次は、目次の最下段をクリックして、記事も読まないでスターを押して帰る人を増やすだけです。

  16. 目次自体は Hatena Biog での、ワードでアウトライン編集で文章作成の目次みたいな役割で、Web検索ロボットは多分この目次項目はそれほどに関知していないと思います。

  17. それでは見出し「hタグ」について見て行きましょう。まず「hタグ」は『 h1~h6』まであります。Hatena Biogでは「見出し」には『h3~h5』しかありません。

  18. 例:Hatena Biog 標準「hタグ」

    <h3>なんたらなんたら</h3>

    <h4>だからなんたらなんたら</h4>

    <h5>でもなんたらなんたら</h5>
    <h5>しかしなんたらなんたら</h5>

    <h4>まとめなんたらなんたら</h4>


    目次アイコンをクリックで文章内に[:contents]を挿入しプレビューで見れば目次は次のようになります。( 注意:表示されている目次は総ての「h」タグを拾っていますから「h1」タグより上が今回の目次だと思ってください。別の言い方なら目次の上から「五行目」タグ迄です)

    「h1」タグ以降は次に記述する内容の目次になります。

    肝心のh1が Hatena Biog ブログにはないのですねえ。 じゃあどうするかで次のようにしてみましょう。

    <h1>なんたらなんたら</h1>

    <h2>だからなんたらなんたら</h2>

    <h3>でもなんたらなんたら</h3>

    <h4>しかしなんたらなんたら</h4>

    <h4>しかしなんたらなんたら</h4>

    <h2>まとめなんたらなんたら</h2>

    以上が上にある目次に表示されている「h1」タグ以下の目次になります。

    そう、自分で「h」タグ指定して構わないのです。「HTML編集」からタグばかりで取っ付きにくいと思わないで目次になる「h3」タグを探して「h1」に変えて構わないのです。

    「h4はh2」に「h5はh3」にと変更してよいのですから、Google先生に忖度するならここまでやりましょう。

    「h」タグは「h6」迄ありますので、さらに微に入り細に入り説明することが可能となりますので、長文ティップスなどには重宝することになります。普通は「h1~h3」も使えば十分でしょう。

    「h」タグは、この参考例程度が無難かなと思います。
    <h1></h1>
     <h2></h2>
     <h2></h2>
      <h3></h3>
     <h2></h2>
     <h2></h2>


    上記「h」タグ例のように雑文記事では『h1~h3』と見出しを指定しておけば十分でしょう。もちろん Hatena Biog 標準の『h3~h5』でも構わないと思います。ただし目次は安易に使わないことです。

  19. ググってもらえれば、この「h」タグを自動で「h1」形式へとカスタマイズするスプリクトも公開されていますので、必要とあれば Hatena Biog の「{}デザインCSS」に記述し装備すると良いでしょう。

  20. さて「見出し」に関連した「h」タグ記事はいかがでしたでしょうか?

    難しいと思った方はいらっしゃいますか。

    何故難しいと思ったかをはっきり言いましょう。

    その最たる原因は【この記事をちゃんと読まないで流し読みしている】からに過ぎません。

    「HTML編集」で「h3」を「h1」に、「h4」を「h2」、「h5」を「h3」に変えるだけのことです。変えるだけのことなので、難しいとか以前の問題です。

  21. 「HTML編集」で「h3」を「h1」に変えるときには、【<h3>筆頭見出し</h3>】と対になっていますので、対の3を1に変えるのです。h2以下も同様です。自分で見出しを作るときも対で作成します。

    <h></h>」この文字列をコピーし、「みだし」としてIMEに単語登録しておくと便利ですよ。

 

終わりに

以上「見出し」と「目次」の使い方でした。何か役に立ったらよいなあと思います。意見がありましたらコメント欄でお知らせください。

 

これからも時々、ほんの小技のティップスをまた教えるよ。

じゃあね (´▽`) 

 

 

i-shizukichi.hatenablog.com

 

 

i-shizukichi.hatenablog.com

 

 

  

     


追記:1