- このトピックには9件の返信、3人の参加者があり、最後に
により2年、 8ヶ月前に更新されました。
-
投稿
-
【お使いの Snow Monkey のバージョン】15.3.1
【お使いの Snow Monkey Blocks のバージョン】12.0.1
【お使いの Snow Monkey Editor のバージョン】6.0.0
【お使いのブラウザ】Chrome
【当該サイトのURL】https://x19.kglb.net/level-1/level-2a/### 実現したいこと
シンプルなドキュメント、マニュアルサイトをつくりたいので、サイドバーの実装方法をいつくか考えています。
### 発生している問題
ウイジットメニュー＞はデザインや編集性はいいのですが次ぎの点で使いづらいです
・子階層が最初は隠れている
・子階層がインデントされてない
デザイン性より直感で分かる実装がしたいです
### 試したこと
インデントだけでもとCSSを見ましたが、複雑すぎてわからなかったです。
子階層が最初かくれてるのはJavaScript実装なのかCSSのみで実装か知りたいですあと、過去のウイジットには固定ページをサイドバーに表示するブロックがあった記載がある記事もあるのですが、固定ページリストはあっても固定ページはなかったです。これはなくなったのでしょうか
いいねをした人: 居ません小山智久さん、こんにちは。
サイドバーの実装方法をいつくか考えています。
とのことですが、最終的にどのようなサイドバーが表示されるのが理想なのでしょうか？
カスタムメニューで管理できて、かつサイドバーにも表示させるなら、使い勝手のよいHTMLになるようにカスタムメニューをショートコード化できるようにして、ウィジェットに貼り付け、CSSで調整するのがよい気がします。いいねをした人:インデントだけでもとCSSを見ましたが、複雑すぎてわからなかったです。
子階層が最初かくれてるのはJavaScript実装なのかCSSのみで実装か知りたいですデベロッパーツールを開いて、開閉ボタンにフォーカスし、開閉ボタンをクリックしてみてください。すると
data-is-expandedやdata-is-hiddenが書き換わっているのがわかると思います。このような HTML の書き換えは CSS では実現できません。つまり JavaScript で書き換えています。ただ、HTML を書き換えるのは JavaScript ですが、それに応じて見た目を変化させるのは CSS になります。・子階層が最初は隠れている
JavaScript で値が書き換わっても書き換わらなくても CSS の詳細度を強くして必ず表示されるようにするのが簡単です。
・子階層がインデントされてない
簡単なのは
.sub-menuをずらすことでしょうか。widget_nav_menu .sub-menu { margin-left: 1rem; }みたいな。
インデントだけでもとCSSを見ましたが、複雑すぎてわからなかったです。
サブメニュー部分で CSS が当たっているセレクタは
–
.widget_nav_menu .sub-menu[data-is-hidden=false]
–.widget_nav_menu .sub-menu
–.widget_nav_menu ul
–ulの4つなので、個人的にはそれほど複雑ではない箇所に思えますが、具体的にどの部分を見られて複雑だと感じたのは、具体的にどのような CSS を書いたけど効かなかったかを書いてもらったほうがなぜそれが効かなかったのかをアドバイスできるので、できるだけ詳しく書いてみてください。
いいねをした人: 居ませんインデントだけでもとCSSを見ましたが、複雑すぎてわからなかったです。
子階層が最初かくれてるのはJavaScript実装なのかCSSのみで実装か知りたいですデベロッパーツールを開いて、開閉ボタンにフォーカスし、開閉ボタンをクリックしてみてください。すると
data-is-expandedやdata-is-hiddenが書き換わっているのがわかると思います。このような HTML の書き換えは CSS では実現できません。つまり JavaScript で書き換えています。ただ、HTML を書き換えるのは JavaScript ですが、それに応じて見た目を変化させるのは CSS になります。・子階層が最初は隠れている
JavaScript で値が書き換わっても書き換わらなくても CSS の詳細度を強くして必ず表示されるようにするのが簡単です。
・子階層がインデントされてない
簡単なのは
.sub-menuをずらすことでしょうか。widget_nav_menu .sub-menu { margin-left: 1rem; }みたいな。
インデントだけでもとCSSを見ましたが、複雑すぎてわからなかったです。
サブメニュー部分で CSS が当たっているセレクタは
–
.widget_nav_menu .sub-menu[data-is-hidden=false]
–.widget_nav_menu .sub-menu
–.widget_nav_menu ul
–ulの4つなので、個人的にはそれほど複雑ではない箇所に思えますが、具体的にどの部分を見られて複雑だと感じたのは、具体的にどのような CSS を書いたけど効かなかったかを書いてもらったほうがなぜそれが効かなかったのかをアドバイスできるので、できるだけ詳しく書いてみてください。
いいねをした人: 居ませんとのことですが、最終的にどのようなサイドバーが表示されるのが理想なのでしょうか？
シンプルにUI/LIで階層化した書籍の目次のようなものです。（実際は保険のマニュアルです）
使い勝手のよいHTMLになるようにカスタムメニューをショートコード化できるようにして、
ショートコードですね。以前やったことはあるのですが、完全にわすれてしまいました。ショートコード化する意味はなんでしょう？ メニューにいれるならメニューブロックをウイジットに追加するだけでいけるとおもうのですが….
いいねをした人: 居ませんつまり JavaScript で書き換えています。ただ、HTML を書き換えるのは JavaScript ですが、それに応じて見た目を変化させるのは CSS になります。
ですよね。やっぱりJavaScriptが絡んでるのですね。でもJSの開閉にかかわらず。CSSを開く状態に上書きすれば、最初から開くことができるのですね（具体的にどうすれば開いたままにできるのか少し悩んでみます
具体的にどのような CSS を書いたけど効かなかったかを書いてもらったほうがなぜそれが効かなかったのかをアドバイスできるので、できるだけ詳しく書いてみてください。
開発ツールでCSSを無効にしたり有効にしたりで変化をみてたけなのです。
そもそもdata-is-expanded や data-is-hiddenの書き方（date何ちゃら？）みたことはあるけどいじるのはじめてでわからなかったのと、いま開発ツールをひらいたら以外とシンプルなのですが、最初ひらいたとき、やたらカンマ区切りでクラスが並列になってると事が開き、どれに上書きすればいいのかがわからなかったのです。やってみたのは、ul { padding:20px } ぐらいで、いっきにpadding出来ないかなって試したぐらいでした
ul>li はpaddingなし ul>li>ul>li はpadding-left:20px ul>li>ul>li>ul>li はpadding-left:40px>はいい加減ですが、こういことになればいいのですが、liのクラスが
class="menu-item menu-item-type-post_type menu-item-object-page current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor menu-item-has-children menu-item-2096"と、クラスがいっぱいだったので、どれに上書きすればよいのかわからなかったのですが、
子階層もふくめてmenu-itemが書いてあるのでこれでいいのかなとただ開発ツールにある
blockquote, body, dd, dl, dt, fieldset, figure, h1, h2, h3, h4, h5, h6, hr, html, iframe, legend, li, ol, p, pre, table, ul { margin: 0; padding: 0; }も書き換えないとなのかなとか考えてました
一応、サイドメニューは固定ページリストを使う方向になりそうなので、のちほどメニューは後学のためスタイルいじって見ます。
いいねをした人: 居ませんショートコード化する意味はなんでしょう？ メニューにいれるならメニューブロックをウイジットに追加するだけでいけるとおもうのですが….
メニューブロックや旧来のナビゲーションメニューウィジェットだと（意図したHTMLになっていないため）カスタマイズが面倒になるので、シンプルなHTML構造にしてテーマの影響（CSSなど）を受けにくくするためです。
カスタムメニューで作成するので、不要なページや追加したいページも編集がしやすいです。
また、ショートコードにしておくと、別の場所（例えばサイドバーのないサイトマップページとか）でも使い回しができたりするので、便利なこともあります。
という1つのアイディアです(^^いいねをした人:CSSを開く状態に上書きすれば、最初から開くことができるのですね（具体的にどうすれば開いたままにできるのか少し悩んでみます
.sub-menuにフォーカスした状態でデベロッパーツールを開き、開閉ボタンをクリックすると.sub-menuのdisplayが切り替わっているのがわかると思います。なので開いていようが閉じていようが絶対にdisplay: blockにすることで開きっぱなしになります。.widget_nav_menu .sub-menu { display: block !important; }最初ひらいたとき、やたらカンマ区切りでクラスが並列になってると事が開き、どれに上書きすればいいのかがわからなかったのです。
全部 WordPress がデフォルトで吐き出す class なので、クラス名から判断したり（
menu-item-has-childrenだったら子がいるからついてるんだなとか）、他のメニュー項目と比較して判断する感じかなと思います。僕も全て把握しているわけではないのでソースコードを読んで調べることもあります。ただ開発ツールにある
blockquote, body, dd, dl, dt, fieldset, figure, h1, h2, h3, h4, h5, h6, hr, html, iframe, legend, li, ol, p, pre, table, ul { margin: 0; padding: 0; }も書き換えないとなのかなとか考えてました
それは書き換えてはダメです。すべての要素の margin と padding をリセットするためにあるので。この辺は Snow Monkey というより CSS の基礎的な話になってくるので、リセット CSS とか、セレクタとか、そういう単語をググって CSS の基礎を頭に入れておくと良いかもしれませんね。
GONSY さんが書かれているようにカスタムメニューを使ったほうが、ウィジェットを直接使うよりは既存の CSS に惑わされることがないと思うので、それも一度試してみると良いかと思います。
いいねをした人: 居ませんいろいろコメントありがとうございます
別スレでコメントしたので短めにいたしますリセットcssをいじろうかとしたのは、自分がリセット派ではない（ノーマライズ派）で
リセットすることでデフォルトマージンが消えてしまい残念な感じになるのが嫌い
だったのです 対象部位だけ例外扱い出来ないかなって思った次第です。再利用ブロックとショートコードで固定ページを表示する方法を指南いただき
ましたので、その方法をつかうことを念頭に検討していきますいったん、このトピック閉じますね
よろしくお願いいたしますいいねをした人:リセットすることでデフォルトマージンが消えてしまい残念な感じになるのが嫌い
だったのです 対象部位だけ例外扱い出来ないかなって思った次第です。ここだけ補足すると、基本的に CSS は「追加/上書き」しかできません。すでに当たっているスタイルを一部対象外にするというようなことはできないんです。CSS ファイルの読み込み自体をなくして全部自分でゼロから書けば別ですが…（ちなみに bbPress Support は bbPress の CSS を全部はずして自分でゼロから書いています）。
そして「デフォルトマージンが消えてしまい残念な感じに」にならないように、一旦全部リセットしたあとで ul と ol、li は margin と padding を再設定しています。CSS はそういうふうに構造化して「上書き」をしていくことでデザインを調整していくものなので、デベロッパーツールでどのセレクタにどのような CSS が当たっている（一番優先されている）かを確認して、同じセレクタで上書きしてみるのがまずはベターだなと思います。
いいねをした人: 居ません
- トピック「マニュアルサイトのサイドバーメニュー」には新しい返信をつけることはできません。