[WordPress] ウィジェットエリアを転用して左サイドバーにした（CSS）

WordPressサイトで、ワイド画面の左側の空きスペースを活用し、目次を左サイドバーとして表示するカスタマイズを行いました。
このカスタマイズは、使っていないウィジェットエリアを、CSSで転用して実現しています。
画面幅に応じて表示を切り替える仕組みも導入し、小さな画面では従来の記事内目次を表示するようにしました。

1. すぐに見出しに飛びたい

パソコンで記事を読んでいるときに、スムーズに見出しに移動できるように、左サイドに目次を追加しました。

従来の目次は、導入文の後（１つ目の見出しの前）と左メニューの中に表示していました。

目次に戻る

1-1. 左サイドバーに目次を作る

パソコンなどのワイド画面では左部分が空いていたので、そこに目次を付けることにしたのです。

この「カスタムサイドバー」は、使っていないウィジェットエリアのひと項目（メインカラムスクロール追従）を画面上に固定して表示しています。

目次に戻る

2. サイドバーにするためのCSSコード

まず、ウィジェットエリア「メインカラムスクロール追従（#main-scroll）」に、ウィジェット「目次（Cocoon）」を追加しました。
後は、スタイルを設定するだけ。
style.cssに、パソコン用の左サイドバーに目次を追加するCSSコードを追加しました。

/** 左サイドバーを追加する（パソコン用）*/
#main-scroll {
    display: block;
    position:fixed;
    width:300px;
    top:40px;
    left:16px;
    z-index: -5;
}
.admin-bar #main-scroll {
    top:64px;
}

#main-scroll .toc{
    border: none;
    margin: 0;
    padding: 0;
}

/* サイドバー目次の開閉ボタン */
#main-scroll .toc-title{
    font-size: 0px;
    text-align: left;
    color: rgba(8, 19, 26, 0.5);
    margin-left:0;
    padding:0;
}
#main-scroll .toc-title::after {
    content: '\f101';
    font-family: FontAwesome;
    font-size: 24px;
}
#main-scroll .toc-checkbox:checked+.toc-title::after {
    content: '\f100';
    font-family: FontAwesome;
    font-size: 24px;
}

/* サイドバー目次 */
#main-scroll .toc-content{
    font-size: 14.5px;
    font-weight: bold;
    width: calc(50vw - 380px);
    position: relative;
    visibility: hidden;
    height: 0;
    left:0px;
    opacity: .2;
    transition: all 0.5s ease-out;
}
#main-scroll .toc-checkbox:checked~.toc-content {
    visibility: visible;
    padding-top: 0em;
    left:16px;
    height: 100%;
    opacity: 1;
}

/* 表示の制御（レスポンシブ） */
@media screen {
    #toc-3 {
        display:none;
    }
    
}
@media screen and (max-width: 1280px){
    #main-scroll{
        display:none;
    }
    #toc-3 {
        display:block;
    }
    
}
@media print {
    #main-scroll{
        display:none;
    }
}

目次に戻る