Cocoonのページ送りナビ（前の記事・次の記事）の左右を逆に配置するには、子テーマの style.css に専用のCSSコードを追加します。管理画面の「追加CSS」または「子テーマ」にコードを貼り付けて保存してください。 [1]
左右を入れ替えるCSSコード
次のコードをそのまま貼り付けます。 [1]
css
/* ページ送りナビの左右を入れ替える */
.pager-post-navi {
display: flex;
flex-direction: row-reverse;
}
.pager-post-navi .prev-post,
.pager-post-navi .next-post {
flex: 1;
}
コードは注意してご使用ください。
詳細な調整や個別のスタイル変更については、ものぐさWEBノートの解説記事を参考にしてください。 [1]
もしCSSを適用しても表示が崩れる、あるいはスマホ表示だけ個別に直したいなどの希望があれば教えてください。追加の調整コードを提案します。
WordPressテーマ「Cocoon」の投稿ページ下部にある「ページ送りナビ（前後の記事へのリンク）」の左右を逆（入れ替え）にするには、CSSのコードを追加する必要があります。
デフォルトでは「左：古い記事」「右：新しい記事」となっていますが、以下の手順で「左：新しい記事」「右：古い記事」に変更できます。 [1]
設定手順
- WordPressの管理画面から [外観] ＞ [テーマファイルエディター]（またはテーマエディター）を開きます。
- 編集するテーマに「Cocoon Child（子テーマ）」が選択されていることを確認します。
style.cssの一番下に、以下のCSSコードをコピー＆ペーストします。- [ファイルを更新] ボタンをクリックして保存します。
追加するCSSコード
/* ページ送りナビの左右を逆にする */
.post-navi {
flex-direction: row-reverse;
}
反映されない場合の確認ポイント
設定後にページを確認してもデザインが変わっていない場合は、ブラウザに古いデータが残っている可能性が高いです。その場合は、キーボードの Ctrl + F5（Macは Cmd + Shift + R） を押して、ページを強力に再読み込み（スーパーリロード）してみてください。
上記の設定で左右は無事に逆になりましたでしょうか？もし「矢印（前へ・次へ）の向きも合わせて調整したい」など、追加のこだわりがあれば合わせてお伝えください。
コメント