【Seesaaブログ新デザインシステム】画像詳細ページの関連画像サムネイル(2)1行に5個の画像を表示する|ブログカスタマイズの雑談BLOGスマートフォン専用ページを表示ブログカスタマイズの雑談BLOGブログのカスタマイズやパソコン・ネットに関する雑談をするブログです。前回の記事<■【Seesaaブログ新デザインシステム】画像詳細ページの関連画像サムネイル(1)1行に6個の画像を表示する>では、画像詳細ページの下部に表示される関連画像のサムネイル画像サイズを変更しました。デフォルトのテンプレートのまま1行に6個の画像を表示させましたが、たぶん、画像サイズ105pxが最大サイズになると思います。大きなサイズで画像を表示したい場合は、1行に表示させる画像の数を6個から減らさなければなりません。表示させる画像の数を指定して、それから画像サイズを変更します。ちなみにデフォルトのテンプレートの場合、サムネイル画像サイズは「91px」です。サムネイル画像部分の右余白が少し空いている状態になります。現時点のテンプレート画像詳細ページに表示させるサムネイル画像の数を変更するHTMLを編集します。管理画面の「HTML編集」画面を開き、「upload-list__item」で検索すると2ヶ所がヒットします。デフォルトのテンプレートでは504行と551行です。今回はこの2つとも編集します。1つめにヒットしたのは今、編集しようとしている画像詳細ページのサムネイル画像です。記事に掲載されている画像をクリックしたら最初に開くページです。2つ目にヒットしたのは、画像詳細ページのカレンダー部分の「月」をクリックしたら開くページです。私は「画像一覧ページ(リストページ)」と呼んでいます。以前の記事<■画像詳細ページの「関連画像」(2)サムネイル部分の余白を考える>で書きましたが、画像詳細ページの関連画像部分はこの「月」ごとのページ(画像一覧ページ)と共通設定となっていますので、こちらも編集しなければおかしなことになってしまいます。サムネイル表示数を変更するHTMLで「upload-list__item」を検索した時にヒットする部分の記述は、2つとも同じ内容です。-%>">どちらも数値「6」が記述されています。(上記画像で青色丸枠で囲んでいる箇所です)この「6」が、1行に表示させるサムネイル画像の数です。1行にサムネイル画像を5個表示させたいのならば、この数値「6」を「5」に変更します。2ヶ所とも、数字を「5」に変更します。この後、サムネイル画像サイズを変更するつもりなので、例えば1つ目の記述(画像詳細ページ)だけを「5」に変更して、2つ目の記述(画像一覧ページ)では「6」のまま、なんてことをすると表示がめちゃくちゃになります。2ヶ所とも「5」に変更してください。表示させるサムネイル画像数と画像サイズの関係HTMLで画像数を「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-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ブログの画像詳細ページで表示する画像がない場合の設定について説明します。[必須入力]※画像の中の文字を半角で入力してください。