【カスタマイズ】HTML/CSS|はてなブログで目次に含まれない見出しを設定する

f:id:kuroNoir:20211030161116j:plain

ブログを書いてると目次に入れるほどではないけど見出しくらいの強調はさせたいなってときが何度かあったんですが、はてなブログで見出しタグを使うと自動的に目次に含まれてしまうんですよね。

ネットで見出しのデザインを検索すれば、それはそれはたくさんの方がCSSのソースを提供してくださってますが、正直デザインを選別したり、ソースを編集したりするの面倒くさいしねぇ(´・ω・`)ゞ

なんとか既存のソースだけでも見出し風のデザインが構成できないかをいろいろ考えまして、くろネコなりに4つほどアイデアを検討してみました。何かの参考になればと記事にまとめておきます。

スポンサーリンク

目次に含まれない見出しを設定する方法

 記事中の見出しから目次を自動的に作成する(目次記法) - はてなブログ ヘルプ

はてなブログは、[:contents]を入れることで記事の見出しから目次を自動的に作成する「目次記法」というの機能が利用できるようになっています。<h1>~<h6>タグに対してid属性が自動的に紐づくという仕組みのようですね。逆に言えば、<h1>~<h6>タグを使わなければ目次にも拾われないということなので、何か別のHTMLで見出しっぽく構成すればいいのかと思い、以下の4つのアイデアを考えてみました。

①箇条書きを活用する

箇条書き(<ul>タグ)や番号付きリスト(<ol>タグ)を使うことで小見出しみたいな構成をさせることができます。中に入れる項目となる<li>タグは意外と万能でして、<div>タグとか<p>タグとか割と何でも入れ込めます。

実用例
<ul>
    <li>
        <p><strong>スコティッシュ・フォールド</strong></p>
        <p>英国北部にその起源を有するネコの一品種である。スコットランドで発見された、突然変異した猫の個体から発生した。<span style="text-decoration: underline;">折れ曲がった独特の耳が何よりも際立った特徴</span>とされる。</p>
    </li>
    <li>
        <p><strong>マンチカン</strong></p>
        <p>北アメリカに起源を有する猫の一品種。マンチキンと呼ばれることもある。犬種のダックスフントやコーギーを思わせる全身、<span style="text-decoration: underline;">短い脚を特徴</span>とする。</p>
    </li>
</ul>

黒点や数字が自動的に入り、インデントの設定もデフォルトがあるので、CSSをわざわざ編集する必要がないところは手軽かなと思います。

<li>タグのところにstyle属性でCSSをべた書きすればいろいろアレンジも可能です。例えば、list-style-typeをsquareにすれば、黒丸から黒四角に変更することができます。marginを調整して本文と同じようなインデントにするのもいいと思います。

②説明リストを活用する

<dl>・<dt>・<dd>の3つのタグを利用して、見出しを構成してみます。

実用例
ノルウェージャンフォレストキャット
原産はノルウェー、スカンディナヴィア半島を中心とした北ヨーロッパで、非常に寒冷な気候にも適応する長毛種。
ブリティッシュ・ショートヘア
グレートブリテン島原産とされている。短毛種。土着の短毛猫を改良して血統管理されている。自然発生種に類され、ブリテンの地に源流を有する数多の猫種のなかでも最古であると考えられている。
<dl>
    <dt>ノルウェージャンフォレストキャット</dt>
    <dd>原産はノルウェー、スカンディナヴィア半島を中心とした北ヨーロッパで、非常に寒冷な気候にも適応する長毛種。</dd>
    <dt>ブリティッシュ・ショートヘア</dt>
    <dd>グレートブリテン島原産とされている。短毛種。土着の短毛猫を改良して血統管理されている。自然発生種に類され、ブリテンの地に源流を有する数多の猫種のなかでも最古であると考えられている。</dd>
</dl>

本来は特定のモノや語句に対して、説明文を差し込むときに用いられるものですが、箇条書きと同じくインデントや装飾の設定などが元からあるので簡単に利用できます。

  • dl(description list):説明リスト
  • dt(description term):説明する言葉
  • dd(definition description):説明文

ちなみに、このブログのテーマである「Naked」では、グレーのアンダーラインにインデント設定がデフォルトで中見出しにやや似ているデザインでした。新規に作るよりテーマの統一感がとれるところがいい点ですね。

もし、自分のテーマだとどういう風に表示されるのか知りたいという方はaboutページをチェックしてみてください。ブログ投稿数や読者の部分に使われてるのがこのタグですので、デザインを確認することができます。

f:id:kuroNoir:20211030173650j:plain

はてなモジュールを流用する

サイドバーに設定されているクラスを本文でも流用してしまおうという方法です。

実用例
アメリカン・ショートヘア

17世紀にメイフラワー号でアメリカに上陸したネコの子孫とされる。飼いやすさから日本でも1990年代後半頃より流行し始め、現在ではごく一般的な猫の品種として定着した。『アメショー』という略称で呼ばれることも多い。

<div class="hatena-module-title">アメリカン・ショートヘア</div>
<p>17世紀にメイフラワー号でアメリカに上陸したネコの子孫とされる。飼いやすさから日本でも1990年代後半頃より流行し始め、現在ではごく一般的な猫の品種として定着した。『アメショー』という略称で呼ばれることも多い。</p>

クラス名に"hatena-module-title"を指定するだけで使うことができます。テーマごとにデザインが用意されているので、これもブログの統一感が保てそうですね。

デザインCSSに設定を加えることも可能で、詳しくはブラウザの開発者ツールとかでデザインをチェックするのもいいと思います。ただし、サイドバーにも影響が出る可能性があるので注意が必要ですね。

④現行の見出しデザインを流用する

上述の通り、「目次記法」で抽出されるのは<h1>~<h6>タグが対象です。ですので、見出しタグにあたっているCSSを別の名前で準備しておけば、いつでも流用することが可能ということです。

例えば、このブログのテーマである「Naked」では、見出しのデザインに以下のCSSが用意されています。

.entry-content h3 {
    margin: 32px -32px 20px -32px;
    padding: 12px 16px;
    border-left: 6px solid #444;
    background-color: #f6f6f6;
    color: #444;
    font-size: 20px;
    font-weight: bold;
    line-height: 1.4;
    letter-spacing: 1px;
}

このソースのセレクタ部分を別名にしてデザインCSSに追加しておけば、<div>タグでクラス名を設定するだけで見出しタグと同じデザインだけれどもid属性が紐づかない見出しの完成です。ま、style属性にべた書きしてもいいのですが、長くなってソースが見づらくなるのも嫌ですから、今後も使い続けることを考えるとデザインCSSに準備しておおいた方がいいでしょうね。

ただ、この作業ってネットのソースコードをデザインCSSにコピペする行為と大差ないので、今回のテーマからはやや外れるかもです。面倒でなければ一つの方法として活用してください。

まとめ

本来見出しというのは、ブログの内容を簡潔に示した道筋やキーワードとしての役割があります。SEO対策を考えると、こういう装飾の発想はあまりよくないのかもしれません…。ま、デザインも適材適所ですね。適切な見出しとそれを補うデザインで見やすいブログ設計を心掛けてください。

オススメの参考書籍

世界で一番かんたんで丁寧な入門書
「Webサイトを手軽に作ってみたい」「HTML、CSSの基礎を学びたい」と漠然と思っている人から、「一度Webサイトを作ろうとしたことがあるが挫折した」という人まで。

関連記事