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

2019年5月21日

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

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

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

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

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

完成イメージ

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

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

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;
} 

終わりに

装飾に関しては改善の余地がありそうです。

ご指摘等ございましたら教えて頂けると幸いです。