検索結果ページの画像サイズを変更する

検索結果ページ上で表示される画像サイズは、
各レイアウトごとにスタイルシートで制御されていますが、
画像の大きさを変更したいケースも多々あるかと思います。

このページでは画像のサイズの指定方法について解説をしていきます。

このページの目次

「画像サイズの設定」ボタンをクリックする

検索結果ページのサムネイル画像のサイズを変更する場合は、
プレビュー画面上部の「画像サイズの設定」ボタンを選択してください。

メインの編集画面から設定を行う場合は、
上部メニュー上にある「検索結果の表示設定」→「画像サイズの設定」タブから設定を行って下さい。

画像のサイズ設定を行う

下図の画像サイズ設定画面が表示されます。
この画面で検索結果のサムネイル画像などのサイズを一括変更することが可能です。

サムネイル画像のサイズを「%」または「px」で指定をすることができます。

画像の親要素に対して、パーセンテージでサイズを指定します。
たとえば50%と指定した場合は、親要素の半分が画像サイズとなります。
横幅いっぱいまで画像を表示させたい場合は、こちらで100%と指定してください。

絶対値で画像の横幅を指定する場合は、pxを選択します。
例えばこちらで300pxと指定した場合、全ての検索アイテムのサムネイル画像が300pxの横幅となります。

画像の横幅が固定され、デバイスに左右されなくなりますので、
画像サイズが決め打ちされている場合はpxを指定するのが良いでしょう。

画像の縦幅をpxで指定します。各検索アイテムの画像の高さを合わせたい場合はこちらで指定してください。

なお、それぞれの項目のデフォルト値は0になります。

サムネイル画像のサイズ変更はPC及びタブレットブラウザにのみ反映されます。
スマートフォンブラウザの画像サイズは変更できませんのでご注意ください。

検索項目のタイプを「画像」にしている場合の
画像サイズを調整することができます。

デフォルトではスタイルシート側で、
縦幅、横幅ともに最大値が40pxに指定されていますが、
こちらのサイズを調整したい場合に設定を行って下さい。

なおこの項目でサイズを調整した場合、
「検索フォーム」上の画像サイズも連動して変更されます。

10px未満の値は有効になりませんのでご注意ください。