【Luxeritas】追従サイドバーを使ってスクロールしても固定で表示されるように設定する

2019年5月17日2019年5月21日

※（2019/5/21追記）
CSSの最後の箇所について、「ul.toc_list」⇒「.toc_widget > ul.toc_list」と変更しています。
前者のケースでは投稿記事内の目次にも影響を与えてしまいます。ご迷惑をお掛けして申し訳ありません。

特に何も設定を行っていない場合、Web画面上のオブジェクトはスクロールすると画面上から消えます。

WordPressを利用している場合等であれば、プラグイン等によりスクロールしても画面上に表示されるように設定を行えます。

しかし、Luxeritasのデフォルトの機能である「スクロール追従サイドバー」を設定することにより、プラグインを使うことなく同様の状態に設定することが可能です。

以下のようなイメージです。

今回は「目次」をスクロールに合わせて追従するように設定を行います。

1. スクロール追従サイドバーに項目を追加する
2. 装飾
3. 終わりに

スクロール追従サイドバーに項目を追加する

WordPressのダッシュボード画面から、スクロール追従サイドバーに「#3目次（Luxeritasオリジナル」
を追加します。

（「外観」⇒「カスタマイズ」からでも設定可能です）

特定の条件に応じて、表示や非表示の設定も行うことが出来ます。

実際に表示すると、以下の通りです。

私のサイトの背景では違和感があるので、CSSで装飾を行います。

装飾

完成イメージは以下の通りです。「目次」の追加や背景色等の細々とした設定を行います。

以下のCSSを子テーマに追記します。

/*スクロール追従バー（目次の設定）*/
/*表示設定*/
@media print, (max-width: 991px) {
	#side-scroll .toc_widget {
    	display:none;
	}
}
/*各種設定*/
.toc_widget {
	position:relative;
    padding: 10px;
    border: 1px solid #ddd;
    color: #333;
    background: #fff;
}
/*タイトルの追加*/
.toc_widget:before {
    content: '目次';
	font-size:1.2em;
    position: absolute;
    left: 17px;
}
.toc_widget > ul.toc_list {
    margin: 25px 0;
}