【Luxeritas】追従サイドバーを使ってスクロールしても固定で表示されるように設定する
※(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;
}
終わりに
装飾に関しては改善の余地がありそうです。
ご指摘等ございましたら教えて頂けると幸いです。
ディスカッション
コメント一覧
まだ、コメントがありません