【Seesaaブログ新デザインシステム】画像一覧ページで表示する画像が無い場合(「非公開」画像の設定と画像一覧ページの構成)|ブログカスタマイズの雑談BLOGスマートフォン専用ページを表示ブログカスタマイズの雑談BLOGブログのカスタマイズやパソコン・ネットに関する雑談をするブログです。「画像詳細ページ(アップロードのページ)」の上部にあるカレンダーで「月」をクリックすると、選択した「月」にアップロードされた画像が一覧表示されます。このページを私は勝手に「画像一覧ページ」と呼んでいます。Seesaaブログの記事に画像を掲載するためには、ブログに画像をアップロードしなければなりません。画像のアップロードはファイルマネージャー画面や記事作成画面でできますし、アップロードした画像は全部、この画像一覧ページに表示されます。(もちろん「管理画面>設定」の「ブログ設定」で「画像詳細ページ」項目を「表示する」に設定している場合の話です)通常の画像一覧ページはこんな感じです。通常の場合、つまりアップロードした画像を記事内で使用した場合は何も問題はありません。上記の通りちゃんと表示されます。ところが、画像をアップロードした状態で、でも記事には使わなかった場合、画像一覧ページでは「非公開」という文字で表現されてしまいます。「いつかこの画像を使おう」と思ってアップロードしただけの状態や、背景画像に使用している画像(記事には使用していない画像)がある場合、画像一覧ページでは「非公開」という文字が出るのです。「非公開」の画像がある場合、画像の1行目と2行目の間隔が大きく空いて表示されてしまいます。この「非公開」という文字はHTML上にポツンと入れられているため、サムネイル画像よりも下部分に表示されることになり、結果的には1行目と2行目の余白が広がってしまうのです。この現象を解消するために、「非公開」という文字をサムネイル画像と同じサイズで表示させたいと思います。画像一覧ページの「非公開」を編集するサムネイル画像で画像が無い場合の表示について、利用できるclassがあります。以前の記事で「画像詳細ページ」の「非公開」画像に対して設定した時と同じように、ここでもclass「no-image」を使って、画像が無い場合の表示を調整したいと思います。image」と表示されます。image」と枠が、デフォルトでは水色です。....「no-image」は記事ページの下部に表示される「関連記事」のサムネイル画像部分で使われているclassです。image」という文字が表示されるようになっています。この設定をそのまま利用します。CSSにはclass「no-image」のスタイルを記述していますので、HTMLだけを編集すればいいのでラクです。いうことで、HTMLを編集します。管理画面の「HTML編集」画面を開き、「非公開」というワードで検索すると3ヶ所がヒットします。このうち3つ目の「非公開」部分を編集します。デフォルトのテンプレートでは573行ぐらいにあります。このコード画像の593行目の「非公開」部分を、丸ごと下記のコードと入れ替えてください。最後に「保存」するのを忘れないでください。class="no-image--inner">非公開</div></div>コード編集後の実際のページ画像一覧ページの構成(HTMLコードの意味)ちょっと言い訳したいことがあるので画像一覧ページのHTMLコードの構成を書いておきます。下記の画像はカスタマイズ途中のコード画像ですので、デフォルトのテンプレートとは行数が異なりますが、まあ、参考にしてください。現時点のカスタマイズ後の行数とも違います。画像一覧ページのHTMLには何が書いてあるのかを説明したいだけです。<画像一覧ページの構成>(A)もしも一覧ページを開いたら、(B)アイテムは6個ずつ表示させるよ。(※私のカスタマイズは5個。デフォルトは6個です)(C)アイテムが画像ならば、サムネイル画像を表示させて、(D)アイテムがビデオならば、ビデオのサムネイル画像を表示させて、(E)アイテムがオーディオならば、○○(注)を表示させて、(F)表示させるアイテムがないならば「非公開」と表示するよ。(※コレを先ほど「no-image」で設定した)(G)もしも「exvideos」を表示させるならば、○○(注)(サイズは110×110?)を表示させて、(H)この命令をループ(繰り返す)させるからね。------ここまで「アイテムを6個ずつ表示させる」という条件が生きています------(I)もしも一覧ページを開いても何も表示させるものがないならば、「表示できる画像がありません」と表示するよ。「○○(注)」と書いているのは、私自身がよくわからないというだけの話です。私は画像しかアップロードしませんので、「○○」が何を指すのかわかりません。試しに「exvideos」の一覧ページを開いてみたら、「お気に入り動画一覧」になりました。Seesaaブログには「お気に入り動画」というものがあるらしいのですが、どうやってその動画をアップするのかわかりません(笑)で、そもそもコレを書いて何をしたかったのかというと、『私が確認しているのは「画像一覧」だけだ』と強調したかったのです。私は先ほど、「非公開」部分を文字だけの表示ではなく線で囲って「非公開」と表示させるように設定しましたが(「no-image」を使いました)、ビデオとかオーディオの場合も上手くいくのか確認していません。上手くいくと思いますが、断言はできません。これを言いたかったのです。上記HTMLコード内では、「exvideos」に関しては別の設定がされていますので「非公開」は表示されません。わからないので何ともコメントできないんですが、片手落ちになっているのはご了承ください、ってことです。画像一覧ページの「表示できる画像がありません」を編集する上記で「非公開」を編集したので、同じように画像一覧ページで表示される「表示できる画像がありません」の部分も編集します。Seesaaブログの画像詳細ページでは、記事がアップロードされた「月」にはリンクが貼られてクリックできるようになっていて、この「月」部分をクリックすると「画像一覧ページ」が開きます。クリックした「月」に画像をアップロードしていない場合は表示するモノが無いので、その時に「表示できる画像がありません」という文字が表示されるのです。現時点ではこんな感じで表示されます。「お気に入り動画一覧」の場合の画像を掲載しておきますが、どの場合でも同じ表記です。以前の記事<■記事ページの「関連記事」(1)サムネイル「no-image」の色を変更>で少しだけ触れていますが、「表示できる画像がありません」の部分のclassは「no-image--txt」です。現在は水色で文字が表現されますので、文字色だけ変更したいと思います。CSS(スタイルシート)を編集します。管理画面の「スタイルシート編集」画面で「no-image--txt」というclassを探します。#43bee0;」を、好きな色のコードに変更してください。#4E667D;」にしました。「表示できる画像がありません」に限定しないさて、上記では「仮に」ということで「お気に入り動画一覧」のページを掲載しました。「お気に入り動画一覧」ページしか準備できなかったので、説明用画像として利用しながら「no-image--txt」を編集したんですが、そもそもなんですけど、これはお気に入りの動画なのに「表示できる画像がありません。」と表示されるのは、いいんですか?画像一覧ページならばちゃんと「表示できる画像がありません」と表示させたいし、ビデオ一覧のページならば「表示できるビデオがありません」と表示させたくないですか?このままだと、ビデオであってもオーディオであっても「表示できる画像がありません。」という表記になってしまいますね。HTMLを編集します。管理画面の「HTML編集」画面を開き、「表示できる画像がありません」というワードで検索するとすぐに見つかりますので、編集します。class="no-image--txt">表示できる画像がありません。</p>」部分を、丸ごと下記のコードと入れ替えてください。最後に「保存」するのを忘れないでください。(下記のコードでは「表示できる○○がありません」と表記することにして、「ありません。-%>がありません</p>●「表示できる○○がありません」と表示させることにして、画像一覧ページならば「○○」の部分が「画像」という文字に、ビデオ一覧ページならば「ビデオ」という文字になるように設定しています。次の記事では、Seesaaブログのタグ一覧ページのサムネイル画像サイズを変更する方法を説明します。記事にタグを設定した場合、そのタグをクリックすると「タグ一覧ページ」が開きます。タグは記事に付けることができますが、画像にも付けることができます。試しに画像にタグを付けてみました。[必須入力]※画像の中の文字を半角で入力してください。