長いタイトルでも重ならないナビゲーション

口で説明すると難しいんですが、今回やりたいことは下の図のように横幅が広いときには1行で、横幅が足りない時には２行で、「前の記事」を左端に、「次の記事」を右端に表示することです。

このブログは「ここにブログの名前を入れます」というタイトルですが、長いので以下「ナマ入れ」と省略表記します。

先日、ナマ入れのスキンを変えました。まだスキンの名前を発表していなかったので、ここで発表させていただきます。スキンには「薄いけど破れない」という名前をつけました。

話は戻ります。このスキン（テンプレート）は画面の幅に応じて左右の幅が伸縮するように作っています。よく伸びるスキンです。実際にブラウザのサイズを変えて見ていただくと、お分かりいただけると思います。

ただし、あまりにも狭いと見づらいので、８００ピクセルより小さいときは固定幅になり、それより小さくならないようにしてあります。

問題は、画面の幅が足りている時と、足りていない時の２つのパターンがあって、その両方に対応しないといけないということです。今回の場合、横幅に応じて文字の大きさを変えるというアプローチもあるにはあります。

しかし、文字が小さくなるのは読みづらさにつながると思うので文字サイズは固定したまま、幅が足りない時は改行させるようにしました。

ソースコード

HTML

<div class="navi">

  <span class="left">
    <a href="URL" title="前の記事名">&laquo; 前の記事「記事名」</a>
  </span>

  <span class="right">
    <a href="URL" title="次の記事名">次の記事「記事名」 &raquo;</a>
  </span>

</div>

<br class="clear" />

スタイルシート（CSS）

div.navi{
 width:100%;
}
div.navi span.left{
 float:left;
 text-align:left;
}
div.navi span.right{
 float:right;
 text-align:right;
}
br.clear{
 clear:both;
}

« と » の２つはエンティティです。

実際には「«」は「«」、「»」は「»」と表示されます。

英語ではないらしいのですが、私はleft（左）の「«」と
right（右）の「»」と覚えました。

ナビゲーションの表示領域はクラス名「navi」のdivエレメントです。

HTML5で書く場合は「div」ではなく、新しいエレメント「nav」が使えますが、今回の話題から逸れるので割愛します。

今回、もっとも重要なのは float です。

float の説明は以前の記事で説明しています。

float:left;の指定で « 前の記事「記事名」 全体を左に寄せます。同様に float:right;の指定で 次の記事「記事名」 » 全体を右に寄せます。

これで上の図のように、領域が足りている時は1行で、領域が足りない時は２行で表示されるようになります。

float を指定した後は忘れずに clear を指定しないとレイアウトがグチャグチャになるので注意が必要です。

text-align の指定はなくてもいいかもしれません。

ただ、 <div class=”navi”> ～ </div> の領域にtext-align:center を指定したら、表示が汚くなったので書き込んだままにしています。

ファンブログのスキンに適用する場合

このブログを書いているサービス「ファンブログ」のスキン用オリジナルタグは「ファンブログのオリジナルタグ一覧 － ファンブログ！！[無料]」で調べることが出来ます。そのオリジナルタグを適用して上のHTMLを、1記事ページのスキンに書き込むと下のようになります。

<div class="navi">
<BlogArchivePrevious>
<span class="left"><a href="{$BlogArchiveLink$}" title="{$BlogArchiveTitle$}">&laquo; 前の記事「{$BlogArchiveTitle$}」</a></span>
</BlogArchivePrevious>
<BlogArchiveNext>
<span class="right"><a href="{$BlogArchiveLink$}" title="{$BlogArchiveTitle$}">次の記事「{$BlogArchiveTitle$}」 &raquo;</a></span>
</BlogArchiveNext>
</div>

<BlogArchivePrevious> と </BlogArchivePrevious> の間に書いてあることは、前の記事があるときだけ表示されます。つまり、前の記事がない場合に « 前の記事「」 とカッコの中が空の状態で表示されてしまう心配はありません。

同様に <BlogArchiveNext> から </BlogArchiveNext> の間は、次の記事があるときにだけ表示されます。