WordPressの投稿ナビゲーションを左右配置のボタン風デザインにした

WordPressの投稿ページには、前の記事や次の記事に移動するためのナビゲーションリンクが標準で付いています。しかし、デフォルトの表示では縦に並んでいることが多く、見栄えがいまひとつです。

今回は、このナビゲーションを左右に配置し、ボタン風のデザインに変更する方法を解説します。HTMLの構造はそのままで、CSSだけを調整して実現できます。

対象となるHTML要素

WordPressで自動生成される投稿ナビゲーションは、通常以下のような構造になっています。

<nav id="nav-below" class="post-navigation" aria-label="投稿">
    <div class="nav-previous">
        <span class="gp-icon icon-arrow-left">
            <!-- 左矢印のSVGアイコン -->
        </span>
        <span class="prev">
            <a href="..." rel="prev">前の記事タイトル</a>
        </span>
    </div>
    <div class="nav-next">
        <span class="gp-icon icon-arrow-right">
            <!-- 右矢印のSVGアイコン -->
        </span>
        <span class="next">
            <a href="..." rel="next">次の記事タイトル</a>
        </span>
    </div>
</nav>
Code language: HTML, XML (xml)

この構造では、アイコンとリンクテキストが別々の要素に分かれています。これをCSSで一つのボタンのように見せる工夫が必要です。

基本的な左右配置の実装

まず、ナビゲーション全体を左右に配置します。flexboxを使うと簡単に実現できます。

#nav-below.post-navigation {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 0;
}

.post-navigation .nav-previous,
.post-navigation .nav-next {
    flex: 1;
    max-width: 45%;
    display: flex;
    align-items: center;
}
Code language: CSS (css)

justify-content: space-betweenは、子要素を両端に配置するプロパティです。つまり、前の記事リンクは左端、次の記事リンクは右端に表示されます。

max-width: 45%で各ナビゲーションの幅を制限しています。これにより、記事タイトルが長くても要素同士が重なることを防げます。

ボタン風デザインの追加

次に、リンク部分をボタンのように見せるためのスタイルを追加します。

.post-navigation a {
    display: flex;
    align-items: center;
    padding: 15px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    color: #495057;
    text-decoration: none;
    transition: background-color 0.2s ease;
    width: 100%;
    flex: 1;
}

.post-navigation a:hover {
    background: #e9ecef;
    color: #212529;
}
Code language: CSS (css)

ここでのポイントはwidth: 100%とflex: 1の組み合わせです。これにより、ボタン全体がクリック可能な領域になります。

transitionプロパティは、ホバー時の色変化を滑らかにするアニメーション効果です。0.2秒かけてゆっくりと色が変わるため、ユーザーにとって自然な操作感を提供できます。

アイコンの配置順序の調整

現在のHTMLでは、前の記事も次の記事も同じ順序（アイコン→テキスト）でマークアップされています。しかし、デザイン的には次の記事のアイコンを右側に配置したいところです。

CSSのorderプロパティを使って、表示順序を変更できます。

/* 前の投稿：アイコンを左、テキストを右 */
.post-navigation .nav-previous .gp-icon {
    order: 1;
}

.post-navigation .nav-previous .prev {
    order: 2;
    flex: 1;
}

/* 次の投稿：テキストを左、アイコンを右 */
.post-navigation .nav-next .next {
    order: 1;
    flex: 1;
}

.post-navigation .nav-next .gp-icon {
    order: 2;
}
Code language: CSS (css)

orderプロパティは、flexboxの子要素の表示順序を数値で指定できる機能です。数値が小さいほど先に表示されます。これにより、HTMLの構造は変更せずに、見た目だけを調整できます。

アイコンサイズとテキスト表示の調整

アイコンが小さくて見づらい場合は、サイズを調整します。

.post-navigation .gp-icon {
    margin: 0 8px;
    flex-shrink: 0;
}

.post-navigation .gp-icon svg {
    width: 1.2em;
    height: 1.2em;
}
Code language: CSS (css)

flex-shrink: 0は重要な設定です。これにより、テキストが長くなってもアイコンサイズが縮まることを防げます。

長い記事タイトルに対応するため、テキストを複数行で表示する設定も追加しましょう。

.post-navigation .prev,
.post-navigation .next {
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
Code language: CSS (css)

-webkit-line-clampは、指定した行数を超えるテキストを省略する機能です。2行まで表示し、それ以上は「…」で省略されます。

スマートフォン対応

スマートフォンでも同じレイアウトを維持したい場合、画面サイズに応じた調整を行います。

@media (max-width: 768px) {
    #nav-below.post-navigation {
        gap: 15px;
    }
    
    .post-navigation a {
        padding: 12px;
        font-size: 14px;
    }
    
    .post-navigation .gp-icon {
        margin: 0 6px;
    }
}
Code language: CSS (css)

メディアクエリを使って、768px以下の画面では余白やフォントサイズを小さくしています。これにより、狭い画面でも読みやすさを保てます。

完成版のCSS

以下が、すべての調整を含んだ最終的なCSSコードです。

/* WordPress投稿ナビゲーション - ボタン風左右配置 */

/* ナビゲーション全体のレイアウト */
#nav-below.post-navigation {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 0;
}

/* 前の投稿・次の投稿の基本スタイル */
.post-navigation .nav-previous,
.post-navigation .nav-next {
    flex: 1;
    max-width: 45%;
    display: flex;
    align-items: center;
}

/* リンクのボタン風スタイル */
.post-navigation a {
    display: flex;
    align-items: center;
    padding: 15px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    color: #495057;
    text-decoration: none;
    transition: background-color 0.2s ease;
    width: 100%;
    flex: 1;
}

/* 前の投稿のアイコンを左端に配置 */
.post-navigation .nav-previous .gp-icon {
    order: 1;
}

.post-navigation .nav-previous .prev {
    order: 2;
    flex: 1;
}

/* 次の投稿のアイコンを右端に配置 */
.post-navigation .nav-next .next {
    order: 1;
    flex: 1;
}

.post-navigation .nav-next .gp-icon {
    order: 2;
}

/* ホバー時の色変更 */
.post-navigation a:hover {
    background: #e9ecef;
    color: #212529;
}

/* アイコンの余白とサイズ */
.post-navigation .gp-icon {
    margin: 0 8px;
    flex-shrink: 0;
}

.post-navigation .gp-icon svg {
    width: 1.2em;
    height: 1.2em;
}

/* テキストの複数行表示 */
.post-navigation .prev,
.post-navigation .next {
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* スマホ対応 */
@media (max-width: 768px) {
    #nav-below.post-navigation {
        gap: 15px;
    }
    
    .post-navigation a {
        padding: 12px;
        font-size: 14px;
    }
    
    .post-navigation .gp-icon {
        margin: 0 6px;
    }
}
Code language: CSS (css)

まとめ

WordPressの投稿ナビゲーションを左右配置のボタン風デザインに変更する方法を解説しました。flexboxとorderプロパティを活用することで、HTMLの構造を変更せずにCSSだけで理想的なレイアウトを実現できます。特に重要なポイントは、要素の表示順序をorderで制御し、テキストの複数行表示で長いタイトルに対応することです。