パネルブロックのタイトルのテキストを中央寄せに。背景をそれぞれで色を変更する

♥ 0

いいねをした人: 居ません

このトピックには2件の返信、2人の参加者があり、最後に桑原佑輔により2年前に更新されました。

3件の投稿を表示中 - 1 - 3件目 (全3件中)

投稿者

投稿
2022年11月22日 9:02 PM #114115
桑原佑輔
参加者

♥ 2
【お使いの Snow Monkey のバージョン】バージョン: 18.1.1
【お使いの Snow Monkey Blocks のバージョン】バージョン 17.1.0
【お使いの Snow Monkey Editor のバージョン】バージョン 9.0.3
【お使いのブラウザ】 Safari
【当該サイトのURL】

J's SPORTS BODY- 身体が変わればゴルフが変わる- 千葉市のゴルフに特化したパーソナルジム

スポーツを行う上で、効率の良い身体の動かし方からゴルフパフォーマンス向上のためのトレーニング、身体の痛みに対してのコンディショニングなどに対応可能です。プロか…

js-sportsbody.jp

（公開していないのでプレビューです。）

### 実現したいこと

①パネル内のタイトルを中央寄せにしたい

②各パネルの背景の色をそれぞれ別の色にしたい

### 発生している問題

①タイトルのみは左寄せになってしまう。

②４つのパネル全ての背景を一気に変更はできたが、それぞれで色を変えることはできなかった。

### 試したこと

①
```
.smb-panels__item__content{
  text-align: center;
}
```
で他のテキストは中央寄せができたがタイトルのみは中央寄せにならなかった。

②
```
.smb-panels__item.smb-panels__item--horizontal.center{
  background-color:#ffffff;
}
```
４つのパネル全ての背景を一気に変更はできたが、それぞれで色を変えることはできなかった。

すみませんがお力添えよろしくお願いします。

♥ 0

いいねをした人: 居ません
2022年11月23日 9:33 AM #114123
Olein_jp
参加者

♥ 566
①タイトルのみは左寄せになってしまう。

任意のクラス名 panel-title-center というようなクラス名を各パネルに設定する方法で紹介します。

そのクラスに対して、以下のようなCSSを設定します。
```
.panel-title-center .smb-panels__item__title {
    text-align: center;
}
```
これで実現できるかと思います。詳細度の問題があれば少し手入れしてみてください。

この方法と同じように、

②４つのパネル全ての背景を一気に変更はできたが、それぞれで色を変えることはできなかった。

も解決することができるかと思います。

例えば、背景色を赤にしたい場合、 panel-bg-red というようなクラス名を付与します。そして、
```
.panel-bg-red .smb-panels__item {
    background: red;
}
```
というクラスを用意しておけば、付与したパネル背景色のみ変更することができるので、色の数だけクラス名を用意して付与すれば実現できるかと思います。

お試しください。

♥ 2

いいねをした人:
2022年11月23日 2:47 PM #114128

桑原佑輔
参加者

♥ 2

できました！ご対応ありがとうございます！

♥ 1

いいねをした人:
投稿者

投稿