makeshopサポート │ バナー画像を横並びに配置する方法

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

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

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

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

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

設定方法

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

ベーシックモードの場合

旧管理画面：【ショップデザイン（PC）】>【トップページ編集】>【中央管理画面】
　　　　　　または表示したい画面
新管理画面：メインメニュー / ショップデザイン / テンプレート選択・編集
　　　　　　【ショップデザイン（PC）】>【トップページ編集】>【中央管理画面】
　　　　　　または表示したい画面

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

旧管理画面：【ショップデザイン】>【クリエイターモード】>【トップ】
　　　　　　または表示したい画面の「HTML」欄
新管理画面：メインメニュー / ショップデザイン / テンプレート選択・編集
　　　　　　【ショップデザイン】>【クリエイターモード】>【トップ】
　　　　　　または表示したい画面の「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>

</ul>

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

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

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

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

（2）CSSを指定する！

ベーシックモードの場合

旧管理画面：【ショップデザイン（PC）】>【トップページ編集】>【共通CSS管理】
新管理画面：メインメニュー / ショップデザイン / テンプレート選択・編集
　　　　　　【ショップデザイン（PC）】>【トップページ編集】>【共通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のグレーの枠線で囲む指定の場合*/
}

.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つ

縦並びのバナーが・・・

CSSが適用されると・・・

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

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

かんたんですね。

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

バナーを同じ間隔で横に並べて表示したい！