カスタマイズいろいろ（後半）
■文字を加える
ページ番号群の左隣に文字を配置したい場合は、ul要素の直前で以下のように記述します。
<p class="linkhead">ページ番号：</p>
<ul class="pagelinks"> ～ </ul>
<ul class="pagelinks"> ～ </ul>
ここでは、「linkhead」というクラス名を付加したp要素を記述しています。これに対してスタイルシートで以下のように装飾します。
p.linkhead {
float: left; /* 横に並べる */
margin: 0px; /* 余白をなくす */
font-size: 80%; /* 文字を小さく */
padding-top: 0.4em; /* 上側の余白 */
}
float: left; /* 横に並べる */
margin: 0px; /* 余白をなくす */
font-size: 80%; /* 文字を小さく */
padding-top: 0.4em; /* 上側の余白 */
}
すると、以下のように見えます。
■文字サイズを大きくする
文字サイズを大きくするには、ul要素に対してfont-sizeプロパティを使って望みの大きさを指定します。
ul.pagelinks {
font-size: 150%;
}
font-size: 150%;
}
上記では値に「150%」を指定しているので、1.5倍の大きさで表示されます。
おわりに
今回は、ページ番号を枠で囲んだ「箱形のページ移動リンク」を作る方法をご紹介いたしました。 複数のページから構成されるコンテンツに使ってみて下さい。
【関連記事】
