Top Page > Seesaaブログ > 【Seesaaブログ新デザインシステム】画像詳細ページのタイトル表記を変更…

【Seesaaブログ新デザインシステム】画像詳細ページのタイトル表記を変更する

Seesaaブログの画像詳細ページのタイトル表記を変更する
■Seesaaブログの画像詳細ページ(アップロードのページ)を編集
■前回の記事で作ったタイトル部分「"○○"の記事へ」という表記を「記事『○○』へ」に変更
■HTMLを編集  

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



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


現時点のテンプレート
現時点の画像詳細ページ



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



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


【注意】
ちなみにこのブログでは、後のカスタマイズで、画像のタイトルをページのタイトルにするように変更してしまいました。
画像詳細ページのタイトル表記を変更する(2)




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


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


画像詳細ページ部分のHTML


このコード画像の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;<a href="<% article.page_url -%>"><% article.subject | shorten(50) | html -%></a>&nbsp;』へ


編集後のHTML

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


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

文字数変更後のHTML



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


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




次の記事の紹介

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


【Seesaaブログ新デザインシステム】画像詳細ページのカレンダーと画像を編集(リンクの背景色や画像部分の余白を編集)
画像詳細ページを開くと上部に「年」と「月」が表示されます。アクティブな「月」の背景色は、デフォルトのテンプレートでは水色です。明るい水色だと私のブログには合わないので、紺色っぽい色に変更します。‥‥



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


【Seesaaブログ新デザインシステム】画像詳細ページのタイトル表記を変更する(2)
現時点のテンプレートでは「記事『○○』へ」というタイトル表記になっていますが、このままだと「画像詳細ページ」にも関わらず、その画像が掲載されている記事名がタイトルになってしまいます。よく考えたら‥‥






posted by mameemon | Comment ( 0 ) | Category ( Seesaaブログ )
この記事へのコメント
コメントを書く
お名前:
コメント:
認証コード: [必須入力]

※画像の中の文字を半角で入力してください。