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

前回の記事＜■すべてのサムネイル画像に枠線を付ける＞では、記事に挿入した画像が白っぽい（白地が多い）場合にサムネイル画像として並べられると、背景色と同じ色になってしまって画像の境目がわからなくなるという理由で、すべてのページのサムネイル画像に枠線を入れました。


もちろん、すべてのページだと私が思っているだけで、サムネイル画像が表示される箇所が他にもあるかもしれません。
私自身はブログでは画像だけをアップロードするつもりです。ビデオやオーディオの一覧ページ等、私が関知していないページに影響があるかもしれませんが、そんなことは知りませんｗ
（一応、こういうページも考慮して設定してきたつもりですが、絶対コレでOKとは言えないですね）



この記事では、前回の記事でやり残していた、記事ページの下部に表示される「関連記事」のサムネイル画像の処理をします。
線がね、重なってしまうんですよねぇ。

関連記事のサムネイル「no image」の枠線を消す

私は、以前の記事＜■【Seesaaブログ新デザインシステム】記事ページの「関連記事」（1）サムネイル「no-image」の色を変更＞で、「関連記事」のサムネイル画像部分、class名で言うと「no-image」を編集しました。
Seesaaブログのデフォルトのテンプレート「シンプルA. ホワイト 右カラム」で水色だった枠線を灰色「#aaa」に変更し、「no image」という文字を紺色で表示するように設定していたんですよ。



でも、前回の記事＜■すべてのサムネイル画像に枠線を付ける＞ですべてのページのサムネイル画像に枠線を表示するように編集したことで、「no image」の枠線とサムネイルの枠線が重なって太線になってしまったのです。





この現象、どうにかして解消しなければいけませんね。

「no-image」の枠線を消すことによる影響

太線になってしまった「no image」を通常のサムネイル画像の枠線と同じように表示するためには「no image」の枠線を消してしまえばいいんですが、CSSで設定している「no-image」の枠線「border: 1px solid #aaa;」を削除してしまうと他のページにも影響が出ます。



「no-image」というclassが使用されている箇所は記事ページ下の関連記事部分だけではありません。
HTML上は4ヶ所に「no-image」が使われていますので、簡単に紹介しておきます。（私が編集過程を記載した記事も紹介しておきます）

class「no-image」が使用されている箇所

以下、説明する「no-image」が使われている箇所は、このブログでここまで記述してきたカスタマイズ後のHTMLの話です。（デフォルトのテンプレートには、class「no-image」は2ヶ所しかありません）



1. 個別記事ページ
個別記事ページ下部の関連記事（カテゴリ最新記事）のサムネイル画像。サムネイルで紹介される記事の中で、画像の挿入がなかった記事を示す「no image」




2. 画像詳細ページ
画像詳細ページで、画像をアップロードしたけれどもまだ記事に画像を掲載していない場合（画像をアップロードしただけの状態）や、背景画像のように記事には使用しない画像がある場合の「非公開」の文字




3. 画像詳細ページ
画像詳細ページの下部に表示される関連画像の「非公開」の文字

＜編集記事なし。「no-image」がデフォルトのテンプレートで既に設定されていた箇所です。どこに「非公開」が表示されるのか、正直言ってわかりません。画像詳細ページの下部には関連画像が表示されますが、HTMLでは「関連画像があるならサムネイルを。なければ非公開の文字を表示する」という指示になっています。「if」で指定されている「upload.public」の意味が私にはわからないので申し訳ないです。うーん、もしかしたらサムネイルが無いならば、ってことでビデオとかオーディオの時に表示するのかな？＞



4. 画像一覧ページ
画像一覧ページで、画像をアップロードしたけれどもまだ記事に画像を掲載していない場合（画像をアップロードしただけの状態）や、背景画像のように記事には使用しない画像がある場合の「非公開」の文字




3番目の記述の意味がよくわかりませんが、まあ、こんな感じで4ヶ所にclass「no-image」が使用されています。
ということは、CSSの「no-image」を編集すると4ヶ所すべてに影響が出る、ということです。

「no-image」が使用されている「非公開」の文字

CSSの「no-image」を編集すると、上記で紹介した4ヶ所すべてに影響が出ます。
ただし、現状を見てみると、「非公開」については問題ないと思われます。



「非公開」は表示する画像が無いため「非公開」という文字を表示させます。
前回の記事ではサムネイル画像に枠線を付けただけなので、文字である「非公開」の枠線はサムネイル画像の枠線と重なることはありません。
例として、画像一覧ページの「非公開」の画像を掲載します。





「非公開」の枠線と白地が多い画像に対する枠線は同じですね。線は重なっていません。
ということは、「非公開」という文字に対する「no-image」の枠線を削除する必要は無いということです。
枠線を削除してしまうと「非公開」という文字だけの表示になってしまいます。



枠線が重なって太線になってしまうのは『class「no-image」が画像に対して使用されている場合だけ』です。
逆に、画像に対して「no-image」が使われている箇所にのみ、枠線のない「no-image」を使うように指示を出せば問題が解決します。
ということで、新しくclassを作ります！

「no-image2」というclassを作ってしまえ！

面倒なことはできるだけ簡素にやりたいので、新しいclassの名前は「no-image2」にします。
（お気に召さないならばご自分で好きな名前にしてください）



class「no-image」が使用されている4ヶ所の中で、画像に対して「no-image」が設定されているのは1ヶ所だけです。
個別記事ページ下部の関連記事（カテゴリ最新記事）部分に表示される「no image」にのみ、画像に対して「no-image」が設定されており、あとは全部「非公開」という文字に対して設定されています。



ということで、まずはCSSに新しいclass「no-image2」を記述します。
その後で個別記事ページ下部の関連記事部分のHTMLのclass名を「no-image2」に変更します。

CSSに新しいclass「no-image2」を記述する

CSS（スタイルシート）を編集します。
管理画面の「スタイルシート編集」画面で「no-image」というclassを探します。
「no-image」の下に、新しいclass「no-image2」の記述を追加します。





「no-image」の下に、下記の「追加するコード」をコピペするか直接記述して、最後に「保存」します。
コード内容は元々の「no-image」から「border: 1px solid #aaa;」を抜いた内容です。
必ずしもこの位置に追加しなくてもかまいませんが（CSSの一番下に追加しても大丈夫です）、「no-image」関連のコードはこの位置にすべて記述されていますので、並びに合わせて私はこの位置に記述します。


＜追加するコード＞

HTMLの該当箇所に新しく作った「no-image2」を記述する

HTMLを編集します。
管理画面の「HTML編集」画面を開き、「関連する記事」というワードで検索すると1ヶ所がヒットします。この「関連する記事」の下の方に「no-image」がありますので、この部分を編集します。





「<div class="no-image">」を「<div class="no-image2">」に変更します。
「no-image」の後ろに「2」を追加すればいいだけなので、簡単です。

コード編集後の記事ページの関連記事部分

次の記事の紹介

次の記事では、Seesaaブログにグローバルナビゲーションを付ける方法を説明します。