CSSでタイトルに番号をつける

無料のワードプレステーマ GEMSTONE

見出しタグに番号をつけることができたら便利だなって思うことはありませんか?
実は番号付きリスト(OLタグ)の技術を利用すれば、簡単に導入ができちゃいます。

実際に見てみると

h1の見出しです

h2の見出しです

h3の見出しです

h4の見出しです

h5の見出しです
h6の見出しです

こんな感じです。
見出しタイトルに番号が振られていますよね?
(番号が振られていない場合は、見ているブラウザーがコードに対応していない場合があります)

編集しているのはCSSとHTMLです。


HTMLは見出しタグに title-number クラスを追加しましょう。
WordPressの場合は、管理画面の投稿記事または固定ページのテキストエディタで使用します。
必ず「テキスト」でエディタの編集をしましょう。

HTML

<h1 id="number1" class="title-number">h1の見出しです</h1>
<h2 id="number2" class="title-number">h2の見出しです</h2>
<h3 id="number3" class="title-number">h3の見出しです</h3>
<h4 id="number4" class="title-number">h4の見出しです</h4>
<h5 id="number5" class="title-number">h5の見出しです</h5>
<h6 id="number6" class="title-number">h6の見出しです</h6>

クラスが追加できたら次はCSSを編集しましょう。


CSSは下記コードをコピペしてください。

style.css

 .entry-content .title-number {
 counter-increment:number;
}
.entry-content .title-number:before {
 content:counter(number);
 background:#717992;
 width:40px;
 height:40px;
 line-height:40px;
 border-radius:50%;
 color:#fff;
 text-align:center;
 font-weight:bold;font-weight:700;
 font-family: 'Roboto', sans-serif;
 display:inline-block;
 margin-right:10px;
}

見出しの手前に自動で番号をつけるために、:before を使用しました。
フォントは、グーグルフォントの Roboto です。
装飾についてはお好みで調整してください。

counter-increment で番号を読み込んで
content で番号を呼び出しています。

このクラスは次回のバージョンに導入予定です。
お楽しみに!

この記事のタグ

デフォルト画像グーグルアドセンスの収益 前の記事

次の記事 GEMSTONEバージョ... デフォルト画像

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です