煤式自動連結器

鉄道模型製作の記事などでは、数回に分けて連載することもよくあることですが、先日あるブログを閲覧していて「〇〇〇の加工(1)」の続きを読もうと思い、画面下のあたりを見たら、「前の記事」とあって「〇〇〇の加工(2)」と書かれていました。内容としては明らかに次の内容だと思うけれど「前」という表現。逆に過去の記事には「次の記事」と書かれています。

時間の流れに合っていない?!

ためしにいろいろなブログを閲覧しましたが、さまざまな表現があるものの、前述のように時間軸と指し示す言葉の不整合はかなり見受けられました。また個別の記事だけでなく、ページにおいても「次のページ」が過去のもの、「前のページ」が新しいものを示す表現が使われていることもあります。

これらは現在を起点に過去に遡って記事を閲覧していくという設計思想であることはわかるのですが、連載モノを読む場合はやはり時間軸に沿ったナビゲーションのほうが自然でしょう。

個人的な結論として、「前」「次」という表現はあいまいなので、「過去」「最新」に準じた表現のほうが読者を混乱させないんじゃないかと思います。

ところで、当ウェブサイト。

エラそうに論じたところで、じゃあ自分のサイトはどうなのかっていうのを再確認してみることにしました。

まずはページ遷移。

ページの下のほうに表示されるナビゲーションですが、

となっていました。

WordPressの技術的な話をすると、

<?php posts_nav_link(' - ',('←新しいページ'),('古いページ→')); ?>

というふうに記述しています。

右か、左か。

WordPress Codexには

投稿クエリは日付の逆順にソートされるのが普通です。そのため通常は、next_posts_link() が古い投稿(セットの終わり方向)を指し、previous_posts_link() が新しい投稿(セットの始まり方向)を指します。

と書かれています。

いじくっているうちに「あれ? 新しいと古いの左右の位置が逆のほうがいいんじゃない?」と思い、変えることにしました。根拠としては、ブラウザの「戻る」「進む」や、動画編集ソフトなどのタイムライン、スーパーマリオブラザーズやグラディウスの画面スクロール方向から、「左が過去・右が未来」というものです。ただこれを表現しようと思うと、posts_nav_linkは使えません。かわりに、

<?php next_posts_link('←古いページ'); ?> <?php previous_posts_link('新しいページ→'); ?>

というふうに記述してみました。真ん中の「-」は条件によって出す出さないが面倒なのであっさりと廃止です。

実際の表示はこんな感じになりました。

これを実装するとき、最初、

<?php next_post_link('←古いページ'); ?> <?php previous_post_link('新しいページ→'); ?>

と書いたところ、文字は表示されるけれどハイパーリンクが効かずかなり慌てたのですが、「post」「posts」とSの違いだけで別の関数だなんて知らなかったヨまったく…

とりあえずページに関してはこれでいけそうなので、index.phpのほかarchive.php、search.php、category.phpを同様の記述にしました。

さて、個別ページ。

記事の最後にナビゲーションを用意しています。関連記事をつぎつぎと読んでいくのって楽しいですよね。

あちゃー、時間軸との整合性は問題ないのですが「前の記事」「次の記事」と書いてしまっています。他のサイトのナビゲーションに慣れた読者が訪れたら混乱してしまいそう。

もともと

<h2 class="commenttitle">前の記事・次の記事</h2>
<dl>
<dt>前の記事</dt><dd>← <?php previous_post_link('%link', '%title', TRUE); ?></dd>
<dt>次の記事</dt><dd>→ <?php next_post_link('%link', '%title', TRUE); ?></dd>
</dl>

と記述していました。

興味深いのはpreviousとnextの持つ時間的な位置づけ。

WordPress Codexには

標準の使い方(デフォルトの設定変更していないループ内)では、next_post_link は現在の投稿より新しい投稿へのリンクを表示します。これは似た名前の next_posts_link が現在の複数投稿ページより古いページへリンクするのと反対方向です。

と、とてもややこしいことになっています。

さて、記述をこのように

<h2 class="commenttitle">古い記事・新しい記事</h2>
<dl>
<dt>古い記事</dt><dd>← <?php previous_post_link('%link', '%title', TRUE); ?></dd>
<dt>新しい記事</dt><dd>→ <?php next_post_link('%link', '%title', TRUE); ?></dd>
</dl>

としたことで、

とキチンと論理的に表示されるようになりました。

まとめ。

「次」が何を意味するのか、「言わなくてもわかるだろう」的な表示は、やっぱり良くないナと思ったのでした。

実際の鉄道でも、関西の「先発・次発・次々発」に対して、関東の「こんど・つぎ・そのつぎ」がわかりにくいという定番ネタがありますよね。

参考になった記事。

• 「左が過去 → 右が未来」の方向が自然
• 左が過去で右が未来…?ページ送りの正しい方向とは?WEB屋のみなさんに聞いてみました
• お客様に行動をうながすホームページの心理学。左が過去で右が未来。視線でイメージを伝える。
• 前のページと次のページ
• ブログページの「前へ」「次へ」はどっちが新しい?あいまいワーディングの罠
• ブログの「前へ」「次へ」ボタンは左右どちらか過去・未来?