一風変わった見出しを紹介します。
実用性が有るかは分かりませんが、注目を集める変則的な見出しとなります。
ページを限定して使うなら !important が便利
CSSには優先順位（強さ）があり、通常は「後から書いたもの」「より具体的な指定」が優位に立ちます。
CSSの編集で「あれ？変化しない」となる場面があります。
そんなとき、値の直後に !important をつけると、他のルールは全部無視して、これを最優先しろ！とブラウザに命令できます。
記述したプロパティの優先順位を強制的に最大化する命令、それが !important です。
かなり役立つのですが、使いすぎると後でどの !important が効いてるのか分からなくなる時があります。使いすぎはオススメできません。
See the Pen 例：見出しの左線を赤に強制する by mikoto (@mikotohodo) on CodePen.
上記は !important を書き加えた例。書いている記事の中でだけ適応させたいCSSに変化がなかった時に !important をつけたりします。
少し凝った変則的な見出し
注目点に「CHECK」や「POINT」と表示して文章を枠で囲ったりしますが、それらと同じような事を見出しに使っています。
この文章が見出しH3
この見出しはH3ですが、注目する点は「この文章が見出しH3」がH3の見出し設定をしており、「注目！」は見出し設定ではないことです。
仮に、「注目！この文章が見出しH3」の全てを見出しH3の設定にした所でSEOへのマイナス評価はゼロです。Googleなどの検索エンジンは「！」や「？」などの記号を「不適切なノイズ」とはみなしません。
- むしろ推奨されるケース
読者の注意を引き、クリック率（CTR）を高める効果があるため、マーケティング的にはプラスに働くことが多いです。
- 注意点
「！！！」のように連続しすぎると「スパム（広告臭い）」と判定されるリスクがありますが、1つであれば全く問題ありません。
見出しで文章では控えたい３つの例
次のような見出しはSEOへのマイナス評価は絶大と言えるでしょう。
1. 記号・顔文字がノイズになっている
- 【必見！】☆神アプデ☆ Cocoonを使い倒す裏技！！！
【】☆！などの多用は、検索結果でスパム（広告）っぽく見えてクリック率が下がります。
- ( ﾟДﾟ)ﾊｧ? プラグインなんていらない？ その理由とは…
顔文字の半角カナや記号は、検索エンジンが文字化けや無意味な文字列として無視し、タイトルとしての強さが半減します。
2. 検索意図を無視した「つぶやき型」
- 今日のカスタマイズ、ちょっとやりすぎたかも（笑）
やりすぎたで検索する人はいません。日記としては良いですが、技術備忘録としては「誰の悩みも解決しないタイトル」と判定されます。
- えっ、マジで？ これだけで高速化できちゃうの？
広告（釣り）サイトによくあるパターン。具体的な何が（高速化）が抜けているため、AIが内容を低く評価しがちです。
3. 文末が曖昧で「何の記事か」分からない
- CSSの余白調整って、奥が深いよねっていうお話。
語尾がお話やつぶやきだと、Googleは有益なハウツーではなく個人の感想として扱い、上位表示させにくくなります。
ただし、これに関しては弱い見出しであれば良いと思います。H4以下の細かい見出しなら、SEOへの悪影響はほぼ無視できます。有益なハウツーの記事なら見出しの使いかたを工夫する必要があります。
実際に使用している見出しコード
<div class="mh-heading-wrapper">
<span class="mh-badge">注目！</span>
<h3 class="mh-simple-link">この文章が見出しH3し</h3>
</div>.mh-heading-wrapper {
border-top: 1px solid #6b7785;
border-bottom: 1px solid #6b7785;
display: flex;
align-items: center;
gap: 15px;
padding: 16px 10px;
margin: 30px 0 20px;
background: none;
}
.mh-badge {
border: 1px solid #95a0ab;
border-radius: 2px;
background: transparent;
color: #2c3e50;
padding: 5px 12px;
font-size: 12px;
font-weight: normal;
line-height: 12px;
text-transform: uppercase;
display: inline-block;
white-space: nowrap;
}
h3.mh-simple-link {
margin: 0;
padding: 0 !important;
background: none !important;
border: none !important;
color: #2c3e50 !important;
font-size: 18px !important;
font-weight: bold;
letter-spacing: 2px;
line-height: 22px !important;
}実際のこのページで使って変化が見られなかったプロパティには !important を使いました。
CSSを設定しても変化がない事態を把握するにはデベロッパーツール（右クリック→「検証」で開く画面）で該当箇所を確認します。設定した箇所に打消し線が引かれていたら修正をする必要があります。
見出しの使い方を改めて楽しもう
見出しの見せ方を工夫すると今よりももっと楽しめるでしょう。ただし、その楽しむをちゃんと得る為には知らなければならない事が多々あります。その多々ある情報を少しずつで良いので蓄えていただけたらと思います。
コメント