# 【Bubble】Slideshowプラグインのカスタマイズについて

**URL:** <https://www.nocode-faq.com/t/topic/3713>\
**Category:** bubble\
**Tags:** フロントエンド, ツールの操作方法\
**Created:** [2023 年 6 月 16 日午前 7:22 UTC](https://www.nocode-faq.com/t/topic/3713 "2023-06-16T07:22:18Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![matsubara.yuki](https://avatars.discourse-cdn.com/v4/letter/m/e99b99/32.png) [@matsubara.yuki](https://www.nocode-faq.com/u/matsubara.yuki)\
**Post date:** [2023 年 6 月 16 日午前 7:22 UTC](https://www.nocode-faq.com/t/topic/3713/1 "2023-06-16T07:22:18Z")

</div>

### 実装したい機能

Slideshowのプラグインを使って自動カルーセルを実装しているのですが（赤が画像、緑が余白部分）、余白部分が大きすぎるのが気になります。  
PCだと余白はあまり気にならないのですが、スマホになると余白部分が目立ち、見た目がかなり悪いです。  
理想としては、余白部分はほんの少しだけで、画像の大きさ比率も変えたいです。  
コーディングによる実装が必要な場合は、そのやり方も教えてほしいですm(\_\_)m

### スクリーンショット

 ![名称未設定のデザイン (28)](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/6/615a14877424ba320d92782a0e2763cc68f06e59.png)

---

<div class="post-metadata">

**Author:** ![hirosugi](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/hirosugi/32/5159_2.png) [@hirosugi](https://www.nocode-faq.com/u/hirosugi)\
**Post date:** [2023 年 6 月 16 日午後 8:54 UTC](https://www.nocode-faq.com/t/topic/3713/2 "2023-06-16T20:54:32Z")

</div>

CSS Toolsというpluginを使用すれば  
CSSが直接触れますので解決可能かと思います。

使い方はjansnapさんが書いた記事があってとてもわかり易いです。

> **[(Bubble)指定したエレメントにCSSを指定して外見を整える｜jansnap](https://note.com/jansnap/n/n2f9185f71f8c)**
>
> 概要 BubbleはStylesにより色や線の太さなどの外見を整えることができます。 しかし、スタイルに該当しないような、エレメント内の文字の位置を調節したり、部分的に非表示にしたい場合は、個別にCSSを適用する必要があります。 CSS Toolsプラグインのインストール 
> CSS Toolsプラグインをインストールすると、Bubble内でCSSを指定できるようになります。 左メニューの「Plugins」から、CSS Toolsを検索してインストールします。 プラグインの詳細はCSS...

プレビュー画面でブラウザのデベロッパーツールを使用して  
対象のCSSとclassを調べて、CSS Toolsに記載をしていくというような形です。

ご参考になれば幸いです

 ![Frame 1 (2)](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/5/5c5b3ac441d7323aad07805ca71a128a4235b6ea.png)

---

<div class="post-metadata">

**Author:** ![matsubara.yuki](https://avatars.discourse-cdn.com/v4/letter/m/e99b99/32.png) [@matsubara.yuki](https://www.nocode-faq.com/u/matsubara.yuki)\
**Post date:** [2023 年 6 月 20 日午後 3:03 UTC](https://www.nocode-faq.com/t/topic/3713/3 "2023-06-20T15:03:26Z")

</div>

ご回答ありがとうございます！とりあえず挑戦してみます！  
また不明点が出てきたら教えていただければと思いますm(\_\_)m
