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

記事ページの下部に表示される「前ページ・次ページ案内リンク」を編集します。


前回の記事＜■ページ案内リンク「前ページ・次ページ案内リンク」ボタンの高さを2行にする（2）HTMLの編集＞でHTMLを編集したので、今回はCSSを編集します。
編集するというか、下記で紹介する記述をコピペすればいいので簡単だと思います。



とりあえず、関連記事を案内しておきます。
下記の関連記事は「前ページ・次ページ案内リンク」に関するカスタマイズの記事ですが、2つ目の記事までのカスタマイズは、今回の連番になっているカスタマイズ（1）〜（3）までを実行すると、何というか、上書きされるようなイメージです。打ち消されるって感じでしょうか。
上2つの記事の内容を実行していなかったとしても、今回の連番になっているカスタマイズをやると上書きされて、「前ページ・次ページ案内リンク」をボタン表示にすることができます。





結局、「前ページ・次ページ案内リンク」をボタン表示にしたい場合は、（1）〜（3）までの記事の通りにすればいいわけです。
その上で、最後の「ボタンの高さを指定する」の記事に書いている内容を実行すると、ボタンの高さを一定にした状態でもちゃんと記事タイトルを表示できるようになります。

CSSで「前ページ・次ページ案内リンク」を設定（新しくclassを作成）

前回の記事でHTMLを編集した時に、新しいclassを設定しました。
前ページ・次ページ案内リンク全体の枠として「permalink2」を作成し、プレビュー（前のページ）部分には「permalinkprev」「prev-mark」「prev」の3つのclassを設定しました。
ネクスト（次のページ）部分にはプレビューと同じように「permalinknext」「next-mark」「next」の3つのclassを設定しています。
各class名は、前回の記事で既にHTMLに記述済みです。





この記事ではHTMLに記述したclassに対するスタイルを設定します。
CSS（スタイルシート）を編集します。
管理画面の「スタイルシート編集」画面を開き、CSSの空いている部分に下記の記述をコピペします。CSSの一番下でいいと思います。


新しいclassを記述するのでCSSの空いている部分にコピペすればいいんですが、「前ページ・次ページ案内リンク」に関する記述は既にCSS上にあります。
class名は「permalink」でした。（ここまでのカスタマイズ後ならば、CSSの1339行目あたりです）
私はこの「permalink」関連の下に追加しようと思います。
「permalink」関連の記述は数十行になりますので、実際に追加するのは1405行目あたりになると思います。





まあ、「私の場合は」の話ですので、行数は気にしなくて大丈夫です。
この記事を見ている方それぞれが色んなカスタマイズをしておられるわけで、私のカスタマイズ結果と同じ行数になるとは思っていません。ご自分でお好きな場所に追加してください。



CSSに下記「追加するコード」をコピペし、変更内容を「保存」します。
文字の色が赤色の箇所が何ヶ所かありますが、無視して全部コピペをどうぞ。


＜追加するコード＞


●記事ページ下の「前ページ・次ページ案内リンク」全体に対するclassは「permalink2」です。「permalink」というclassと区別するために、後ろに「2」を足して「permalink2」という名前にしました。
「width: 80%;」が、メインコンテンツの横幅に対する「前ページ・次ページ案内リンク」全体の幅です。この数値を大きくしたり小さくしたりすることで「前ページ・次ページ案内リンク」の横幅を決めることになります。



●全体を示す「permalink2」を、プレビュー（前のページ）部分「permalinkprev」とネクスト（次のページ）部分「permalinknext」に分けました。プレビュー「permalinkprev」には「prev-mark（矢印画像）」と「prev（ボタン）」が、ネクスト「permalinknext」には「next-mark（矢印画像）」と「next（ボタン）」が設定されています。
この記事の最初にも掲載していましたが、図にするとこんな感じです。






●「permalinkprev」（プレビュー）と「permalinknext」（ネクスト）には同じ横幅「width: 45%;」を設定しています。
全体の枠「permalink2」に対して、横幅が45%ずつということです。なので、プレビューとネクストの間の余白は10%の幅になります。
もちろん好きな数値に変更してかまいません。50%ずつにすると、プレビューとネクストの間の余白がなくなります。（半分ずつなので当然です）
30%ずつにすると、プレビューとネクストの間の余白が40%になり、ちょっと開きます。
固定数値（例えば100pxなど）にしていないのは、ブラウザの幅を狭くして見た時に、はみ出してしまう可能性があるからです。



●プレビュー「permalinkprev」とネクスト「permalinknext」には、それぞれ矢印画像とリンクボタン（テキスト部分）が入っています。矢印画像とリンクボタンの横幅は、リンクボタンを「width: 82%;」と設定することで調整しています。この数値を好きなように変更してかまいませんが、矢印画像の横幅は、画像であるが故に既に決まっていることに注意してください。（私が使用している矢印画像の横幅は32pxです）
もしも「82%」よりも小さな数値にすると、リンクボタンの横幅が短くなると同時に、矢印画像とリンクボタンとの間の余白が大きくなります。（当然です）



●リンクボタン部分は、マウスを乗せると色が変わります。（紺色になります）
矢印画像は、マウスを乗せると色が薄くなります。（透過処理をしていますので、薄い灰色になります）
「class名」＋「a:hover」で指示を出している箇所が、マウスを乗せた時の色です。



●矢印画像とリンクボタンは連動していません。矢印画像の上にマウスを乗せたからといって、リンクボタンの色が紺色に変化するわけではありません。
リンクボタンの横に矢印画像を置きたかったのでこういう処理になってしまいました。本当は連動させたかったんですけどね。どうしてもネクストの横の矢印画像が言う事を聞いてくれないのです。まあ、こんなことに執着するのもバカみたいなので、さくっと諦めました。



●「word-break: break-all;」という記述をすることで、ボタン内のテキストを改行させています。HTMLで記事タイトルの表示文字数を「24バイト」にしていましたので、テキストが改行されても2行までしか表示されないと思います。たぶん。

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

関連記事の紹介

記事ページの「前ページ・次ページ案内リンク」をボタンに変更し、ボタンの高さを2行分にする方法を書いてきました。関連記事の（1）〜（3）のようにすれば、とりあえずうまく稼働します。
ただ、記事タイトルの文字数が少ない場合はボタンの高さが1行分にしかならないため、見た目が少しおかしい感じになってしまいます。
ボタンの高さをCSSで指定したらこういう問題は起こらないのですが、ブラウザの幅を狭くしてボタン表示を確認すると、記事タイトルがボタンの枠線からはみ出て表示されてしまいます。


記事を投稿した後で色々と考えてみた結果、はみ出た文字を隠す方法を知ったので、改めて記事を書きました。
ここまでのカスタマイズが終わったら、続けてこちらの記事のように編集してみてください。






次の記事の紹介

ちなみに、本来の「次の記事」はこちらです。
次の記事では、Seesaaブログのサイドバーに「ツリーメニュー（アコーディオンメニュー）」を置く方法を説明します。