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

Seesaaブログの「管理画面＞設定」の「ブログ設定」には「画像詳細ページ」という項目があります。
項目がちゃんとあるので、記事内の画像をクリックしたら開くページのことを「画像詳細ページ」と呼ぶのだと思います。でも、HTMLでは該当部分には「upload」と書かれているので、もしかしたら「アップロードページ」という名前なのかもしれません。
‥‥なんつーか、よくわからないのでもう、いいや。


「画像詳細ページ（アップロードページ）」の編集をしたいと思います。



現時点の画像詳細ページ



この記事以降、画像詳細ページ（アップロードページ）をカスタマイズしようと思いますが、たぶん、片手落ちになります。
自分で記事に画像をアップしてみて、その画像をクリックしてページを開きながら確認したので画像に関しては大丈夫ですが、ビデオとかオーディオとか、そういうものをアップロードした時はどんなページになるのかわかりません。
もしもビデオのページが存在していたとしたら、私はやったことがないのでわからないし、わからないということはカスタマイズできないということです。だから片手落ちになります。
でもまあ、私は画像しか掲載するつもりがありませんので、どうでもいいです。（←ヒドいｗ）



この記事では、画像詳細ページ（アップロードページ）にタイトルを作ります。
その後、タイトルの日付部分を編集したいと思います。

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

画像詳細ページにはいわゆるタイトルがありません。なので、まずはページタイトルを作ります。
タイトルとして使うのは、この部分です。





このリンク部分を、カテゴリページのタイトルと同じように表示したいと思います。


編集後のイメージ

CSSを編集してタイトルっぽく見せる

CSS（スタイルシート）を編集します。
管理画面の「スタイルシート編集」画面で「upload-detail__entry-title」というclassを探します。


CSSの該当部分に下記「編集後」のコードをコピペまたは直接記述して「保存」します。
関連するclass（「a」と「a:hover」）も一緒に記述していますので、全部コピペします。


＜元コード＞


＜編集後＞


●「画像詳細ページ」とか言いながら、コメントアウトで見出しを「アップロード画面」と表記してしまいました。classが「upload」でまとめられているのでつい‥‥（笑）
まあ、いいかｗ


●「.upload-detail__entry-title」の中身は「.heading」と全く同じです。
（カテゴリページのタイトル表記と同じです）
色々と考えましたが、ページの表示の仕方はやっぱり統一しておいた方がいいかな？と思って画像詳細ページも同じように表示することにしました。
上記画像を見てわかるように、「.upload-detail__entry-title」は正確にはタイトルではありません。（「"○○"の記事へ」とリンク設定されているだけです）
でも、わざわざ「アップロードページ」や「画像詳細ページ」など言葉を足すのもどうかと思うし、そもそも最初にも書きましたが、このページが「画像詳細ページ」なのかどうかよくわからないのです。ビデオとかオーディオも表示されるっぽいし。
同じclassがHTMLの「<% if:upload_page_name eq 'list' -%>」以下にも使われているので（リスト表示のページ）、断言してタイトルを付けることができないんですよね。
なので、表示上はタイトルっぽく見せてしまえばいいのかな？という判断です。


●元コードには存在していないコード（「a」と「a:hover」部分）を追加していますが、これは、タイトル表示部分のリンク設定です。
通常は水色の太字、マウスを乗せた時には灰色の太字になるように設定していますので、お好きなように色を変更してください。


●この「upload-detail__entry-title」を編集すると、「画像一覧ページ」のタイトル部分も同じスタイルになります。（画像一覧ページにも同じclassが使われているため）

コード編集後のCSS

タイトルの日付部分を編集する

画像詳細ページ（アップロードページ）の日付表示部分を見てみると、なんだか空間が狭い気がします。
そんなに変化はないんですが、余白を10pxから15pxに変更しておきます。
（ちなみにこの画像は、リンク部分にマウスを乗せた時の表示なので文字が灰色の太字です）






CSS（スタイルシート）を編集します。
管理画面の「スタイルシート編集」画面で「.upload-detail__entry-title .date」というclassを探します。
CSSの該当部分に下記「編集後」のコードをコピペするか直接記述して「保存」します。


＜元コード＞


＜編集後＞


●「margin-left（左余白）」の数値を10pxから15pxに変更しました。

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

次の記事の紹介

画像詳細ページ（アップロードページ）にタイトルを作ったので、次の記事ではタイトル表記を編集したいと思います。