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

Seesaaブログのテンプレート「シンプルA. ホワイト 右カラム」では、記事ページの下部には「前ページ・次ページ案内リンク」が表示されます。



私は以前の記事＜■ページ案内リンク「前ページ・次ページ案内リンク」をボタンにする＞で、この「前ページ・次ページ案内リンク」をボタン表示に変更しました。
ちなみに、このページ案内リンクを「前ページ・次ページ案内リンク」と呼んでいるのは、私だけだと思います。（勝手に名付けたｗ）



現時点のテンプレート



ボタン表示にしたのでクリックしやすくて便利だと思っていましたが、よく考えてみたら、ボタン表示にした＆表示文字数を「12バイト」にしたことで、何というタイトルの記事を案内しているのか、さっぱりわからないことになっています。（ボタンにするためには表示文字数を少な目にしなければいけなかった）



色々と迷ったんですが、とりあえずボタン部分にマウスを乗せた時に記事タイトルを表示させようと思います。


同じような作業を前回の記事＜■記事ページの「関連記事」のサムネイルにマウスを乗せた時に記事タイトルを表示させる＞でもやりましたが、マウスを乗せた時に少しだけ待ってもらえれば記事のタイトルが見えるので、コレで大丈夫でしょう。



編集後のイメージ

「前ページ・次ページ案内リンク」の編集箇所について

記事ページの下部に表示されるページ案内リンク「前ページ・次ページ案内リンク」を設定するので、HTMLを編集します。
管理画面の「HTML編集」画面で「<div class="permalink">」タグを探します。カスタマイズ後の場合は、おそらく393行目あたりにあります。
「permalink」が、「前ページ・次ページ案内リンク」に対するclassです。



HTML上には、実は「<div class="permalink">」タグが何ヶ所かあります。ここまでのカスタマイズで記事リストをページ上部に表示させるようなカスタマイズをしたので、デフォルトのテンプレートよりも多く「<div class="permalink">」タグが記述されているはずです。（デフォルトは3ヶ所、カスタマイズ後は6ヶ所）
で、記事ページ以外の「<div class="permalink">」タグは、無視してかまいません。



例えば過去ログページ（アーカイブページ）の「<div class="permalink">」ですが、これは「○年○月」と表示させるボタンなわけで、もう見ただけで何が書いてあるのかわかるわけです。タグ一覧ページの「<div class="permalink">」も「次へ」とか「前へ」という表示なので、ボタンを見ただけで意味がわかります。
でも、記事ページの下に表示される「<div class="permalink">」は、「前のページの記事タイトル」や「次のページの記事タイトル」を表示させるボタンなので、見た目だけではわからないのです。
特に表示文字数を設定していますから、記事タイトルが長い場合は何の記事なのかわかりません。これを、ボタンにマウスを乗せた時にタイトルを表示させることで補おうとしているわけです。



ということで、編集するのは記事ページのページ案内リンク「前ページ・次ページ案内リンク」部分だけです。
先ほど私は「カスタマイズ後の場合は、おそらく393行目あたり」と書きましたが、よく考えてみれば、これはナビメニュー等の記述が入った後のものですので、もはや私が指示する行数は誰のブログにも合わないと思います。
きちんと「<div class="permalink">」で検索して、記事ページの「<div class="permalink">」を探してください。（posted byの下にページ案内リンクがあるので、「<div class="posted">」一連の記述の下を探してください）






「<div class="permalink">」の下には、前のページ部分「<% if:previous_article -%>」と次のページ部分「<% if:next_article -%>」が記述されています。上段がプレビュー、下段がネクストです。
それぞれ追加するコードが違うので、気を付けてください。





では、「前のページ」と「次のページ」に分けて説明します。

前のページ（プレビュー）を編集する

「前のページ（プレビュー）」を案内するボタンの上にマウスを乗せた時に、記事タイトルを表示するようにHTMLを編集します。



記事タイトルを表示させるためにはリンク設定をしている「a」タグ部分に「title="<% previous_article.subject -%>"」というコードを追加します。
「class="prev"」の後ろに必ず「半角スペース」を入れてから追加してください。


＜元コード＞


＜編集後＞

コード編集後のHTMLと実際のページ（前のページ）

次のページ（ネクスト）を編集する

「次のページ（ネクスト）」を案内するボタンの上にマウスを乗せた時に、記事タイトルを表示するようにHTMLを編集します。



プレビューの時と同じように、リンク設定をしている「a」タグ部分にコードを追加しますが、追加するコードがプレビューの時とは違います。「title="<% next_article.subject -%>"」です。
「class="next"」の後ろに必ず「半角スペース」を入れてから追加し、「保存」します。


＜元コード＞


＜編集後＞

コード編集後のHTMLと実際のページ（次のページ）

次の記事の紹介

記事ページに表示されるページ案内リンク「前ページ・次ページ案内リンク」ですが、ボタンに変更したことで、デフォルトの状態（ただの文字リンク）よりも視覚的に良くなったのではないかと思います。
ボタンにして、マウスをボタンに乗せたら案内する記事タイトルが表示されて、それを確認して選んでもらうという流れは、閲覧者に迷惑になるようなものではないし、このままでもいいと思います。


でも、パッと見の状態では、ボタンに表示されている文字数が少ないから、何の記事なのかわかりにくいんですよね。（だから今回の記事で、マウスを乗せた時に記事タイトルを表示させるようにした）
本当は、もうちょっと記事タイトルを表示させたいのです。


次の記事では、この「前ページ・次ページ案内リンク」ボタンの高さを変更して、記事タイトルをもう少し多めの文字数で表示させたいと思います。