【Luxeritas】Next / Prev ナビゲーションを画面左右に固定表示

2019年10月13日2019年12月28日Luxeritas

Luxeritasは、投稿記事の下に前後ページへ移動するリンクを表示させることができます。これをブラウザ画面の左右に <>マークのボックスで固定表示して、マウスを重ねるとオープンしてタイトルとサムネイルが表示されるようにカスタマイズする方法の紹介です。

MSNに設置してあるあれです。現在、当ブログの左右に設定してあります(PCサイズの時のみ)。

仕様

記事下のページナビは前後の記事に移動したいときに便利です。しかし、記事を読んでいる途中で飽きてきて移動したいというとき下までスクロールしなければならないので面倒です。左右に固定表示されていたら途中でも簡単に移動出来ていいですよね。

左右に <> マークのボックスが固定表示されていてマウスをかざすとスライドしてタイトルとアイキャッチが表示されます。クリックするとページ移動します。当ブログの左右に設置してありますのでクリックして動作確認してみてください。

追加CSS

下記のCSSをコピーしてテーマに追加するだけです。追加する場所は、Luxeritas → カスタマイズ（外観）→ 追加CSS または、Luxeritas → 子テーマの編集 → style.css です。前者の方が変更がすぐ確認できるのでhatenaはもっぱら前者の方に追加しています。

/* 投稿記事 ページナビ */
@media (min-width: 773px) {
    /* 記事下ページナビを非表示に */
    #pnavi {
        border: none;
        background: transparent;
        box-shadow: none;
        height: 0;
        margin: 0;
    }
    /* ページナビを画面左右に固定 */
    #pnavi div a{
        position: fixed;
        bottom: 150px;
        height: 100px;
        min-height: 100px;
        width: 25px;
        background-color: #0068b7;
        opacity: 0.5;
        box-shadow: 0 0 5px rgba(0,0,0,.3);
        margin: 0!important;
        padding: 0!important;
        transition: all 0.3s;
        z-index: 20;
    }
    #pnavi div a:hover {
        width: 350px;
        opacity: 1;
        background-color: #fff;
        padding: 0;
        margin: 0;
    }
    #pnavi a {
        display: flex; 
    }
    #pnavi .next a{
        right: 0;
        flex-direction: row-reverse;
    }
    #pnavi .prev a{
        left: 0;
        flex-direction: row;
    }
    #pnavi a img {
        display: block;
        opacity: 0;
        width: 0;
        border: none;
        border-radius: 0;
    }
    #pnavi a:hover img {
        display: block;
        opacity: 1;
        width: 100px;
        border: none;
        border-radius: 0;
    }
    #pnavi a::before {
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        font-size: 2rem;
        text-align: center;
        line-height: 100px;
        display: block;
        width: 25px;
        flex-shrink: 0;
        background-color: #0068b7;
        color: #fff;
    }
    #pnavi .prev a::before {
        content: "\f053";
    }
    #pnavi .next a::before {
        content: "\f054";
    }
    #pnavi .next-arrow, #pnavi .prev-arrow {
        position: absolute; 
    }
}

メディアクエリで画面幅がPCサイズ(773px以上)の時のみ表示されるようにしています。773pxの部分はお好みで変更してください。あるいは、スマホでも表示したいなら、先頭の@media (min-width: 773px) {と最後の } を削除すれば常に表示されます。

まとめ

いつでも記事の前後ができるので確実にユーザビリティはアップします。WordPressのテーマでLuxeritasをご利用の方はCSSのコピペだけで簡単に設置できますので、ぜひお試しください。