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

記事に掲載した画像をクリックすると「画像詳細ページ（アップロードのページ）」が開き、そのページの下の方に関連画像が表示されます。
関連画像の部分には、サムネイル画像がいくつか並ぶことになります。


現時点のテンプレート



現時点の関連画像部分を見ると、サムネイル画像部分の右余白が気になります。
余白も気になるし、サムネイル自体も小さい気がするし‥‥。
ということで、サムネイル画像のサイズを変更したいと思います。



Seesaaブログのテンプレート「シンプルA. ホワイト 右カラム」は、デフォルトの状態だと1行に6個のサムネイル画像が表示されるように設定されています。
今から説明するのは、1行に6個の画像を表示させるという設定はそのままで、画像サイズだけを大きくする方法です。
もっと大きな画像を表示させたい場合は、1行に5個の画像が表示できるように設定しなければいけません。そのやり方は次の記事＜■【Seesaaブログ新デザインシステム】画像詳細ページの関連画像サムネイル（2）1行に5個の画像を表示する＞で説明します。



ちなみに今回の編集では、この画像詳細ページの関連画像サムネイルのサイズが大きくなるだけではなく、画像詳細ページのカレンダー部分の「月」をクリックしたら開くページ（「画像一覧ページ（リストページ）」）のサムネイルサイズも大きくなります。共通設定になっているわけです。
そもそもが共通設定なわけですから、ここでサイズを調整しても何の問題もありません。（というか、調整せずに余白がある方がおかしいと思います）
さくっとやってしまいましょう。

画像詳細ページのサムネイル画像サイズを変更する

画像詳細ページの関連画像部分には1行に6個のサムネイル画像が入っていて右側に余白ができています。
この右側の余白を目立たなくするために、画像サイズを変更します。



CSS（スタイルシート）を編集します。
管理画面の「スタイルシート編集」画面の「.upload-detail .upload-list」というclass関連の記述の中に、「91px」と書かれた島が3つあります。





「91px」がサムネイル画像のサイズですので、左右の余白を見ながら適当に変更してください。
この数値を変更することで、画像のサイズを小さくしたり大きくしたり好きなようにできます。
色々とやってみましたが、「105px」ぐらいで丁度いいのではないでしょうか。
「91px」という数値すべて（6個すべて）を、お好きなサイズに変更してください。

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

ブラウザの横幅をわざと狭くして表示してみました

次の記事の紹介

この記事では画像詳細ページ（アップロードのページ）の関連画像部分のサムネイル画像を、1行に6個表示させています。デフォルトでは余白が出来ていたのを、サムネイル画像のサイズを大きくすることで空いた余白を埋めたわけです。

次の記事では、サムネイル画像のサイズをもっと大きくして、1行に5個のサムネイル画像を表示させるように設定します。
1行に6個表示させるのか1行に5個表示させるのか、お好きなやり方を試してみてください。


1行に5個の画像を表示させる