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

何となく「カスタマイズ、終わったかなぁ」とか思いながらページを開いて確認をしている時に、記事に白っぽい画像を挿入した場合、サムネイル画像が並んで表示されるパーツの見た目がおかしいことに気が付きました。
白地が多い画像は、縮小されてサムネイルで表示される時にはただの白色になってしまうので、そこに画像があるのか無いのかの判断ができにくくなるんです。
とりあえず、現時点の各ページの画像を掲載してみます。



サイドバー「最近の記事」




記事ページの「関連記事」




画像詳細ページの「関連画像」




画像一覧ページ




画像にタグを設定した時のタグ一覧ページ




画像に白部分が多い場合、サムネイルは上記のように表示されるため、風景などの普通の写真と一緒に並べられると違和感があります。
そもそも私自身がこういう表示は許せませんし、サムネイル画像部分には画像に対して外枠を設定しておいた方が、「これは画像だよ」とハッキリさせることができます。



ちなみに、以下、それぞれのページのコード編集をしますが、掲載しているコード画像（元コードにあたる画像）は、既に第一段階の編集が終わっている画像です。
私は、カスタマイズ終了後に、コメントアウトしている見出しの文言や行間を変更（各コード間を1行空けたり2行空けたり）しました。
編集後に改めて画像をキャプチャしたので、コード画像の行数はデフォルトのテンプレートからはもちろん、ここまでのカスタマイズ後の行数とも違っています。
フィーリングで把握して頂けると助かります。



サムネイル画像に枠線を追加するので、追加するコードは「border: 1px solid #aaa;」です。
枠線を薄い灰色（カラーコード「#aaa」）に設定していますが、もちろんカラーコードや線の太さを変更してもかまいません。お好きなようにどうぞ。


ここで設定するカラーコード「#aaa」は、記事に画像を掲載しなかった場合に記事ページ下部に表示される関連記事部分「no image」の枠線と同じ色です。
「no image」とサムネイル画像は同じ場所に並びますので、わざと同じ色の枠線にしました。

サイドバー「最近の記事」のサムネイル画像に枠線を付ける

Seesaaブログのサイドバーの「最近の記事」を編集します。
「最近の記事」には記事タイトルとサムネイルが表示されるので、サムネイル画像に枠線を付けます。



CSS（スタイルシート）を編集します。
管理画面の「スタイルシート編集」画面で「.module--recent-entry .recent-entry__thumbnail」というclassを探します。
このclassは、以前の記事＜■【Seesaaブログ新デザインシステム】サイドバー「最近の記事」（1）リンク設定とサムネイル画像サイズを編集する＞で編集済みです。






このコードの一番下に「border: 1px solid #aaa;」を追加します。（元から記載されている「}」は消さないように気を付けてください）
「border: 1px solid #aaa;」を追加したら「保存」します。


＜編集後＞

コード編集後のCSSと「最近の記事」のサムネイル画像

記事ページの関連記事のサムネイル画像に枠線を付ける

Seesaaブログの記事ページの下に表示される「関連記事」を編集します。
CSS（スタイルシート）を編集します。
管理画面の「スタイルシート編集」画面で「.module--category-recent-entry .recent-entry .recent-entry__thumnail」というclassを探します。
このclassは、以前の記事で編集済みです。









このコードの一番下に「border: 1px solid #aaa;」を追加します。
「border: 1px solid #aaa;」を追加したら「保存」します。


＜編集後＞

コード編集後のCSSと関連記事のサムネイル画像

●編集後のサムネイル画像を見ると、「no image」の外枠と今回設定した外枠が重なって太線になっています。これを普通の枠線にするために、CSSで設定している「no-image」の枠線「border: 1px solid #aaa;」を安易に削除するのはやめた方がいいと思います。
class「no-image」が使用されているのはこの関連記事部分だけではありません。もしも「no-image」の外枠を消してしまうと、他の場所の「no-image」も外枠が消えてしまいます。


「noimage」の処理については、次の記事＜■記事ページの「関連記事」のサムネイル「no image」の枠線を消す＞で説明します。

画像詳細ページの関連画像サムネイルに枠線を付ける

Seesaaブログの画像詳細ページ（アップロードのページ）を編集します。
記事の画像をクリックした時に表示されるページです。



CSS（スタイルシート）を編集します。
管理画面の「スタイルシート編集」画面で「.upload-detail .upload-list__thumnail」というclassを探します。
このclassは、以前の記事で編集済みです。









このコードの一番下に「border: 1px solid #aaa;」を追加します。
「border: 1px solid #aaa;」を追加したら「保存」します。


＜編集後＞

コード編集後のCSSと画像詳細ページの関連画像

画像一覧ページのサムネイル画像に枠線を付ける

Seesaaブログの画像一覧ページを編集します。
画像詳細ページで「月」をクリックした時に表示されるページです。


と、書きましたが、ここでは何も編集しません。
なぜなら、上記で編集した「画像詳細ページの関連画像部分」は、この画像一覧ページと共通設定だからです。
画像詳細ページのサムネイルに枠線を付けると、画像一覧ページのサムネイル画像にも枠線が付きます。





画像詳細ページの関連画像表示と画像一覧ページのサムネイル画像の表示が共通だということは、以前の記事＜■【Seesaaブログ新デザインシステム】画像詳細ページの「関連画像」（2）サムネイル部分の余白を考える＞で説明していました。

画像にタグを設定した時のタグ一覧ページのサムネイルに枠線を付ける

Seesaaブログのタグ一覧ページを編集します。
画像にタグを設定している場合に、タグをクリックして開くタグ一覧ページです。



CSS（スタイルシート）を編集します。
管理画面の「スタイルシート編集」画面で「tag-photos__thumnail」というclassを探します。
このclassは、以前の記事＜■【Seesaaブログ新デザインシステム】タグ一覧ページのサムネイル画像サイズを変更＞で編集済みです。






このコードの一番下に「border: 1px solid #aaa;」を追加します。
「border: 1px solid #aaa;」を追加したら「保存」します。


＜編集後＞

コード編集後のCSSと画像にタグを設定した時のタグ一覧ページ

次の記事の紹介

次の記事では、記事ページの「関連記事」のサムネイル「no image」の枠線を消す方法を説明します。