- このトピックには3件の返信、3人の参加者があり、最後に
により3年、 1ヶ月前に更新されました。
-
投稿
-
【お使いの Snow Monkey のバージョン】13.2.3
【お使いのブラウザ】chome
【当該サイトのURL】非公開お世話になります。
Snow Monkeyを利用してサイトリニューアルをおこなうことになっており、
現在情報収集含めて準備をおこなっているのですが、
ご確認したいことがあり、トピックを立てさせていただきました。snow monkeyでセクションや共通ブロックなどに独自スタイルを当てる場合、
「高度な設定」の「追加 CSS クラス」でセクションや共通ブロックにクラスの設定をしてから、
「追加CSS」を利用することになると思うのですが、
セレクタはこの「追加 CSS クラス」のみでいいのでしょうか？snow monkeyのカスタマイズを説明しているyoutube動画を見ると、
それ以外のセレクターも使っているようなので質問させていただきました。
例えば「.smb-panels__item__figure」とか。セレクタとして指定が必要な場合、
これらセクションや共通ブロックで使われているクラスの一覧表などはどこかにありますでしょうか？
それとも都度「Chromeデベロッパー・ツール」で確認することになりますか？よろしくお願いいたします。
いいねをした人: 居ません「高度な設定」→「追加CSSクラス」でクラス名を挿入すると、該当ブロックの一番外側の要素に付与されます。
そのクラス名とその中にある（または併記されている）CSSクラス名（例えば
.smb-panelや.smb-panel__itemなど）を利用してCSSカスタマイズをしていく流れになることが一般的かと思います。セレクタとして指定が必要な場合、
これらセクションや共通ブロックで使われているクラスの一覧表などはどこかにありますでしょうか？
それとも都度「Chromeデベロッパー・ツール」で確認することになりますか？現状、Snow Monkey ではクラス名などの一覧となるドキュメントはありません。というのも、アップデート頻度が高いためドキュメント整備リソースが確保できないという理由と、そもそもカスタマイズする際にはブラウザの開発者ツールで最終的には確認することになるため、このような形に落ち着いている状況です。
ですので、開発者ツールで確認をしながらカスタマイズを進めていく形になるかと思います。
いいねをした人:セレクタはこの「追加 CSS クラス」のみでいいのでしょうか？
これはどのようなカスタマイズをおこないたいかによるので一概にはいえません。オレインさんが書かれているように追加 CSS クラスに書いた CSS クラスはそのブロックの大外に付与されます。もし大外の要素をカスタマイズしたければ追加 CSS クラスに書いた CSS クラスをセレクタに使用すれば良いですが、ブロックの中の要素、例えばパネルブロックの画像部分（
.smb-panels__item__figure）をカスタマイズしたければ追加 CSS クラスに追加した CSS クラス .smb-panels__item__figure { ... }のようなセレクタでカスタマイズすることになります。もし CSS の知識をあまりお持ちでない場合は、この辺りは基礎知識があったほうがわかりやすいと思うので、セレクタについてのページを一度見られてみると良いかもしれません。
セレクタとして指定が必要な場合、これらセクションや共通ブロックで使われているクラスの一覧表などはどこかにありますでしょうか？
それとも都度「Chromeデベロッパー・ツール」で確認することになりますか？それとも都度「Chromeデベロッパー・ツール」で確認することになります。オレインさんが書かれているようにメンテナンス性の理由もありますが、どのセレクタにどのようなスタイルがあたるかを一覧にしたもの = CSS ファイルに書いてある内容になってしまいますし、その羅列を見るよりはデベロッパーツールで必要な部分を選択してそこにあたっている CSS だけを確認するほうがわかりやすいと思いますので、CSS/セレクタについては特にドキュメントを用意していません。
いいねをした人:
- トピック「snow monkeyの「セクション」や「共通ブロック」のCSSセレクターについて」には新しい返信をつけることはできません。