こんにちは、makeshopのあらいです。
いつもmakeshopをご利用いただきありがとうございます。

今回はバナーを横並びに表示する方法をご紹介します！

こんなお悩みありませんか？

・いくつかあるバナー画像を横に並べてレイアウトしたい
・バナーを同じ間隔で横に配置したい
・floatを使わずにフレックスボックス（display:flex）を使ってリストを横並びにしたい

[難易度 ★★☆ ]
バナーを横に並べて表示する方法！
※プレミアムショッププランのみ

設定方法

（1）ul,li要素で書く！

ベーシックモードの場合

ショップデザイン / テンプレート選択・編集 / トップページ編集 / 中央画面管理
または表示したい画面

クリエイターモードの場合

ショップデザイン / テンプレート選択・編集 / クリエイターモード / トップ
または表示したい画面の「HTML」欄

のエディターエリアに、下記のように記載してください。

<ul class="top-banner">
<li><a href="リンク先のURL"><img src="file01.jpg" alt="バナー01です"></a></li>
<li><a href="リンク先のURL"><img src="file02.jpg" alt="バナー02です"></a></li>
<li><a href="リンク先のURL"><img src="file03.jpg" alt="バナー03です"></a></li>
<li><a href="リンク先のURL"><img src="file04.jpg" alt="バナー04です"></a></li>
</ul>

・バナー画像は、【100MBサーバー(ギガプラス10)】からアップロードしましょう！

・<img src=”画像URL(パス)” alt=”画像の代わりになるテキスト“>
↑バナーが表示されます！

・<a href=”リンク先のURL“>バナー</a>
↑バナーをクリックでリンク先のURLを表示します！

関連記事：画像やCSSファイルをアップロードしたい

（2）CSSを指定する！

ベーシックモードの場合

ショップデザイン / テンプレート選択・編集 / トップページ編集 / 共通CSS管理

クリエイターモードの場合

ショップデザイン / テンプレート選択・編集 / クリエイターモード / 全ページ共通
「CSS」欄

下記のスタイル指定を追記してください。

.top-banner{
	display: flex;
	flex-wrap:wrap;
}
.top-banner li {
	width: calc(100%/4);/*←画像を横に4つ並べる場合*/
	padding:0 5px;/*←画像の左右に5pxの余白を入れる場合*/
	box-sizing:border-box;
}
.top-banner li img {
	max-width:100%; /*画像のはみだしを防ぐ*/
	height: auto; /*画像の縦横比を維持 */
	border:solid 1px #ccc; /*←画像を1pxのグレーの枠線で囲む指定の場合*/
}

・padding（余白）や、border（枠）の指定は、お好みで変更できます！
・class=”top-banner”の「top-banner」部分も自由に変更できます。
変更する場合は、共通CSS管理の .top-banner も合わせて変更しましょう。
・.top-banner li の width（幅）は、数値を指定することもできますが、並べるバナーの数で割る指定方法がかんたんです！
（例えば、3つの時：width: calc(100%/3); 、6つの時：width: calc(100%/6);となります）

（3）横並び完了！

このように少し大きめの「幅300px × 高さ150px」× 4つ

縦並びのバナーが・・・

  • バナー01です
  • バナー02です
  • バナー03です
  • バナー04です

CSSが適用されると・・・

じゃん↓↓画像がはみださずに、縦横比を維持したまま横並びで表示されました！！

  • バナー01です
  • バナー02です
  • バナー03です
  • バナー04です

・スマホでの表示を考慮する場合は、小さい画像を画面いっぱいに表示しようとすると、画像が拡大され引き伸ばされ荒くなってしまいます。このように大きめの画像を使うとキレイに見えるのでおすすめです！
関連記事：スマホで最適な画像サイズを表示したい

かんたんですね。

いかがでしたでしょうか。
CSSを追加してバナーを均等に、横並びで表示してみましょう。
それではまた！