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

「画像詳細ページ（アップロードのページ）」の上部にあるカレンダーで「月」をクリックすると、選択した「月」にアップロードされた画像が一覧表示されます。
このページを私は勝手に「画像一覧ページ」と呼んでいます。



Seesaaブログの記事に画像を掲載するためには、ブログに画像をアップロードしなければなりません。
画像のアップロードはファイルマネージャー画面や記事作成画面でできますし、アップロードした画像は全部、この画像一覧ページに表示されます。（もちろん「管理画面＞設定」の「ブログ設定」で「画像詳細ページ」項目を「表示する」に設定している場合の話です）
通常の画像一覧ページはこんな感じです。


通常の場合



通常の場合、つまりアップロードした画像を記事内で使用した場合は何も問題はありません。上記の通りちゃんと表示されます。



ところが、画像をアップロードした状態で、でも記事には使わなかった場合、画像一覧ページでは「非公開」という文字で表現されてしまいます。
「いつかこの画像を使おう」と思ってアップロードしただけの状態や、背景画像に使用している画像（記事には使用していない画像）がある場合、画像一覧ページでは「非公開」という文字が出るのです。


非公開画像がある場合



「非公開」の画像がある場合、画像の1行目と2行目の間隔が大きく空いて表示されてしまいます。
この「非公開」という文字はHTML上にポツンと入れられているため、サムネイル画像よりも下部分に表示されることになり、結果的には1行目と2行目の余白が広がってしまうのです。
この現象を解消するために、「非公開」という文字をサムネイル画像と同じサイズで表示させたいと思います。

画像一覧ページの「非公開」を編集する

サムネイル画像で画像が無い場合の表示について、利用できるclassがあります。
以前の記事で「画像詳細ページ」の「非公開」画像に対して設定した時と同じように、ここでもclass「no-image」を使って、画像が無い場合の表示を調整したいと思います。





「no-image」は記事ページの下部に表示される「関連記事」のサムネイル画像部分で使われているclassです。もしも画像を挿入しないで記事を書いた場合、関連記事部分には枠線で囲まれた中に「no image」という文字が表示されるようになっています。
この設定をそのまま利用します。
既にCSSにはclass「no-image」のスタイルを記述していますので、HTMLだけを編集すればいいのでラクです。



ということで、HTMLを編集します。
管理画面の「HTML編集」画面を開き、「非公開」というワードで検索すると3ヶ所がヒットします。
このうち3つ目の「非公開」部分を編集します。
デフォルトのテンプレートでは573行ぐらいにあります。





このコード画像の593行目の「非公開」部分を、丸ごと下記のコードと入れ替えてください。
最後に「保存」するのを忘れないでください。


＜入れ替えるコード＞

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

画像一覧ページの構成（HTMLコードの意味）

ちょっと言い訳したいことがあるので画像一覧ページのHTMLコードの構成を書いておきます。
下記の画像はカスタマイズ途中のコード画像ですので、デフォルトのテンプレートとは行数が異なりますが、まあ、参考にしてください。もちろん、現時点のカスタマイズ後の行数とも違います。
画像一覧ページのHTMLには何が書いてあるのかを説明したいだけです。





＜画像一覧ページの構成＞


「○○（注）」と書いているのは、私自身がよくわからないというだけの話です。
私は画像しかアップロードしませんので、「○○」が何を指すのかわかりません。
試しに「exvideos」の一覧ページを開いてみたら、「お気に入り動画一覧」になりました。
Seesaaブログには「お気に入り動画」というものがあるらしいのですが、どうやってその動画をアップするのかわかりません（笑）



で、そもそもコレを書いて何をしたかったのかというと、『私が確認しているのは「画像一覧」だけだ』と強調したかったのです。
私は先ほど、「非公開」部分を文字だけの表示ではなく線で囲って「非公開」と表示させるように設定しましたが（「no-image」を使いました）、ビデオとかオーディオの場合も上手くいくのか確認していません。
たぶん、上手くいくと思いますが、断言はできません。
これを言いたかったのです。


上記HTMLコード内では、「exvideos」に関しては別の設定がされていますので「非公開」は表示されません。よくわからないので何ともコメントできないんですが、片手落ちになっているのはご了承ください、ってことです。

画像一覧ページの「表示できる画像がありません」を編集する

上記で「非公開」を編集したので、同じように画像一覧ページで表示される「表示できる画像がありません」の部分も編集します。



Seesaaブログの画像詳細ページでは、記事がアップロードされた「月」にはリンクが貼られてクリックできるようになっていて、この「月」部分をクリックすると「画像一覧ページ」が開きます。
でも、クリックした「月」に画像をアップロードしていない場合は表示するモノが無いので、その時に「表示できる画像がありません」という文字が表示されるのです。



現時点ではこんな感じで表示されます。
とりあえず「お気に入り動画一覧」の場合の画像を掲載しておきますが、どの場合でも同じ表記です。





以前の記事＜■記事ページの「関連記事」（1）サムネイル「no-image」の色を変更＞で少しだけ触れていますが、「表示できる画像がありません」の部分のclassは「no-image--txt」です。
現在は水色で文字が表現されますので、文字色だけ変更したいと思います。



CSS（スタイルシート）を編集します。
管理画面の「スタイルシート編集」画面で「no-image--txt」というclassを探します。
「color: #43bee0;」を、好きな色のコードに変更してください。
私は紺色っぽい青色「color: #4E667D;」にしました。

「表示できる画像がありません」に限定しない

さて、上記では「仮に」ということで「お気に入り動画一覧」のページを掲載しました。
「お気に入り動画一覧」ページしか準備できなかったので、説明用画像として利用しながら「no-image--txt」を編集したんですが、そもそもなんですけど、これはお気に入りの動画なのに「表示できる画像がありません。」と表示されるのは、いいんですか？
画像一覧ページならばちゃんと「表示できる画像がありません」と表示させたいし、ビデオ一覧のページならば「表示できるビデオがありません」と表示させたくないですか？
このままだと、ビデオであってもオーディオであっても「表示できる画像がありません。」という表記になってしまいますね。



HTMLを編集します。
管理画面の「HTML編集」画面を開き、「表示できる画像がありません」というワードで検索するとすぐに見つかりますので、編集します。





このコード画像の600行目の「<p class="no-image--txt">表示できる画像がありません。</p>」部分を、丸ごと下記のコードと入れ替えてください。
最後に「保存」するのを忘れないでください。
（下記のコードでは「表示できる○○がありません」と表記することにして、「ありません。」の「。」は抜いています）


＜入れ替えるコード＞




●「表示できる○○がありません」と表示させることにして、画像一覧ページならば「○○」の部分が「画像」という文字に、ビデオ一覧ページならば「ビデオ」という文字になるように設定しています。

コード編集後の実際のページ（お気に入り動画一覧）

次の記事の紹介

次の記事では、Seesaaブログのタグ一覧ページのサムネイル画像サイズを変更する方法を説明します。