コピペOK はてなブログの記事見出しの追加方法とCSS

こんばんは。

nanana-blog管理人のナナナです。

ブログ運営を始めて他のブログを見ることが多くなりました。

他のブログ見ているとブログ記事内に記事メニューを作っているブログが

多いことに気づきました。

記事メニューをつけると、どんなことが書いてあるのかが分かりやすいし

自分の見たい内容がすぐに見つけられるのでとても便利だと思い、

私も記事見出しを作ることにしました。

本日ははてなブログの記事に記事見出しを作る方法と、このブログに記事見出しの

CSSを紹介します。

記事見出しの設置手順
- 記事見出し作成方法
- 記事見出しカスタマイズ用CSS
最後に

記事見出しの設置手順

記事見出し作成方法

記事見出しは「大見出し」「中見出し」が対象です。

まず記事作成画面で記事を作成します。今回はテスト記事を作成し、

見出しを「大見出し」、小見出しを「中見出し」にしています。

記事見出しを作成するには画面上部の目次ボタンをクリックします。

プレビュー表示をすると[:contents]と表示された部分に記事見出しが

表示されます。

確かに記事見出しは作成されますが、見出しの表題がなくデザインも

イマイチなため、CSSでカスタマイズをしている方がほとんどです。

記事見出しカスタマイズ用CSS

ダッシュボード → デザイン → カスタマイズ → 記事の記事上　にCSSを

追記します。

貼り付けるCSSは以下です。

記事上にCSSを記述していない場合は、<style type=text/css> </css>の間に

記述してください。

.entry-content .table-of-contents {
margin: 2em 0; /*目次上下の余白*/
padding: 0 0 16px 0; /*目次下内部余白*/
border: 1px solid #ddd; /*枠線のスタイル*/
background-color: #f7f7f7; /*目次内背景色*/
font-size: 0.95em; /*文字サイズ*/
font-weight: normal; /*文字太さ*/
}
.table-of-contents:before {
content: "目次"; /*ここでタイトルを書き換える*/
width: 100%;
padding: 7px; /*タイトル内余白*/
margin-bottom: 10px; /*タイトル下余白*/
font-size: 110%; /*タイトル文字大きさ*/
font-weight: bold; /*タイトル文字太さ*/
color: #000; /*タイトル文字色*/
}
.table-of-contents ul {
margin: 0;
padding: 0 !important;
border: none;
}
.table-of-contents li {
margin: 0 0 0 2.5em; /*左側余白*/
padding: 0.6em 0 0 0 !important; /*行間余白*/
list-style-type: decimal; /*リストタイプ*/
color:; /*リスト色*/
border: none;
}

プレビュー表示をすると、このようなデザインになります。