WordPress Fixed TOCで目次タイトルがヘッダーに隠れる問題
WordPressには、さまざまな無料および有料目次プラグインがあります。 通常は無料のプラグインで十分ですが、このブログには現在Fixed TOCという有料目次プラグインがあります。 ページを下にスクロールするときに目次アイコンが表示されるように設定した状態で、目次アイコンをクリックすると、目次のタイトルの一部がヘッダーや上部のバナーなどに隠れる問題が発生することがあります。 これらの問題が発生した場合は、解決策を見てみましょう。
WordPress 目次プラグイン
ティーストーリーブログを運営している場合は、目次を手動で挿入することがよくあります。 JavaScriptを使用して目次を手動で挿入することもできますが、目次をカスタマイズするのは簡単ではありません。
WordPressでは、さまざまな無料目次（TOC）プラグインを利用できます。 特に細かい設定が可能で、目次スタイルも比較的自由に設定できます。
(WordPressでも目次を手動で作成できます。 詳しくは「WordPress 手動目次の作成（+ブロックエディタ機能とCSSを使用）を参照してください。手動で作成すると、サイトへの速度を最小限に抑えることができますが、目次の追加/修正が面倒で、後で目次を削除したい場合は、毎日削除する必要があります。）
無料目次プラグインにはいくつかあり、現在 簡単な目次というプラグインが多く使用されており、活発にアップデートが行われています。
無料の目次プラグインを使用して目次を作成すると便利ですが、時間が経つにつれて目次プラグインが更新されずに放置されることがあります。 そのような場合は、活発に更新が行われる目次プラグインに切り替えることができます。 目次は、一定数の小タイトルがある場合に自動的に生成するように構成されているため、目次プラグインを変更しても問題なく動作します。
Fixed TOCはプレミアム目次プラグインで、現在このブログに適用されています。 このプラグインは、無料の目次プラグインに比べてサイトの読み込み速度に与える影響が少ない方です。 サイトの速度が少し遅くなることがそれほど問題にならない場合は、無料のプラグインで十分なようです。
Fixed TOCで目次タイトルがヘッダーに隠れる問題
Fixed TOCには、ページ/ポストを下にスクロールするときに目次アイコンを表示させるオプションがあります。
目次アイコンをクリックすると、目次が展開されます。
しかし、上の図のように側面に広がった目次ボックスの一部がヘッダーや上部バナーに隠れて見えない問題が発生する場合があります。
この問題が発生した場合は、簡単なCSSコードで問題を解決できます。 たとえば、このブログでは、次のCSSコードを追加して問題を解決しました。
/* Fixed TOC プラグイン에서 사이드바에 펼쳐진 목차 상단 부분이 가려지는 문제 시정하기 */
#ftwp-container.ftwp-fixed-to-post {
z-index: 9999!important;
}上記のコードを ルックス>ユーザー定義>追加CSS セクションに追加してください。
上記のコードで問題が解決しない場合は、プラグインの販売者に連絡してサポートを依頼してください。 有料プラグインなのでサポートを受けることができます。
CSS の z-index 属性は、要素の積み重ね順序を指定します。 積み重ね順序の大きい要素（要素）は、常に低い積み重ね順序の要素より前に配置されます。 詳しくはW3Schools CSS z-index Property ドキュメントを参照してみてください。 基本的なCSSを理解してもホームページ制作作業が一層簡単になります。
