極北日記

くまじろうの≪中年向け≫チャレンジ1年生

【はてなブログ】記事に見出しを設定する

べあこです。

ブログを書くって、意識すると難しいことを知りました。
日記を書くというよりは、報告書を書く感覚に似てきました。あるいは、授業中ノートを取るというよりは、おさぼりマン達にノートのコピー1枚50円で小遣い稼ぎをするためにノートを取る感覚でしょうか。あ、たとえが飛躍しすぎました。

 

polar-bear-co-4690.hatenablog.com


 ブログチャレンジに挑戦しています。

本日のタスク「中級6.記事に見出しを設定する」です。

 

中級6.記事に見出しを設定する

 

見出しって何?

実用本を読み漁る人や、仕事で仕様書・マニュアル、もしくはプレゼン資料を作成(もしくは作成データを見たことがある)ならば、なんとなく理解できる「見出し」

はてなブログに目次機能があることを知っており、のちのち目次を付ける時に便利だろ的な「見出し」

そんな感覚でブログ開設当初から意識して見出しを付けてはいました。

 

が・・・お題を出されてふと根本的な疑問がわきました。

目次以外に目的あるの?

見出しの重要性って何?

ググ教授に聞いてみました。「はてなブログ 見出し」
まぁ、出るはデルは「デザイン系ノウハウ」

半日ついやしていろいろ放浪した結果、以下のことがわかりました。
(記事が多く見られたという印象順)

  1. 読みやすさ
  2. 長文=目次機能
  3. SEO対策
  4. Googleアドセンス広告挿入位置

3、4に関しては無知に等しい状態だったので、ほーほーと声を上げながら熟読。
思いのほか夢が膨らむべあこ、と同時に、ブログちゃれんじ「全クリ」への道は遠いことがうっすら気づき始めました。(おら、負げね)

 

見出し機能の基本

何の疑問も感じることなく使っていた、記事編集画面の見出し設定。

f:id:polar-bear-co-4690:20180225132449p:plain

現在多く投稿している「ぶろぐチャレンジのタスク報告」では、以下のような構造にしていました。

1.タスク名=大見出し

  1-1.タスククリアのための基本、調べたこと、など=中見出し

    1-1-1.中見出しの中で掘り下げたいことがあったとき=各小見出し

2.参照ブログ=大見出し

3.本日のステータス=大見出し

ふっと、HTML編集を開いたときに大見出しがH3になっているのを発見したものの、中途半端な知識のべあこは、大きな勘違い&思い込みでなんの疑問を持たずにいたのです。

べあこの思い込み

  • ブログタイトル=H1
  • 記事タイトル=H2
  • 大見出し=H3
  • 以下省略

 ところが、あれこれ調べて間違いが発覚。

 

多くのブログでは記事タイトルにH1の見出しが使われておりますので、H2以降を使って見出しをつけていくことになります。

【はてなブログのSEO】見出しH2タグと画像のALT属性について - おきがるみがる

 

 そこで疑問が生まれるH2の謎。そして、自分で調べるまでもなく、そのまま先輩方にご教授いただく。

記事タイトルにはh1。
であればそれに続く本文の見出しは?
h2でしょ。

SEO的に考えても、はてなブログの見出しはh3からh2に変更した方が良い - オークニズム

いつやるの?今でしょ。的に言われても、基本的な間違いをしていたべあこはショックで冬眠スイッチが入りそうです。
いやはや、教えてくださりアリガトウです。

そして、本題に戻る・・・
そして、先輩は叫ぶ。

しかし、はてなが用意した見出しはなんとh3。意味不明です。h2はどこいった。

h2を使わせろぉぉぉ!!

SEO的に考えても、はてなブログの見出しはh3からh2に変更した方が良い - オークニズム

同感です。激しく同感です。

同時に、今後またHTML編集で手打ち作業が増えるのかと思うと、うんざりです。

 

便利なGooglechrome拡張

h2を使わせろと叫んだ先輩が、Googlechrome拡張機能に便利なもんがあるぜというので、探してみた。

www.notitle-weblog.com

早速導入!
(導入したら、一度chromeを立ち上げ直すとサクサク動作するでございます)

f:id:polar-bear-co-4690:20180225141129p:plain

今までHTML編集で手打ちしていた「テキスト右寄せ」がボタン一つでできるなんて!という副産物までございました。ありがとうございます。

目的の見出し設定は、今後デザインを変更する予定もあり、CSSとの兼ね合いもありますので、時がきましたら利用させていただきます。

 

見出しのデザインを変えてみる

付箋タイプの見出し、吹き出しタイプの見出し、いろいろなデザインの見出しをあちこちでお見掛けします。憧れてました。

そこで、下記サイトの恩恵をあやかってデザインを変えてみようと思います。

saruwakakun.com

 

・・・

 

 

・・・

 

 

68個の中から選べるかぁー!迷うよ、決めれないよ、トータルコーディネートできないよ!と、目がショボショボになったので、トータルコーディネーターにお任せすることにして、今日は基本を学んで、お開きとします。(山田くん、座布団持ってってぇ)

 

参考ブログ

www.mutant-tetsu.com

www.okuni.me

www.okigaru-migaru.net

saruwakakun.com

ferret-plus.com

www.notitle-weblog.com

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

 

本日のステータス

f:id:polar-bear-co-4690:20180225142827p:plain

初級:16/24クリア 進捗率66% 22pt獲得
中級:10/30クリア 進捗率33% 14pt獲得

 

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

 

 

広告を非表示にする
Copyright © 2018 ぽうらべあこ All rights reserved.