【ホームページ作成】箱形のページ移動リンクを作る

見やすくクリックしやすい箱形ページ番号

一部のニュース系サイトなどで見かける、箱形のページ移動リンクを作ってみましょう。 ただ数字を並べるだけよりも大きく見えるので、分かりやすくてクリックしやすいリンクになります。
例えば以下のようなものです。

上記では、画像は使っていません。ページ番号はすべてテキスト（文字）です。ですから、大きさの変更が可能です。 ブラウザの設定で文字サイズを変更すると、ページ番号の大きさも変化します。

上記は、ページが10まであって3ページ目が表示されている場合の例です。 「3」の部分だけ色が変わっていてクリックできないのはそのためです。

テキストですから、数字以外も使用可能です。例えば、A・B・C…なども使えます。使ってみた例は下記の通りです。

上記の3つのサンプルでは文字サイズを指定していません。 大きめに表示したいなら、以下のように文字サイズを指定しておくこともできます。（font-sizeプロパティに値「140%」を指定した例）

これくらい大きいと、ずいぶんクリックしやすいでしょう。

今回は、このような箱形のページ移動リンクを作る方法をご紹介いたします。

箱形ページ移動リンクの作成方法へ >>