おむころすびりん

おむすびころりらすっとこどっこい

h1・h2タグが2個ある?タイトル・見出しの編集に苦戦した話

f:id:omsb014:20170520014559p:plain

下の画像は記事のタイトル前に画像を入れたくてh1タグ前に画像を設定したところです。

f:id:omsb014:20160831225753p:plain

© Hatena

    ↓

f:id:omsb014:20160831225646p:plain

© Hatena

あれ?画像が2つ設定されてる??

 

それではと試しにh2タグに画像を挿入してみると…

f:id:omsb014:20160831230130p:plain

© Hatena

    ↓

f:id:omsb014:20160831230345p:plain

© Hatena

うん、2個あるね。

 

これはつまり

h1タグ『ブログ名』『タイトル』で使われてて、

h2タグ『ブログの説明』で使われてるということ?

反映されている以上、サイト内で『h1』タグや『h2』タグを複数使用していることは間違いなさそうです。

f:id:omsb014:20160831231223p:plain

© Hatena

ちょっと脱線しますが、その後詳しく調べると記事内の大見出しは『h3』タグで記載するように書いてありました。

以前某ブログを参考にしたときに、『記事の見出しはh2タグから始めてね~☆』って書いてあったからそういうものなのかーって思ってたんですがどっちが正しいのでしょうか。

記事のタイトルが『h1』から始まっているんだとすると、大見出しは『h2』から始まるのが正しいのか?

そして私は某ブログを参考にしていたので、(見たままモードで)記事を書くと『h3』になる大見出しを一回一回『h2』に編集し直してました。

とりあえずよくわからないならこれからは初期値に準じよう。

 

記事の大見出しを『h3』タグに変更

上記の反省を踏まえて、記事のタグを修正しました。

全ての記事の大見出しのタグを部分を『h2』から『h3』へ変更。

疲れた、頭痛いよう。。

その後CSSも試しに『h3』へ変更しました。

f:id:omsb014:20160831232434p:plain

© Hatena

    ↓

f:id:omsb014:20160831232918p:plain

© Hatena

当然のことながら大見出し一か所にしか反映されていないですね!

 

基本ブログパーツそれぞれにクラス名が設定されている

で、肝心の記事のタイトル前なんですが、実はブログ内の部品それぞれにクラス名が付けられてるようです。

ですので、『h2』タグで設定するのでなく、記事のタイトルに設定されたクラス名に対して設定をするとうまくいくようです。

詳細は備忘用もかねてクラス名リスト的な記事を別途書きたいと思いますのでそちらで。

詳しくないのでわかりませんが、おそらくタグを複数使用する際に、ユニークになるようなクラス名が設定されていたようです。

本来小さい範囲(クラス名)に対して設定しなければならないところを大きい範囲(タグ)に設定をかけてしまったのでおかしなことになったようですね。

よく知りもしないのに適当やるからこうなるんですよね~、ホント反省です。

この辺適当なことやっちゃうとSEO的にもよくなさそうなので今後はもう少し慎重にやっていきたいと思います。

 

今回のまとめ

いやー今回は勉強になりました。

CSSって奥が深いネ!

何事も前向きに学んでいきますよ!

直すのめんどくさかったケドネ!!(泣)

もしなんかおかしいぞい?ってこの記事を訪れたユーザーの皆さんは、特定の個所を編集したいのであれば、それぞれに割り振られたクラス名を調べて設定するようにしてくださいね!

私みたいに時間を無駄にしないでください!

クラス名の記事がまとまったらリンク貼りますね~。

それでは!

 

 

ゼロから学べるブログ運営×集客×マネタイズ 人気ブロガー養成講座

ゼロから学べるブログ運営×集客×マネタイズ 人気ブロガー養成講座

 
世界一やさしい ブログの教科書 1年生

世界一やさしい ブログの教科書 1年生

 
プロ・ブロガーの 必ず結果が出るアクセスアップ テクニック100 ファンにも検索エンジンにも好かれるブログ運営の極意

プロ・ブロガーの 必ず結果が出るアクセスアップ テクニック100 ファンにも検索エンジンにも好かれるブログ運営の極意