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

スポンサーリンク


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

横幅の広い状態

横幅の狭い状態

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

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

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

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

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

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

ソースコード

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;
}

&laquo; と &raquo; の2つはエンティティです。

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

参考記事:ハートマークを表示するの巻 エンティティの説明をしています

英語ではないらしいのですが、私はleft(左)の「&laquo;」と
right(右)の「&raquo;」と覚えました。

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

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

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

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

参考記事:画像の隣に文章を配置したい floatの説明をしています

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

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

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

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

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

参考記事:枠の中の背景に画像を使いたい! 記事中の「文字位置の指定」でtext-alignを説明しています。

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

このブログを書いているサービス「ファンブログ」のスキン用オリジナルタグは「ファンブログのオリジナルタグ一覧 - ファンブログ!![無料]」で調べることが出来ます。そのオリジナルタグを適用して上の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> の間は、次の記事があるときにだけ表示されます。


関連コンテンツ

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください