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

Seesaaブログでは、記事に掲載した画像をクリックすると、画像を紹介するページが開きます。
管理画面（ブログ設定）には「画像詳細ページ」と書いてあるので「画像詳細ページ」という名前で間違ないと思います。でも、画像でもオーディオでもビデオでも、たぶんクリックすると開くページは共通でしょうから、本当は「アップロードページ」と呼ぶべきなのかもしれません。



さて、前回の記事＜■画像詳細ページにタイトルを作る＞では、リンク案内部分をタイトルっぽく表示させるようにして、タイトルを作りました。


現時点のテンプレート




画像詳細ページ（アップロードのページ）のタイトル部分の表記は「"○○"の記事へ」ですが、私は「" "」で囲むという表記方法が好きではありません。なので、「" "」を二重鍵括弧（『 』）に変更したいと思います。



あと、「○○の記事へ」という表記についてですが、「その画像が使われている記事へのリンク案内」という意味だと思いますが、少しわかりにくいです。なので「記事『○○』へ」という表記に変更します。
私がそうしたいというだけですから、必要ない方はこの作業はしなくても大丈夫です。

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

HTMLを編集します。
管理画面の「HTML編集」画面で「<p class="upload-detail__entry-title">」を検索すると2ヶ所がヒットしますが、そのうちの1つ目の部分を編集します。
デフォルトのテンプレートだと450行あたりだと思います。





このコード画像の470行目「"<a href="<% article.page_url -%>"><% article.subject | shorten(50) | html -%></a>"&nbsp;の記事へ」が、画像詳細ページのタイトル部分の表記です。


「<a href="<% article.page_url -%>"><% article.subject | shorten(50) | html -%></a>」を『"』『"』で挟んでいます。
これを「『」「』」に変えます。
あと、「記事」という文字を最初に持っていって「記事『○○』へ」という表記にします。
色々と面倒な場合は、以下のコードをコピペしてください。


＜入れ替えるコード＞




●「記事『」の後ろに「&nbsp;」が入っていますが、これは半角スペースのことです。
二重鍵括弧「『 』」で囲む際に、リンク部分（つまり記事のタイトル）と「『」がくっついているのは何だか狭すぎる気がしたので半角スペースをそれぞれに入れました。


●文字数について
「shorten(50)」の部分が文字数（バイト）を表していますが、タイトル部分は後ろに日付が入るので、ちょっと短めの文字数にしておこうと思います。
とりあえず私は「40」ぐらいに変更しておこうかな？
もちろん、変更してもしなくてもどちらでもいいです。

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

次の記事の紹介

画像詳細ページ（アップロードページ）のタイトル部分の編集が終わりましたので、次の記事では画像詳細ページ（アップロードページ）の上部に表示されるカレンダー部分の編集をします。





あと、この記事の上の方でも案内していますが、私は結局、画像詳細ページのタイトルには「画像のタイトル」を表示するように変更してしまいました。
「画像」がメインのページで「記事『○○』へ」というタイトル表記はおかしい、と思ってしまったんですよね。
まあ、私と同じように気になってしまう方は、こちらの記事を参考に編集してみてください。