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

Seesaaブログでは、記事に掲載した画像をクリックすると、画像を紹介するページが開きます。このページのことを私は「画像詳細ページ」と呼んでいます。



デフォルトのテンプレート「シンプルA. ホワイト 右カラム」では、「画像詳細ページ」にタイトルはありません。でも私はこのページにタイトルが欲しかったので、以前の記事で、リンク案内部分をタイトルっぽく表示させるようにして、タイトルを作りました。






その後、また別の記事で、作ったタイトル部分の表記を「記事『○○』へ」という表記に変更したんですが、なんだかちょっと気に入らないんですよね。






タイトル表記が合っていない
現時点のテンプレートの画像を見ると、タイトル部分は「記事『○○』へ」という表記になっています。





このままだと「画像詳細ページ」にも関わらず、その画像が掲載されている「記事名」がタイトルなんですよね。
でもこれって変なんですよ。
だってこのページはあくまでも「画像」がメインなんです。「記事」はメインじゃないんです。


なので、「画像のタイトル」をページタイトルに変更したいと思います。
画像のタイトルをページのタイトルにしてしまって、その画像が掲載されている記事へのリンクを、改めて「該当記事」というカタチでリンクを貼りたいと思います。




記事の日付ではなくアップロードした日付
もう1つ気になるのは、「日付」部分です。




タイトル部分には日付が入っていますが、これ、何の日付だかわかりますか？
この日付は、画像をアップロードした日の日付なんですよ。
画像が掲載されている記事の日付ではないのです。


でも、この「画像詳細ページ」を開いたからと言って、記事の日付なのか画像をアップロードした日の日付なのか、誰もわからないですよね。
せっかくタイトル表記を変更するのですから、きちんと「これはアップロードの日付なのだ」と示しておいた方がいいと思います。



ということで、今回の記事では「画像詳細ページ」のタイトル部分の表記を変更し、「画像のタイトル」と「アップロードした日付」と「画像が掲載されているページ」へのリンクを表示したいと思います。


編集後のイメージ

画像詳細ページのタイトル表記を編集する

HTMLを編集します。
管理画面の「HTML編集」画面で「<p class="upload-detail__entry-title">」を検索すると3ヶ所がヒットしますが、そのうちの1つ目の部分を編集します。
デフォルトのテンプレートだと450行あたりだと思います。
下記コード画像では838行目が、画像詳細ページのタイトル部分の表記です。






「元コード」（以前の記事でカスタマイズ済み）の表記から、以下の点を変更します。

HTMLを編集する

HTMLの該当部分に下記の「入れ替えるコード」をコピペ（コピーして貼り付け）して、「保存」します。
説明するために文字色を変更している部分がありますが、気にせずにコピペしてください。


＜元コード＞


＜入れ替えるコード＞


●「データ」という言葉を使って、画像のタイトルを表記することにしました。記事ではなく画像のタイトルなので、文字数は多くなくてもかまいません。私は「30バイト」に設定しました。

●「アップロードした日」のデータであることを示すために、日付部分の前に「upload：」と表示しています。他の言葉がいいと思われる場合は、お好きなように変更してください。

●画像が掲載されている記事を案内するために「【該当記事】」と表記しています。この「【該当記事】」という言葉は、どの画像の詳細ページでも表示させるため、少しフォントサイズを小さめ（13px）にしました。

コード編集後のHTMLと実際の画像詳細ページタイトル

次の記事の紹介

次の記事では、ページ案内リンク「前ページ・次ページ案内リンク」ボタンの高さを指定する方法を説明します。
この記事は以前書いた記事の続き記事になります。


以前私は、記事ページ下に表示されるページ案内リンク「前ページ・次ページ案内リンク」を文章ではなくボタンに変更しました。記事タイトルの文字数に合わせてボタンの高さが変わるように設定していたんですが、そうすると表示がおかしくなる場合があるので、ボタンの高さを一定にします。