ブログカスタマイズの雑談BLOG

Seesaaブログの記事ページの下には、「前ページ・次ページ案内リンク」が表示されます。
私はこれまでの記事で、「前ページ・次ページ案内リンク」をボタンで表示するようにカスタマイズしました。





カスタマイズ後の現時点のテンプレートに大きな問題があるわけではありませんが、ずっと心に引っ掛かっていた部分があったんです。
この間CSSを編集していた時にふと思いついてやってみたら、引っ掛かっていた部分の処理が上手くできたので、今回改めて記事を書くことにしました。

これまでのカスタマイズの問題点

私がずっと気になっていた問題点とは、「ボタンの高さ」のことです。
ここまでのカスタマイズでは、ボタンの高さは「記事タイトルの文字数」で決めていました。


ボタンの横幅については、CSSで指定したので「プレビューボタン」も「ネクストボタン」も同じ横幅になります。
高さについては、文字数を指定して2行分になるように設定していましたが、記事タイトルの文字数によって「プレビューボタン」と「ネクストボタン」の高さが異なってしまう場合があったのです。



記事タイトルが1行と2行の場合
「前ページ・次ページ案内リンク」部分で、記事タイトルが1行と2行になる場合です。




例えばプレビューの記事タイトルの文字数が少なくて、ネクストの文字数が多い場合は、このようにボタンの高さが1行と2行になってしまいます。
ボタン部分の表示文字数を指定していますが、指定文字数に足りない場合は1行で表示されてしまうわけです。（もちろん、指定文字数を超える文字数の場合は後半が省略されますので、ボタンは2行分の高さで表示されます）




ブラウザの横幅を狭くした場合
ブラウザの横幅を少し狭くした場合の表示です。




もしもブラウザの横幅を少し狭くして表示した場合は、文字数を指定することでボタンの高さを設定していたわけですから、この画像のように、3行分の高さになってしまうこともあります。

ボタンの高さを指定する方法

ボタンの高さを「記事タイトルの文字数」で決めるのではなく、CSSで高さを指定すればいいと思ったんですが、そうすると、ブラウザの横幅を狭くした時に、文字がはみ出てしまいます。





こんな感じで、文字がボタンの枠線からはみ出てしまいます。
これは「記事タイトルの文字数」を指定しているからです。
でも、閲覧者がどれくらいの幅でページを見るのかは誰も予測ができませんから、ブラウザの横幅に合わせて文字数を指定するなんてことはできません。



どうにかできないかな？と調べていたら、CSSの該当部分に「overflow: hidden;」と記述すれば、指定した高さよりも中身の文字がはみ出そうになった時に、はみ出た分を隠してくれることを知りました。
この「overflow: hidden;」さえあれば、ボタンの高さを好きなように設定できます！



以下、設定を説明しますが、とりあえず完成イメージを先に掲載しておきますね。
ブラウザの横幅を狭くした場合です。


編集後のイメージ



編集前のイメージとは異なり、ボタンの枠線からはみ出た文字は、見えません。
文字数をどのように指定していたとしても、ボタンの枠線内に入りきれなかった文字は全部隠されてしまうのです。



では、やり方を説明したいと思います。
ページ案内リンク「前ページ・次ページ案内リンク」については、このブログで説明した通りにカスタマイズされていることを前提に話を進めます。
編集内容を確認しておいてください。

CSSで「前ページ・次ページ案内リンク」の高さを指定する

以前のカスタマイズ＜■ページ案内リンク「前ページ・次ページ案内リンク」ボタンの高さを2行にする（3）CSSの編集＞により、CSS（スタイルシート）には、既にボタンに関する記述が入っています。



前ページ・次ページ案内リンク全体の枠として「permalink2」を作成し、プレビュー（前のページ）部分には「permalinkprev」「prev-mark」「prev」の3つのclassを設定しました。
ネクスト（次のページ）部分にはプレビューと同じように「permalinknext」「next-mark」「next」の3つのclassを設定しています。






今回編集するのは2ヶ所です。
CSSの「前ページ・次ページ案内リンク」関連の記述の中の、「.permalinkprev .prev a」（プレビュー案内ボタン）と、「.permalinknext .next a」（ネクスト案内ボタン）の、それぞれの記述の下に、下記の「追加するコード」をコピペします。


＜追加するコード＞


「height: 50px;」はボタンの高さです。今までのカスタマイズでは2行分の高さになるように設定していたので、同じくらいの高さになるように数値を「50px」にしました。
そして、ブラウザの横幅を狭くした時に、高さ50pxからはみ出てしまう文字を隠すために「overflow: hidden;」を記述します。



2ヶ所にコピーして貼り付ければいいんですが、念のため、追加後の一連のコードを書き出しておきます。


＜編集後（プレビュー案内ボタン）＞


＜編集後（ネクスト案内ボタン）＞

コード編集後の実際のページ

ページ案内リンク「前ページ・次ページ案内リンク」ボタンです。
ブラウザの横幅を狭くするとどのように表示されるのか、画像を3枚掲載しておきます。











次の記事の紹介

次の記事では、Seesaaブログ編集に関するここまでのCSS記述を掲載します。