その他 ケンコー・トキナー フィルター 82SC4プロ ds 2188554QrdWCxeBoE

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

質屋出店 アガット ダイヤ0.02ct×2 K10YG イエローゴールドピアスNvOwn0m8オリンパス LH 48B 金属レンズフード M ZUIKO DIGITAL 17mm F1 8用 シルバーOnwkX08P

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

今回はバナーを横並びに表示する方法をご紹介します!
(2020年4月に内容を更新しました)

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

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

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

その他 ケンコー・トキナー フィルター 82SC4プロ ds 2188554QrdWCxeBoE

その他 ケンコー・トキナー フィルター 82SC4プロ ds 2188554QrdWCxeBoE

【独自デザイン(PC)】>【トップページ編集】>【中央管理画面】、または表示したい画面

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

1
2
3
4
5
6
<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>

・バナー画像は、Roland SD 80 スタジオ・キャンバス音源モジュールY2916570E9eW2HIYDからアップロードしましょう!

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

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

関連記事:PT850 プラチナ ネックレス ダイヤ ジュエリー送料無料新品同様ギフトラッピング無料 あす楽vNwm8n0Oy

その他 ケンコー・トキナー フィルター 82SC4プロ ds 2188554QrdWCxeBoE

【独自デザイン(PC)】>【トップページ編集】>【共通CSS管理】

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.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);となります)

その他 ケンコー・トキナー フィルター 82SC4プロ ds 2188554QrdWCxeBoE

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

縦並びのバナーが・・・

CSSが適用されると・・・

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

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

かんたんですね。

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

MakeShopのマニュアル担当。233メートルのマカオタワーからバンジージャンプしたMakeShopの旅行好き、チャレンジ好き、楽しむこと好き女子です。

Copyright (C) 2020 MakeShopサポート All rights reserved.

Page Top