『情報』ブロックの枠線の色を変更したい

0
いいねをした人: 居ません
  • このトピックには8件の返信、2人の参加者があり、最後にshoneにより3ヶ月、 1週前に更新されました。
9件の投稿を表示中 - 1 - 9件目 (全9件中)
  • 投稿者
    投稿
  • #96938
    shone
    閲覧者
    16

    【お使いの Snow Monkey のバージョン】16.0.1
    【お使いの Snow Monkey Blocks のバージョン】14.0.0
    【お使いの Snow Monkey Editor のバージョン】7.0.0
    【お使いのブラウザ】chrome
    【当該サイトのURL】

     

    いつもお世話になっております。

     

    表題の通り、『情報』ブロックを用いて横2列の表を作っています。

    その際デザインを『ボーダー』にしているのですが、このボーダー(枠線)の色がやや薄いと感じるため色を変更したいと思っています。

     

    ブロック標準の機能では変更できなかったため、CSSで上書きすることになるかと思うのですが、デベロッパーツールで見ても該当部分がわかりませんでした。

    .smb-information.smb-information __bodyで指定するのかと考え、試しにborder-colorを指定してみましたが、変化はありませんでした。

     

    どのようにCSSを当てれば良いでしょうか?

    アドバイスいただけますと幸いです。何卒よろしくお願い致します。

    0
    いいねをした人: 居ません
    #96949
    Olein_jp
    参加者
    425

    ブラウザの検証ツールで対象の要素を確認し、実際にそちらで書いてみるとどのように効くか確認できると思います。

    ぜひお試しください!

    0
    いいねをした人: 居ません
    #96963
    shone
    閲覧者
    16

    >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を追記する前も太くなっているように見えるので、何か要素が二重になっているのか?元々の仕様で仕方がないのか?わかりかねています…

    0
    いいねをした人: 居ません
    #96970
    Olein_jp
    参加者
    425

    例えばこう記述すると、

    .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クラスを付与した上で、ご自身の好きなようにスタイルを記述してカスタマイズされる方が、既存のスタイルにあまり左右されなくなるため楽かもしれませんね。

    1
    いいねをした人:
    #96981
    shone
    閲覧者
    16

    >Olein_jpさん

     

    アドバイスいただきありがとうございます。

    たしかに色とpxを変更するとかなり目立つことがわかりますね…

     

    私としては色を変更しつつ全ての罫線の太さを同じにしたいのですが、デフォルトのスタイルにCSSを当てるのでは実現が難しい(記述が複雑?)になってしまうのでしょうか。

    追加でCSSクラスを付与して記述のほうが楽とのことですがそちらのアイデアや知識も無く…うまい記述がありましたらアドバイスいただけますと幸いです。

     

    繰り返しの質問で申し訳ございませんが、よろしくお願い致します。

    0
    いいねをした人: 居ません
    #97033
    Olein_jp
    参加者
    425

    追加でCSSクラスを付与して記述のほうが楽とのことですがそちらのアイデアや知識も無く…うまい記述がありましたらアドバイスいただけますと幸いです。

    下の動画(50:12あたりから)を参照いただければ方法がわかるかと思います。チャレンジしてみてください。

    0
    いいねをした人: 居ません
    #97304
    shone
    閲覧者
    16

    ご返信ありがとうございます。

    クラスの付与の方法は把握していまして、カスタマイズ時に使用することもあるのですが…今回のようなデザインを実現したいときに、独自のクラスを指定した部分にどうCSSを記述すればうまくいくのかがわからない…という意味合いになります。

    動画も先に拝見していて、情報ブロックの~、のところも見てはいたのですが…

    ではいざ今回のように、太さを均一にするスタイルを当てたいとなったときに、具体的にどう書けばそれが実現できるのかが知識不足でわからないということでした。

     

    ただ上に書いたCSSを、指定先を独自のクラスに変更するだけでは意味がないので…いったんデザインをリセットしてテーブル組みにいちからCSSを当てたりするべきなのか?何か他にスマートな記述があるのか?等を考えておりました。

    0
    いいねをした人: 居ません
    #97330
    Olein_jp
    参加者
    425

    ボーダーの太さをどれくらいにしたいのか、許容できる見た目がどんなものなのかは個人差があるので具体的な例を示すことは控えていますが、CSSを書く順序としては、上から3行、左から2列の要素編成だったとして、

    1. 全体の行に上・左・右でボーダーを記述
    2. 全体の2列目に左ボーダーを記述
    3. 最後の行にのみ下ボーダーを記述する

    これを任意のクラスを付与して記述することで見た目をコントロールできると思いますがどうでしょうか?

    1
    いいねをした人:
    #97982
    shone
    閲覧者
    16

    >Olein_jpさん

     

    アドバイスいただきありがとうございます。

    『情報』ブロックを思い通りにカスタマイズするには苦労しそうで、標準のテーブル機能を使用することにしました。

    ただテーブルブロックのセル内では『リスト』ブロックが使えない?ようで、結局『クラシック版の段落』+Tiny MCEプラグインで表を挿入し各設定を行い、なぜかパディングの設定が効かなかったのでパディングは追加CSSにて設定…としました。

    力技でしたが一応当初の目的である枠線の太さを統一&色を変更することはできたので、解決とさせていただきます。

    0
    いいねをした人: 居ません
9件の投稿を表示中 - 1 - 9件目 (全9件中)
  • トピック「『情報』ブロックの枠線の色を変更したい」には新しい返信をつけることはできません。

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ