Top Page > Seesaaブログ > 【Seesaaブログ新デザインシステム】画像詳細ページの関連画像サムネイル…

【Seesaaブログ新デザインシステム】画像詳細ページの関連画像サムネイル(2)1行に5個の画像を表示する

Seesaaブログの画像詳細ページの関連画像に6個のサムネイルを表示する
■Seesaaブログの画像詳細ページ(アップロードのページ)を編集
■関連画像部分のサムネイル数を設定して1行に5個のサムネイルを表示
■サムネイル画像のサイズを変更
■CSSの「.upload-detail .upload-list」関連を編集  

前回の記事<■【Seesaaブログ新デザインシステム】画像詳細ページの関連画像サムネイル(1)1行に6個の画像を表示する>では、画像詳細ページの下部に表示される関連画像のサムネイル画像サイズを変更しました。



デフォルトのテンプレートのまま1行に6個の画像を表示させましたが、たぶん、画像サイズ105pxが最大サイズになると思います。
もう少し大きなサイズで画像を表示したい場合は、1行に表示させる画像の数を6個から減らさなければなりません。
まずは表示させる画像の数を指定して、それから画像サイズを変更します。



ちなみにデフォルトのテンプレートの場合、サムネイル画像サイズは「91px」です。
なので、サムネイル画像部分の右余白が少し空いている状態になります。


現時点のテンプレート
現時点のサムネイル画像部分




画像詳細ページに表示させるサムネイル画像の数を変更する


HTMLを編集します。
管理画面の「HTML編集」画面を開き、「upload-list__item」で検索すると2ヶ所がヒットします。デフォルトのテンプレートでは504行と551行です。
今回はこの2つとも編集します。



まず、1つめにヒットしたのは今、編集しようとしている画像詳細ページのサムネイル画像です。記事に掲載されている画像をクリックしたら最初に開くページです。


画像詳細ページのサムネイル画像部分のHTML



2つ目にヒットしたのは、画像詳細ページのカレンダー部分の「月」をクリックしたら開くページです。私は「画像一覧ページ(リストページ)」と呼んでいます。


「月」をクリックしたら開くページのサムネイル画像部分のHTML


以前の記事<■画像詳細ページの「関連画像」(2)サムネイル部分の余白を考える>で書きましたが、画像詳細ページの関連画像部分はこの「月」ごとのページ(画像一覧ページ)と共通設定となっていますので、こちらも編集しなければおかしなことになってしまいます。



サムネイル表示数を変更する


HTMLで「upload-list__item」を検索した時にヒットする部分の記述は、2つとも同じ内容です。


<共通のコード>
<li class="upload-list__item<% unless:__counter__ % 6 -%> is-mg-hidden<% /unless -%>">


どちらも数値「6」が記述されています。(上記画像で青色丸枠で囲んでいる箇所です)
この「6」が、1行に表示させるサムネイル画像の数です。
1行にサムネイル画像を5個表示させたいのならば、この数値「6」を「5」に変更します。
もちろん2ヶ所とも、数字を「5」に変更します。



この後、サムネイル画像サイズを変更するつもりなので、例えば1つ目の記述(画像詳細ページ)だけを「5」に変更して、2つ目の記述(画像一覧ページ)では「6」のまま、なんてことをすると表示がめちゃくちゃになります。
必ず2ヶ所とも「5」に変更してください。



表示させるサムネイル画像数と画像サイズの関係


HTMLで画像数を「5」に変更した状態の実際のページはこんな感じになります。


画像数を「5」に変更した場合の実際の表示


「あれ?1行に6個の画像が表示されてるじゃん!」と思われるでしょうが、その通りです。
先ほど1行には5個の画像を表示させるように設定したのですが、パッと見ても画像は6個ありますね。
でも、よく見てください。
画像の5個目と6個目の間の余白が他とは違いますよね?
つまり、コード上はこの間で切れているということです。
画像サイズが小さいので、1行目に2行目最初の画像が入り込んでしまっているだけなのです。



例えばですが、1行に6個の画像を表示させるようにHTMLで設定をしていて(つまりデフォルトのまま)、画像サイズだけを大きくしたとします。
実際にページを見てみると、こんな感じです。


画像サイズを大きくしてみた場合


以前作成した画像を掲載しましたのでサムネイルの左側に余白が入っていますが、私が言いたい事は表現できている画像なのでお許しください。



1行に6個の画像を表示するという指示を出していますので、本当は1行に6個の画像を並べたいわけです。
でも、画像サイズを大きくしたので1行に6個は入らなかった。
なので画像が2行目に折り返されているわけですが、画像の6個目と7個目の間の余白が小さくなっています。つまり、コード上はここで切れているということです。


ということは、先に画像サイズを決定してしまうとこのように表示がおかしくなるわけです。
サムネイル画像を表示させる場合は、最初に1行に何個の画像を表示させるかを設定してから画像サイズを変更した方がいいと思います。



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


では、画像のサイズを変更するためにCSS(スタイルシート)を編集します。
管理画面の「スタイルシート編集」画面の「.upload-detail .upload-list」というclass関連の記述の中に、「91px」と書かれた島が3つあります。


サムネイル部分のスタイルシート


91px」がサムネイル画像のサイズですので、左右の余白を見ながら適当に変更してください。
この数値を変更することで、画像のサイズを小さくしたり大きくしたり好きなようにできます。
色々とやってみましたが、1行に5個のサムネイル画像を表示させるためには「129px」がいい感じです。
「91px」という数値すべて(6個すべて)を、お好きなサイズに変更してください。



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


実際のサムネイル部分の表示



コード編集後の「画像一覧ページ」のサムネイル


画像詳細ページのカレンダー部分の「月」をクリックしたら開くページ(画像一覧ページ)です。これも「129px」で問題ないと思います。


画像一覧ページのサムネイル部分の表示



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


ブラウザの横幅を段々と狭くして表示してみました。
1行に5個のサムネイル画像を表示させているので、なんかおかしな感じに思うかもしれませんが、まあ、別に気にするような表示ではないと思います。


ブラウザの幅を少し狭くして表示


ブラウザの幅をけっこう狭くして表示


ブラウザの幅をかなり狭くして表示


上記のようにブラウザの横幅を狭くしてみた時にサムネイル画像の表示が気になる場合は、1行に6個のサムネイル画像を表示させておいた方がいいと思います。
少し画像サイズが小さくなってしまうんですけどね。
まあ、どちらのやり方でも問題はないし、ブラウザの幅を段々狭くしてみる、なんてことをする人はそうそういないと思います。



Seesaaブログはレスポンシブ対応になっていますので、ブラウザの幅を狭くして見る場合というのはスマホで表示する時だと思います。とはいえ、Seesaaブログにはスマホ用のテンプレートが準備されているので、スマホの場合は専用のテンプレートによりサムネイル画像もちゃんと表示されるようになっています。
なのでブラウザの横幅についてはあまり気にしなくていいと思います。



とりあえず1行に6個のサムネイル画像を表示させる方法を書いた記事を紹介しておきます。(何度も紹介しちゃってすみません)


【Seesaaブログ新デザインシステム】画像詳細ページの関連画像サムネイル(1)1行に6個の画像を表示する
サムネイル画像のサイズを変更したいと思います。今から説明するのは、1行に6個の画像を表示させるという設定はそのままで、画像サイズだけを大きくする方法です。‥‥




次の記事の紹介

次の記事では、Seesaaブログの画像詳細ページで表示する画像がない場合の設定について説明します。


【Seesaaブログ新デザインシステム】画像詳細ページで表示する画像がない場合(タイトルと「非公開」画像の設定)
Seesaaブログの「管理画面>ファイルマネージャ」で画像をアップロードしたけれどもまだ記事に画像を掲載していない場合(画像をアップロードしただけの状態)や、背景画像やトップへ戻るボタンで使用した画像のように‥‥






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

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