脱・プラグイン。ブログのポテンシャルを最大化する『凝ったシンプル』な見出しの備忘録

CSS

見出しなんかは何所でも紹介してるし、数としては有り余ってると言って良いと思う。それでも、自分が求めてる見出しがなく、ため息を吐いてブラウザバックする事が自分は多いです。

この記事は自身の見出し黙示録。それが誰かの為になれたら僥倖です。

まず使い方と!important

CSSであまり!importantの紹介をしてるところは少ないですよね。ただ!important自体を必要だと言う人は多いです。CSSには優先順位（強さ）があり、通常は「後から書いたもの」や「より具体的な指定」が優位に立ちます。
CSSの編集などで「あれ？変化しない、変わらない」となる場面は多いでしょう。

そんなとき、値の直後に !important をつけると、「他のルールは全部無視して、これを最優先しろ！」とブラウザに命令できます。

かなり役立つのですが、使いすぎると後でどの !important が効いてるのか分からなくなる時があります。基本的にはまずは!important なしで書いてみる事をおすすめします。

See the Pen 例：見出しの左線を赤に強制する by mikoto (@mikotohodo) on CodePen.

実際にCodePenで書いてみたのですが、!importantという魔法の一行を添えれば、強制的に書き換えられます。

なぜ!importantの説明かと言うと、デザインに関する気に入ったコードに出会ったとします。そして自身のWebサイトにコピペした際に変化が見られない事が多々あるからです。
実際にテストでは（CodePen）問題なかったコードが、ここのWebサイトで見出しのデザインを変更しようとした際に変化が見られなかった事もありました。

そんな時に!importantを使ってみてください。

ここから少し凝ったややこしい見出しを紹介

見出しの枠の上に「CHECK」や「POINT」と表示しているものをよく見ますが、それに似ているかもしれません。
ただし、文字の使い方によっては使い道の幅が広がるものだと思います。デザイン的にも使い方によってはとても面白いと思います。

注目！

構成が変態すぎる見出し

まず、この見出しは<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>
</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; 
}

このコードを使うにあたっての問題点は存続の見出しと設定が被った為にデザインが正しく表示できない所でした。ここでは見出し<h3>のパワーを上げる為に!importantを使っています。

不具合、つまりはCSSを設定しても変化がない事態を把握するにはデベロッパーツール（開発者ツール）、すなわち検証画面を開いて該当箇所が働いているを確認します。設定した箇所に打消し線が引かれていたら修正をする必要があります。

h3.mh-simple-link {
margin: 0; 
padding: 0;
background: none;
border: none;
color: #2c3e50;
font-size: 18px; 
font-weight: bold;
letter-spacing: 2px; 
line-height: 22px; 
}

このような場合、なんらかの修正をしますが手っ取り早いのが!importantです。が、あえて !important を使わずに、これから紹介する「点数計算」で勝つのが「真の変態（プロフェッショナル）」の領域です。

<div class="mh-heading-wrapper"><!-- お父さん（10点） -->
  <span class="mh-badge">注目！</span><!-- 親戚（10点） -->
  <h3 class="mh-simple-link">構成が変態すぎる見出し</h3><!-- 本人（10点+1点） -->
</div>

.mh-heading-wrapper h3.mh-simple-link と指名したら…

  • .mh-heading-wrapper（クラス：10点）
  • h3（タグ：1点）
  • .mh-simple-link（クラス：10点）
  • 合計：21点

多くの場合、親テーマの設定はここのブログ（ミコトホド）のCSS（子テーマ）よりもさらに「長い家系図」で指名されています。

.article h2, .article h3 （など、さらに別の親を足してくる）
→ これで31点や41点を出してきます。

そこでdivやspanの数（家系図の人数）を増やして指名、言い換えればdivやspan（タグ）の階層（入れ子）を増やしてあげれば、CSSの点数が加算されて勝てるようになります。が、WordPressには.singleというものがあります。divの数を増やさずに.singleを加えてあげると加点されて、親テーマに勝てるＣＳＳになるかもしれません。

single
100%ではありませんが、現時点のWordPressのほぼすべてで使えます。HTMLへ加筆することなく.singleを加えるだけです。
.single .mh-heading-wrapper h3.mh-simple-linkの様にです。これで点数が21点だったものが31点になります。

これをブラウザに説明すると、「single」という大きな家（bodyタグ）の中に住んでいる、「mh-heading-wrapper」という箱（divタグ）の中に住んでいる、「mh-simple-link」という肩書きを持った「h3」君！となります。

タグを増やすことの真実

CSSの点数ルールでは、実は「タグそのもの」と「クラス名」で点数が全然違います。

  • divやspan（タグ）を1つ増やす： ＋1点
  • それに名前（クラス名）を付けて指名する： ＋10点

つまり、ただ div を増やすだけだと「1点」しか上がりませんが、「クラス名のついたdiv（おじいちゃん）」を1人増やすと、一気に「11点」加算されることになります。

ここで紹介していたHTMLにはspanがあり、クラス名を付けているのだから10点になるだろうと思われるかもしれません。今回のHTML構造をもう一度見てみましょう。

  • mh-heading-wrapper（お父さんの箱）
    • ├ span.mh-badge（注目！バッジ）
    • └ h3.mh-simple-link（見出し本人）

ここで重要なのは、h3はspanの中に入っていないということです。二人は同じ箱（wrapper）の中に並んでいる「兄弟」みたいな存在です。

もしspanを点数（10点）に含めたいなら？

spanの10点も足して31点にしたい！という変態的な情熱がある場合は、特殊な記号を使います。

.mh-heading-wrapper .mh-badge + h3.mh-simple-link
この + は「隣にいる」という意味です。ここでWordpressを使っているならsingleも加えることが出来ます。

.single .mh-heading-wrapper .mh-badge + h3.mh-simple-link

このようになります。「隣にいるアイツ（span）の力も借りて点数を底上げするぜ！」というマニアックな手法が、 +（隣接セレクタ） です。そしてこの隣接セレクタはすぐ隣（直後）にいないと発動しません。残念ながら一般的には使用しません。

見出しの使い方を改めて楽しもう

WordPressを使っている場合はsingleの力を借りれますが、他のブログを使っている場合は、強い力を持つ!importantを使います。

見出しの見せ方を工夫すると今よりももっと楽しめるでしょう。ただ、その楽しむをちゃんと得る為には知らなければならない事が多々あります。その多々ある情報を少しずつで良いので蓄えていただけたらと思います。

あとがたり（不具合の黙示録）

ブログのテーマの話になると、頻繁に耳に入ってくるのがcocoonです。現在conohaサーバーを使ってますが、ConoHaの管理画面から簡単にcocoonのテーマをダウンロードできます。Q&Aなんかを調べているとcocoon専用のページに遭遇したりもするので、知名度を絶大でしょう。

そんなcocoonを信じてテーマにしたのですが、この記事を書くにあたって大問題が発生しました。それは投稿編集画面内で設定できるCSSが反映されないものでした。まず始めにしたのがキャッシュのクリア。そしてプラグインの無効化。まあ大体がこれらから始めます。ネットが通じなくなった時もまずは簡単にできる事から始めます。エラーが発生した場合の最初の対処としては、いきなり大きな事はしません。

そこで長いCSSではなく、短いものを設定しました。それはbody { background: red !important; }です。背景があかくなります。。。赤くなりました。

何故だっ！と思い、元々設定していたCSSをしばらく眺めて原因を掴みました。

cocoonの投稿編集画面のCSS不具合を解消、その方法の一例

結果を言ってしまえば、CSSに書かれている /* */ これです。名称はコメントアウト。コードを管理する上でなくてはならないものです。

この記号で囲まれた部分は、ブラウザから「無視」されます。つまり、どれだけ書いてもデザインには一切影響を与えません。ですが、これがエラーとなり、ConoHaサーバーが弾いてました。対処方法としてはそのエラーを除外するだけなので簡単なのです。

もしも、投稿編集画面でCSSを設定したのにも関わらずうまく反映されないという人はそのあたりを疑ってみてはと。

コメント