- このトピックには8件の返信、2人の参加者があり、最後に
により2年、 9ヶ月前に更新されました。
-
投稿
-
【お使いの Snow Monkey のバージョン】16.0.1
【お使いの Snow Monkey Blocks のバージョン】14.0.0
【お使いの Snow Monkey Editor のバージョン】7.0.0
【お使いのブラウザ】chrome
【当該サイトのURL】いつもお世話になっております。
表題の通り、『情報』ブロックを用いて横２列の表を作っています。
その際デザインを『ボーダー』にしているのですが、このボーダー（枠線）の色がやや薄いと感じるため色を変更したいと思っています。
ブロック標準の機能では変更できなかったため、CSSで上書きすることになるかと思うのですが、デベロッパーツールで見ても該当部分がわかりませんでした。
.smb-informationや.smb-information __bodyで指定するのかと考え、試しにborder-colorを指定してみましたが、変化はありませんでした。どのようにCSSを当てれば良いでしょうか？
アドバイスいただけますと幸いです。何卒よろしくお願い致します。
いいねをした人: 居ません>Olein_jpさん
返信いただきありがとうございます。
検証ツール（chromeのデベロッパーツール）の初歩的な使い方は一応理解しているつもりでしたが、見落としがあるのか今回変更したい部分が見つけられずにどう記述するか見当がつかず…という状態でした
もう一度確認してみて、
.smb-information.is-style-border .smb-information__item { border: 1px solid #778899; } .smb-information.is-style-border[data-sm-split-column=true] .smb-information__item>.c-row>.c-row__col:last-child { border-left: 1px solid #778899; }のように記述したところ、色の変更はできたのですが、今度はよく見ると表の一列目の下の線だけ太くなっているように見えます。
デフォルトの薄グレーだと目立っていないのですが、CSSを追記する前も太くなっているように見えるので、何か要素が二重になっているのか？元々の仕様で仕方がないのか？わかりかねています…
いいねをした人: 居ません例えばこう記述すると、
.smb-information.is-style-border .smb-information__item { border: 1px solid red; } .smb-information.is-style-border .smb-information__item>.c-row>.c-row__col:last-child { border-left: 1px solid blue !important; }少し構造が分かりやすいと思います。
1pxの太さであればそれほど目立ちはしませんが、赤線の方を2pxに変えてみると、
.smb-information__itemの要素の外枠の罫線になっているので、上下で重なる部分で他よりも太く見える場合があります。どのあたりが許容範囲かどうかわからないのでなんとも言えませんが、自身でコントロールされたい場合には、罫線ブロックスタイルを適応せず、任意のCSSクラスを付与した上で、ご自身の好きなようにスタイルを記述してカスタマイズされる方が、既存のスタイルにあまり左右されなくなるため楽かもしれませんね。
いいねをした人:
>Olein_jpさん
アドバイスいただきありがとうございます。
たしかに色とpxを変更するとかなり目立つことがわかりますね…
私としては色を変更しつつ全ての罫線の太さを同じにしたいのですが、デフォルトのスタイルにCSSを当てるのでは実現が難しい（記述が複雑？）になってしまうのでしょうか。
追加でCSSクラスを付与して記述のほうが楽とのことですがそちらのアイデアや知識も無く…うまい記述がありましたらアドバイスいただけますと幸いです。
繰り返しの質問で申し訳ございませんが、よろしくお願い致します。
いいねをした人: 居ません追加でCSSクラスを付与して記述のほうが楽とのことですがそちらのアイデアや知識も無く…うまい記述がありましたらアドバイスいただけますと幸いです。
下の動画（50:12あたりから）を参照いただければ方法がわかるかと思います。チャレンジしてみてください。
いいねをした人: 居ませんご返信ありがとうございます。
クラスの付与の方法は把握していまして、カスタマイズ時に使用することもあるのですが…今回のようなデザインを実現したいときに、独自のクラスを指定した部分にどうCSSを記述すればうまくいくのかがわからない…という意味合いになります。
動画も先に拝見していて、情報ブロックの～、のところも見てはいたのですが…
ではいざ今回のように、太さを均一にするスタイルを当てたいとなったときに、具体的にどう書けばそれが実現できるのかが知識不足でわからないということでした。
ただ上に書いたCSSを、指定先を独自のクラスに変更するだけでは意味がないので…いったんデザインをリセットしてテーブル組みにいちからCSSを当てたりするべきなのか？何か他にスマートな記述があるのか？等を考えておりました。
いいねをした人: 居ませんボーダーの太さをどれくらいにしたいのか、許容できる見た目がどんなものなのかは個人差があるので具体的な例を示すことは控えていますが、CSSを書く順序としては、上から３行、左から２列の要素編成だったとして、
- 全体の行に上・左・右でボーダーを記述
- 全体の２列目に左ボーダーを記述
- 最後の行にのみ下ボーダーを記述する
これを任意のクラスを付与して記述することで見た目をコントロールできると思いますがどうでしょうか？
いいねをした人:
- トピック「『情報』ブロックの枠線の色を変更したい」には新しい返信をつけることはできません。