ホーム
Web制作
目次の付け方（HTML・CSSでコーディングする）

目次の付け方（HTML・CSSでコーディングする）

2025.02.18
Web制作

私はアメブロをやっていませんが、アメブロで目次をつける事があったのでメモ書きとして残しておきます。

アメブロはスマホアプリも使いやすいですが、この目次は残念ながらアプリでは機能しません。調べた限りでは現時点でそういう仕様らしいです。

ただ私なんかはスマホにアプリを増やしたくないんですね。

世の中にはブラウザでアメブロを見ている人も多くいらっしゃると思いますので、かなりの長文になってしまったり、記事のようなブログを書かれるのなら、目次はあったほうが必要なところだけ見れて便利です。

ただし、理解できたら簡単なことなんですが、HTMLもCSSも分からない…そもそもそういう事に苦手意識がある…という方にはきっと難しいと思うのでご了承ください。

＊

まず全体の文章はいつも通り、「通常表示」の画面で打ち込みましょう。それが終わったら、目次をつけていきますが、アメブロには「HTML表示」があるので、ここに直接コードを入力していきます。それをコーディングと言います。

「HTML表示」にして目次を入れたい部分に、例えば↓このように入れます。
※太字部分はご自身で適した言葉に変えて入力ください

<p>目次</p>
<ul>
　<li><a href=”#01″>目次タイトル１</a></li>
　<li><a href=”#02″>目次タイトル２</a></li>
　<li><a href=”#03″>目次タイトル３</a></li>
</ul>

そして、↓ブログのタイトル部分のコードをこのようにします。

<h3 id=”01″>目次タイトル１</h3>
（文章）
<h3 id=”02″>目次タイトル２</h3>
（文章）
<h3 id=”03″>目次タイトル３</h3>
（文章）

アメブロでHTML変換されているコードがh3かどうかは分かりません。重要なのは、id=””　を入れること。ここでは数字（例えば01）を入れていますが、idを呼び出すのが#ですので、タイトル部分では #01を指定している…という事になります。

基本はこれで目次は機能しますのでブラウザで確認しましょう。

ちなみにアメブロのプレビューでもチェックができません。機能しているかどうかは投稿しての確認作業になります。

＊＊

目次を中央寄せに表示させたい場合は、以下のようにCSS（style=”text-align: center;”）を追加します。

また、ulのコードは自動的に・が表示されます。デザイン的に要らない事も多く、非表示にしたい場合にはCSS（style=”list-style:none;”）をliに設定する事で消えます。

<div style=”text-align: center;”>
<p>目次</p>
　<ul>
　　<li style=”list-style: none;”><a href=”#01″>目次タイトル１</a></li>
　　<li style=”list-style: none;”><a href=”#02″>目次タイトル２</a></li>
　　<li style=”list-style: none;”><a href=”#03″>目次タイトル３</a></li>
　</ul>
</div>

HTMLとCSSは別物です。HTMLは文章、CSSはデザインを変えるものになりますが、簡単なデザインならHTMLのコードと一緒にこのように指定することが可能です。

＊＊＊

目次部分の背景色を変えたいなら、background-color: #○○○;　をdivに追加します。divにはすでに中央寄せのコードがありますので、その隣に以下のように設定可能です。
カラーコードは16進数（#○○○）で好きな色を探しましょう。ここではくすみピンクベージュ（#e6ddda）を指定しています。

<div style=”text-align: center; background-color: #e6ddda;”>
<p>目次</p>
　<ul>
　　<li style=”list-style: none;”><a href=”#01″>目次タイトル１</a></li>
　　<li style=”list-style: none;”><a href=”#02″>目次タイトル２</a></li>
　　<li style=”list-style: none;”><a href=”#03″>目次タイトル３</a></li>
　</ul>
</div>

ここまでの集大成をHTMLで設定すると以下のような見え方になります。