Top Page > Seesaaブログ > 【Seesaaブログ新デザインシステム】画像詳細ページで表示する画像がない…

【Seesaaブログ新デザインシステム】画像詳細ページで表示する画像がない場合(タイトルと「非公開」画像の設定)

Seesaaブログの画像詳細ページで表示する画像がない場合
■Seesaaブログの画像詳細ページ(アップロードのページ)を編集
■画像詳細ページで表示する画像がない場合に「該当する記事はありません」と表示させる
■「非公開」と表示される部分も編集  

Seesaaブログの「管理画面>ファイルマネージャ」で画像をアップロードしたけれどもまだ記事に画像を掲載していない場合(画像をアップロードしただけの状態)や、背景画像やトップへ戻るボタンで使用した画像のように、記事自体に使用するつもりがない画像がある場合、画像詳細ページでは「非公開」という文字で表現されます。


「非公開」?って感じでしょうが、あるんですよ実は。



そもそも画像詳細ページを見るためには、記事に掲載されている画像をクリックして開きます。
記事に掲載されていない画像をどうやって見ればいいのか?
画像は非公開、つまり記事に掲載されていないので、ピンポイントでその非公開画像の詳細ページを開くことはできません。
でも、ちゃんと非公開画像の詳細ページを開く方法があるんです。



画像詳細ページを開いて表示させた大きな画像の下には「前の画像・次の画像案内リンク」ボタンがあります。例えば「前の画像」のボタンをクリックしまくって、どんどん画像を表示させていると出てくるんですよ、「非公開」が。


画像詳細ページの非公開画像


ほらね?
「非公開」が出てきました。
画面の真ん中に「非公開」という文字が表示されていますが、なんと!!
ページのタイトル部分がなくなってます!!
画像詳細ページにはタイトルを作っていたはずなのに、なぜでしょう?



現時点の画像詳細ページのタイトル部分


こうやってね、「タイトル」を作っていたんですよ。
なのに「非公開」画像を表示させるとタイトルが消えてしまいます。
こんな感じで整合性がなくなってしまうのは困るんですよねぇ。





画像詳細ページのタイトル部分HTMLの解説


デフォルトのテンプレート(HTML)では、画像詳細ページの上部に「その画像を掲載している記事のURL」を表示させるリンクがありました。



このHTMLの指示を利用して、私は記事<■画像詳細ページにタイトルを作る>で、リンク部分をタイトルとして表示させることにしました。
だから画像詳細ページにはタイトルがあったわけです。
まあ、ついでにタイトル部分を「記事『○○』へ」という表記に変更しちゃったんですけどね。→<■画像詳細ページのタイトル表記を変更する



結果、私のブログでは通常の画像詳細ページの上部に「記事『○○(その画像が掲載されている記事)』へ」とタイトルっぽく表示されることになりました。
ハイ、「その画像を掲載している記事のURL」を表示させるリンクを「タイトル」のように見せていただけなのですよ、結局ね。(勝手に私がそのように設定しただけですw)



現時点のテンプレート
現時点の画像詳細ページのタイトル部分

(画像は「月」のリンク背景色を変更する前のものなので水色になってますが、現時点では紺色っぽい青色になってますので)



では、画像を掲載している記事がない場合は?
上記で例として挙げた「非公開」の画像がある場合、どうなっちゃうのでしょう?



「非公開」の画像がある場合、つまり、画像をアップロードしたけれどもまだ記事に画像を掲載していない場合や背景画像、トップへ戻るボタンで使用した画像のようなものは記事に掲載するわけじゃないから「記事のURL」を持っていません。
このままじゃ「タイトル」は付けられないわけです。


でも私はちゃんと整合性があるようにしたいので、どうしても「タイトル」を付けたい(笑)
そのためにとりあえず、HTMLを確認してみたいと思います。



記事URLを持っていない画像に対するHTMLの指示


「記事のURL」を持っていない背景画像を画像詳細ページで表示した時の指示はどうなっているのでしょうか?
HTMLの画像詳細ページの記述を見てみます。(デフォルトのテンプレートでは450行あたりです)


画像詳細ページのHTML


この「pタグ」の部分が、画像詳細ページのタイトルの部分です。
pタグ「<p class="upload-detail__entry-title">」以下の記述は、「<% if:article -%>」と「<% /if -%>」という2つのタグで挟まれています。


「<% if:article -%>」は「もしも記事があるならば」という条件の独自タグです。
なので、この部分のコードを無理やり読むと、「もしも記事があるならば、pタグ以下みたいにタイトルを表示すること」という指示になります。



もうおわかりかと思いますが、このコード記述には「記事がないならば」という条件が付いていません
「もしも記事があるならば、このタイトルを表示させる。もしも記事がないならば、○○と表示する。」という流れでコードを書けば、記事がない画像(アップロードしただけの状態の画像)を表示した時も、タイトルを表示させることが可能になります。



画像詳細ページで表示する画像がない場合の指示を追加する


HTMLの画像詳細ページ部分に「もしも記事があるならば、pタグ以下みたいにタイトルを表示させる。もしも記事がないならば、○○と表示する。」という流れを作ります。



記事がある場合の指示は既にあります。pタグ以下です。
では、記事が無い場合にはどう表記させたらいいのか。
色々と考えてみましたが、私は「該当する記事はありません」と表示させたいと思います。



「もしも記事があるならば」という意味を表すタグは、既にHTMLに記述されています。
「<% if:article -%>」と「<% /if -%>」です。
「もしも記事がないならば」と指示したい場合は、「if」の反対の条件を表すタグ「<% else -%>」を使います。
(わかりやすく説明するために簡略して書いています。「if」と「else」の関係をちゃんと知りたい方は、ご自分でお調べください)



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



該当部分の終了タグ「<% /if -%>」の上に、下記の「追加するコード」を記述します。
コードをコピーして、指示通りに貼り付けてください。(今回はいちいち指示を書きますので)


<追加するコード>
<% else -%>
<p class="upload-detail__entry-title">
該当する記事はありません
</p>



まずは「<p class="upload-detail__entry-title">」の終了タグ「</p>」の下(該当部分の終了タグ「<% /if -%>」の上)に、追加するコードを一気にコピペします。


HTMLの画像詳細ページ部分



そして、パソコンのキーボードの「タブキー(Tabキー)」を使って、タグを1つずつ動かしていきます。
こんな感じです。


HTMLの画像詳細ページ部分にコピペした記述を動かす



はい、コレでタイトル部分を表示させることができました!


実際の画像詳細ページの表示



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


上記では、画像詳細ページで表示する画像がない場合のページタイトル部分を編集しました。
これで、背景画像のように「記事URL」を持っていない画像を画像詳細ページで表示した時も、ちゃんと「該当する記事はありません」という言葉がタイトルのように表示されます。



では続いて画像詳細ページの画像部分、つまり「非公開」の文字部分を編集したいと思います。
今のままだと、ど真ん中に「非公開」と表示されて、なんだか中途半端なイメージです。


現時点の画像詳細ページの非公開部分


空白が激しすぎるので、「非公開」部分を枠線で囲みたいと思います。



枠線で囲む‥‥利用できる設定がありますよね?
class「no-image」です!


【Seesaaブログ新デザインシステム】記事ページの「関連記事」(1)サムネイル「no-image」の色を変更
もしも画像を1枚も掲載していない記事を投稿した場合は、サムネイル画像と同じ大きさの枠が表示されて、その枠の中に「no image」と表示されます。この「no image」と枠が、デフォルトでは水色です。‥‥



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



では、HTMLを編集します。
管理画面の「HTML編集」画面を開き、「非公開」というワードで検索します。
ヒットした1つ目の「非公開」部分を編集します。
デフォルトのテンプレートでは488行あたりにあります。


非公開部分のHTML


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


<入れ替えるコード>
<div class="no-image"><div class="no-image--inner">非公開</div></div>


編集後の非公開部分のHTML



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


編集後の画像詳細ページの非公開部分




次の記事の紹介

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


【Seesaaブログ新デザインシステム】画像一覧ページのタイトル表記を変更する
画像詳細ページ(アップロードのページ)では、ページ上部にあるカレンダーの「月」をクリックすると、選択した月にアップロードされた画像が一覧表示されます。「月」(赤枠部分)をクリックすると表示されるページを私は‥‥






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

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