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

Seesaaブログでは、記事に掲載した画像をクリックすると「画像詳細ページ（アップロードのページ）」が開きます。


画像詳細ページにはアップロードされた画像1枚が大きく表示されて、その下には記事に対する関連画像、つまりサムネイル画像が並んで表示されます。
この、並んで表示されているサムネイル部分の設定をしたいと思います。






ページの下部にサムネイル画像が並ぶ、という構図は以前もありました。
記事ページの下部にある「関連記事」です。
記事ページの「関連記事」のサムネイルを表示させる時に私は、左端から表示させる方法と、タイトルよりも内側から表示させる方法の2つのパターンを説明しました。






今回、同じような表示にするならば「タイトルよりも内側から表示させる方法」で設定する方がいいんですが、まあ、ちょっと考えてみましょう、というお話です。
理由は説明しますが結論だけ先に書くと、私自身は今回の「画像詳細ページの関連画像」では、サムネイル画像を左端から表示させることにしました。

画像詳細ページ下部の関連画像サムネイル部分の余白について

画像詳細ページの関連画像サムネイル部分のclassは、CSS上では「.upload-detail .upload-list」として記述されています。
下の画像の赤枠部分が、CSS上のclass「.upload-detail .upload-list」の範囲です。






まずは、CSS編集画面で記述場所を見つけやすいように目印を付けておきます。
該当部分に見出し「/* サムネイル表示部分外枠 */」を記述します。





記述内容を見ると、デフォルトでは上余白「margin-top: 5px;」が入っているだけですね。
上記画像を見たらわかりますが、赤枠の上には余白があります。この部分の指示です。
（上記画像ではタイトル部分の下余白も入っているため「5px」よりも広く余白があります）
現時点では上余白が設定されているだけで、他は何も設定されていないわけです。

関連画像サムネイル部分の余白をどのように設定するのか

では、関連画像サムネイルをどのように表示させた方がいいのかを考えます。
表示方法としては、現時点のテンプレートをそのまま踏襲してサムネイルを「左端から表示する」か、もしくは記事ページ下部の関連記事部分と同じように「タイトルよりも内側から表示する」か、の2つです。
まずは「タイトルよりも内側から表示する」方法を説明しますが、まあ、普通にできます（笑）

サムネイル画像をタイトルの内側から始める場合

私は以前の記事＜■記事ページの「関連記事」（4）サムネイルをタイトルよりも内側から表示して画像サイズを変更＞で「記事ページの下部に表示される関連記事部分」をカスタマイズした時に、サムネイルの左側に余白を20px作っていました。
こんな感じです。





今回も同じようにサムネイルを内側に表示させたい場合は、「.upload-detail .upload-list」の「margin-top: 5px;」を「margin: 5px 20px;」に変更してみてください。
左右に余白が入ります。


あ、しつこいですが「左右」に余白が入りますので。
「margin: 5px 20px;」という記述は「余白：上下5px、左右20px」という意味の記述です。
（もちろん、左端から画像を始めたい方は、現時点では何もしなくていいです）





編集後のイメージ



サムネイル画像が並んでいますが、これらの左右には余白を「20px」ずつ設定しています。
何も問題はありません。


問題はないんですが、問題が出てきます（笑）
というか、私自身が気になってしまう箇所がある、ということです。

「画像一覧ページ」の「月」ごとのページのサムネイル

先ほど編集したclass「.upload-detail .upload-list」ですが、実は他の場所でも使われています。
それは、「画像一覧ページ」の「月」ごとに画像を表示させるページです。


どのように説明したらいいのか迷ってしまいますが、え〜と、「画像詳細ページ（アップロードのページ）」では、大きな画像の上に「カレンダー」が表示されますよね。（前々回の記事＜■画像詳細ページのカレンダーと画像を編集（リンクの背景色や画像部分の余白を編集）＞で編集した部分です）


この「カレンダー」の「月」の部分をクリックすると、その月にアップロードされた画像がバーッと並んで表示されます。これが、「画像一覧ページ」で表示される「月」ごとのページです。


もしも上記のように「タイトルよりも内側からサムネイルを表示」させた場合、「月」をクリックして開くページにも同じclassが使われていますから、このような感じになります。
（色々と試行錯誤している時の画像なのでよくわからなかったらごめんなさい）





何が問題だ？と思われる方が多いと思いますが、私には違和感がある表示なのです。



記事ページの下部に表示される関連記事に左余白を作ったのは、タイトル表記（タイトルバー）があったからです。
サムネイル画像がタイトルバーと同じ位置から始まるのがイヤだと思ったので余白を入れたんですが、タイトルバーとサムネイル画像との間に別のパーツ（上の画像だとカレンダー「年」と「月」）が入る場合、余白があると何だか隙間が空きすぎているような気がしてしまいます。



もはや私自身の感覚だけで話を進めていますので、ついて行けないという方もおられると思いますが、私はこう思った、ということなので許容してくださいｗ
「月」ごとに表示させたページで、左右に20pxの余白があってもかまわないという場合は、上記のように「.upload-detail .upload-list」の記述を「margin: 5px 20px;」に変更すれば大丈夫です。


でも私は、やらないんだけどね！（笑）

サムネイル画像を左端から始める場合

私は「画像詳細ページ（アップロードのページ）」の関連画像部分の左右には、余白を入れません。
左端からサムネイル画像を表示させたいと思います。
左端から表示させると、画像詳細ページの下部は隙間が無いように見えてしまうんですが、仕方がないです。「月」をクリックして開くページ（画像一覧ページ）の表示を優先したいと思います。（もちろんclass名を変更して関連画像部分と「月」をクリックして開くページの画像部分を切り分けて設定することは可能ですが、面倒くさいｗ）



ということで、現時点ではデフォルトの設定のまま、「.upload-detail .upload-list」には「margin-top: 5px;」しか記述されていない状態です。



ただ、「月」をクリックして開いた画像一覧ページの構成を考えた時、「.upload-detail .upload-list」には下余白「margin-bottom: 20px;」ぐらいは入れておいた方がいいと思います。
デフォルトのテンプレートだと、画像一覧部分と、その下に表示されるリンク案内ボタンとの間隔が狭いので、少し広げておきましょう。
（「広げておきましょう」とか書きましたが、必要ない方は「margin-bottom: 20px;」を追加しなくても大丈夫です）









次の記事の紹介

画像詳細ページ（アップロードのページ）の関連画像部分に表示されるサムネイル画像ですが、まずはこの記事で、表示させるための余白を調整しました。現時点では余白を調整しただけなので、実際に表示させてみると1行に並んだサムネイル画像の右側に余白があります。この余白を調整するためには、サムネイル画像自体のサイズを変更した方がラクです。

次の記事からは関連画像部分のサムネイル画像のサイズを変更します。1行に6個のサムネイル画像を表示させる場合と、5個を表示させる場合の2パターンの記事を書いてみました。