Ghost ブログに目次 (TOC) を組み込むと、長い記事をシームレスにナビゲートできるため、読者のエクスペリエンスが大幅に向上します。このチュートリアルでは、投稿内の見出しから TOC を自動的に生成する JavaScript プラグインである TOCBOT を使用して、任意の Ghost テーマに TOC を追加する手順を説明します。
TOCBOT を Ghost に統合する
TOCBOT は、投稿の見出しから効率的に目次を作成します。インストールするには、次の簡単な手順に従ってください。
- Ghost 管理ダッシュボードにログインし、 に移動します
Settings > Code injection。 - この
Site Header領域に、必要な TOCBOT スクリプトとスタイルシートを挿入します。
<script type="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.21.0/tocbot.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.21.0/tocbot.css"rel="stylesheet">
- 次に、
Site Footerセクションで、次のスクリプトを使用して TOCBOT を初期化します。
<script>
document.addEventListener('DOMContentLoaded', function() {
tocbot.init({
tocSelector: '.toc',
contentSelector: '.post-content',
headingSelector: 'h1, h2, h3, h4',
scrollSmooth: true
});
});
</script>
contentSelectorが、投稿コンテンツのテーマで指定されたクラスと一致していることを確認します。よく使用されるクラスには.post-content、、、.gh-contentまたは が含まれます.c-content。
- 最後に、設定の変更を保存します
Code injection。
投稿に目次プレースホルダーを挿入する
記事内に目次を表示するには、目的の場所にプレースホルダーを配置する必要があります。
- TOC を含めたい投稿を編集します。
/htmlエディターに入力して、希望の場所に HTML カードを追加します。- 次のコードを HTML カードに含めます。
<div class="toc"></div>
このコードにより、目次用のスペースが確保されます。投稿にアクセスすると、TOCBOT は、コンテンツの見出しから派生した動的に生成された目次をこのスペースに入力します。
目次の外観をカスタマイズする
テーマのデザインに合わせて TOC の外観をカスタマイズできます。
Site Headerの下にSettings > Code injection、 タグで囲まれたカスタム CSS スタイルを追加します<style>。
<style>
. toc {
padding: 20px;
border: 1px solid #e0e0e0;
background-color: #f9f9f9;
border-radius: 5px;
}
. toc a {
text-decoration: none;
color: #333;
}
. toc a:hover {
text-decoration: underline;
}
</style>
好みに合わせてこれらのスタイルを自由に調整してください。
さまざまなテーマに合わせて変更
テーマはコンテンツ セクションに異なるクラス名を使用することがあるため、contentSelectorTOCBOT セットアップの がテーマのコンテンツ クラスと一致していることを確認してください。
- 開いている投稿から始めてテーマを検査します。
- 投稿コンテンツを右クリックし、
Inspectブラウザの開発者ツールにアクセスすることを選択します。 - 投稿コンテンツを含む要素に関連付けられたクラス名 ( など) を見つけます
.post-content。
contentSelector発見した内容に基づいて、TOCBOT スクリプト内の を必ず更新してください。
スティッキー目次の作成
読者がスクロールしている間も目次を表示し続けるには、目次を固定するよう設定します。
- で
Site Header、 タグ内に次の CSS を追加します<style>。
<style>
. toc {
position: sticky; top: 20px;
}
</style>
これにより、ビューポートに応じて目次が配置され、ユーザーが投稿をスクロールしても目次が常に表示されるようになります。
これらの手順を実行することで、機能的な目次を使用して Ghost ブログを充実させ、投稿全体のナビゲーションと読者のインタラクションを強化できます。
コメントを残す