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

「画像詳細ページ（アップロードのページ）」では、大きく表示された画像の下に、関連画像が表示されます。


普通にリンク設定された文字「"○○"の記事の関連画像」が入っていますが、これだとちょっと簡素すぎるような気がしますので、タイトルのような感じで表示させたいと思います。



現時点のテンプレート




「タイトルのように表示させる」ために使うのは、class「.upload-detail__entry-title」です。
このclassのスタイルは、以前の記事＜■【Seesaaブログ新デザインシステム】画像詳細ページにタイトルを作る＞でCSSを編集した時に、既に調整済みです。


class「.upload-detail__entry-title」は画像詳細ページのタイトルとして調整していたclassなので、リンク文字の表示やマウスを乗せた時の変化も設定済です。
そのまま利用します。

画像詳細ページ下部の関連画像にタイトルを作る

HTMLを編集します。
管理画面の「HTML編集」画面を開き、デフォルトのテンプレートだと500行あたりを確認してみてください。
このブログで紹介してきたカスタマイズ後の場合は520行目あたりです。





「<p>」というタグ（以下「pタグ」と呼びます）が入っていますが、このタグにはclassが指定されていません。ただの文章と同じだという指定です。
なので、実際の画像詳細ページでは通常の文字で表示されています。



現時点のテンプレート



以前の記事＜■画像詳細ページにタイトルを作る＞で設定した、画像詳細ページのタイトル部分にも「pタグ」が使われていました。
でも、画像詳細ページのタイトル部分の「pタグ」には、デフォルトの状態で「<p class="upload-detail__entry-title">」と記述されていたのです。
なので、CSSでclass「.upload-detail__entry-title」を編集して背景色や文字の大きさなどのスタイルを付けることができました。


ということは、classが指定されていないただの「pタグ」を「<p class="upload-detail__entry-title">」に変更すれば、タイトルと同じように表示できるということです。（同じclassを指定するので当然です）



ということで、pタグ「<p>」を「<p class="upload-detail__entry-title">」に変更してください。
この作業をするだけで、タイトル部分と同じスタイルで表示されます。

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

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

画像詳細ページの下部には、画像に関連する画像（関連画像）がサムネイルで並んで表示されます。
現時点での関連記事タイトル部分の表記は「"○○"の記事の関連画像」です。
相変わらず「" "」が気に入らない上に、「の記事の」という言葉の並びが私は好きではありませんので変更します。



現時点のテンプレート




HTMLを編集します。
管理画面の「HTML編集」画面を開き、デフォルトのテンプレートだと500行あたりを確認します。
このブログで紹介してきたカスタマイズ後の場合は520行目あたりです。（上記で「pタグ」を変更した部分です）





このコード画像では521行目「"<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」に減らしましたが、今回は日付は入りませんので、そのまま「50」でいいと思います。（つまり文字数については何もしません）

コード編集後の関連画像のタイトル

画像詳細ページ下部の関連画像タイトルに上余白を設定する

上記画像の中にさりげなく赤色の矢印を入れましたが、これは、関連画像タイトルの上部分の余白が狭いということを強調したかったからです。
別にこのままでもいいんですが、「前の画像・次の画像案内リンク」ボタンとの間隔が狭いのが気になりますので、上余白を増やします。



以前、CSSを編集した時に「subheading」というclassを新しく作りました。





記事ページの「関連記事」やタグ一覧ページの「タグクラウド」に使用した、上余白100pxを入れる指示を出しているclass「subheading」を、今回も使います。
「subheading」は使いまわしができるように作っていたclassですので、存分に使います！

class「subheading」について

「subheading」の記述内容を書いておきます。
class「subheading」を作っていない方は、CSSの空いている部分にコピペしておいてください。既にCSSに記述されていることを前提に話を進めます。


＜独自に作ったclass＞


「subheading」は記述内容を見たらすぐにわかりますが、「上に余白を100px付ける」という指示を出しているclassです。
今まではこの「subheading」を「div」に使っていましたが、このclassは「p」タグにも使えます。

HTMLでclass「subheading」を追加する

先ほど設定したので、現時点での関連画像タイトル表記部分のpタグには「<p class="upload-detail__entry-title">」が記述されています。





このpタグに「subheading」を追加します。
「<p class="subheading upload-detail__entry-title">」と表記すれば、このpタグには2つのclassを同時に指定していることになりますので、どちらの指示も有効になります。
追加する時に必ず「半角スペース」を入れてください。（半角スペースが入らなければ、タグを認識しません）
この作業だけで、関連画像のタイトル部分の上余白を100pxにすることができます。

コード編集後の関連画像のタイトル

次の記事の紹介

画像詳細ページの関連画像部分にタイトルを付けたので、関連画像として表示されるサムネイル画像の調整をしたいと思います。
サムネイル画像は1行に何個か表示されますが、この画像の余白をどうするのか、考えてから調整します。詳しいことは次の記事をどうぞ。