前回は、「目次を設置及び目次の中に”目次”の字を挿入」を行いました。今回は、「目次に枠」を設定します。
それにあたっては、ネコケンの力だけでは難しいので生成AIのMicrosoftのCopilotの力を借りてこれを達成したいと思います。
目次設定の仕方は以下を参照してね。↓↓
前回の記事はこちら
どのような状況になればよいか？
となります。左の枠線が設定されていない状態から、右の枠線が設定されている状況になればよいですね。
Copilotに聞いてみる
ネコケン：はてなブログで目次を線で囲むにはどうしたらいい？
Copilot：
はてなブログで目次を線で囲む方法は、CSSを使用してカスタマイズすることができます。以下の手順に従ってください：
1. はてなブログの管理画面にログインします。
2. 「デザイン」設定に進み、「カスタマイズ」を選択します。
3. 「カスタマイズ」画面で「デザインCSS」または「HTML/CSS編集」を選びます。
4. 目次を囲むためのCSSコードを追加します。例えば、以下のようなコードを使用できます：
```css
.table-of-contents {
border: 1px solid #333; /* 線の色と太さを指定 */
padding: 10px; /* 内側の余白を指定 */
}
```
5. 設定を保存し、ブログを確認して目次が線で囲まれているかをチェックします。
このコードは目次のクラスに適用され、1ピクセルの固定線で目次を囲みます。色や太さ、余白はお好みで調整してください。¹³⁴
もし目次のデザインをさらにカスタマイズしたい場合は、他のCSSプロパティを追加してみてください。例えば、背景色を変更したり、角を丸くしたりすることができます。¹⁵
ご不明点があれば、お気軽にお尋ねください。お手伝いできることがあれば幸いです。🙂
実際にCSSを貼り付けてみよう
（手順）
するとプレビュー表示で枠線ができた事がわかりました！！
あれ！！前回に比べてえらく簡単にできました。「変更を保存」を選択してくださいね。これで全てのブログの目次に枠線がつけられました。
CSSを使っての飾りつけここまでは、意外に簡単にできていますね。
次回も何かやってみたいと思います。
よろしくお願いいたします。
ーネコケンー
