フォーラムへの返信
-
投稿者投稿
-
横から失礼します。
他に挙げられているトピックも拝見しているのですが、Web制作全般とまでは言いませんが、ことCSSに関してWordPressもしくはSnow Monkeyをカスタマイズするための前提知識が少々足りていないような気がします。
このフォーラムはSnow MonkeyユーザーがSnow Monkeyに関するプロダクト(関連プラグインも含む)について、他のユーザーに意見を求める場所ですので、基本的なWeb制作方法のレクチャーをもらう場所ではない、という認識を僕は持っています。
(このトピックを拝見する限り、Snow Monkeyに関する問題ではなく、ブロックエディタとCSSの問題と感じました)
keiproさんは、もしかしたら現在学習中なのかもしれません。Web制作に最低限必要な知識は様々なリソースがインターネット上にありますので、それらを活用していただいたり、もしオンラインサロンなどを利用されて学習されてるのであればそちらで質問していただくなりした方が良いかと感じました。
ぜひCSSなどの基礎知識をご確認いただいて、今後ともSnow Monkeyを楽しんでください!
♥ 0Who liked: No user追記:あくつさん書かれているので削除しときます。(トピック訳の兼ね合いで)
♥ 2Who liked: No userSnow MonkeyとSnow Monkey Blocksを普通に使う形では実現は難しいと感じます。また、ここはSnow Monkey公式フォーラムですので、アドバイス差し上げることが適切かどうか判断が難しいので、個人的な実現イメージだけ共有しておきますね。
@キタジマタカシ 氏 不適切であれば削除していただいて大丈夫です。
色々なアプローチが存在すると思いますが、僕の思いつきアイデアを共有します。
### 発生している問題
・使うべきブロックがわからない
・テキストとアイコンを併記させる方法がわからない
使うべきブロックですが、方法の一つとして「カラムブロック」でも良いかもしれません。よりカラムブロックを管理したい場合には、外側にグループブロックでラップしてCSSクラスを付与しても良いでしょう。
「テキストとアイコン」ですが、こちらはグループブロックでラップしてCSSクラスを付与し、見出しブロック(CSSクラス付与してスタイル追記)とカスタムHTMLブロックor画像ブロックでアイコンを配置して
position: absolute;
でコントロールする感じでしょうか。♥ 2Who liked: No user実際のサイトの構造を見ないと確実なことは言えませんが、
葉っぱのアクセントをCSSの記述で挿入できないかと試してみました
.l-header{ background-image:url(ファイルの場所);}
これで背景に画像を入れるということは可能でしょう。あとは、
background-position
などなど利用して希望する場所に配置する流れるになるかと思います。上段のカラーが変更できないかCSSの記述で試してみました
.l-header{background-color:#ffffff;}
これに加え、top、padding、marginなどの記述で幅を調整したりしていますが、上手く調整できない状況です。
これだと、ヘッダー全体の背景色を変えることになると思います。
①添付画像の見本のようにロゴ周りの背景を白くしたいが変更できない
ロゴの周りをということであれば、
c-site-branding
付近の良さそうにCSSクラスに背景色を指定して調整するなどの方が、ご希望されている見た目に近くなるかもしれません。(ヘッダー全体の背景色を変えたいのであればl-header
でも良いと思います)ご確認くださいませー。
♥ 0Who liked: No userもしかしたら、mayuさんは学習過程なのかもしれないと思い、あえて答えは出さずにヒントだけ提供してみますね。
Snow Monkey Blocksのスライダーは、キタジマ氏が自身で開発したプラグインを採用しています。
inc2734/spiderContribute to inc2734/spider development by creating an account on GitHub.github.comそちらのDOM構造ですが、簡単にご説明すると、
.wp-block-snow-monkey-blocks-spider-slider
の中に.spider
という囲いがあり、その中に.spider__canvas
や.spider__dots
といった、画像部分やドット(もしくはサムネイル)部分が用意されています。画像部分は
.spider__canvas
になるのですが、この中にspider__slide
があり、その中にトピックに書いてある.spider__figure
というimg
タグの画像が配置されています。しかし、挑戦されたように
.spider__figure
をいじっても高さは変更することはできません。なぜなら、.spider__figure
を.spider__slide
で囲ってあり、それらを.spider__canvas
でよしなに切り取っているような作りになっています。ですので、一番外枠の
.spider__canvas
をちょっとごにょごにょしてみると幸せになれるかもしれません。ぜひ挑戦してみてください。
♥ 1Who liked: No user詳細情報ありがとうございます。
こちらでも同様の条件でテストしてみましたが、確かに同じ事象が確認できました。応急処置的にはCSSで隠してしまうことは可能かと思いますが、根本的な解決には至らないので @キタジマタカシ 氏の意見も聞いてみましょう。仕様なのかバグなのかの判断も聞けると思います。
明日には何かしらのレスポンスが得られるかと思います。(週末はみなさん休業が多いので…)少々お待ちくださいませ。
♥ 1Who liked: No user確認しました!対応ありがとうございました!閉じます!
♥ 1Who liked: No userこんばんは!
現状、色々と試されたご様子ですので、以下の情報を追加で頂けますでしょうか?
- 追加CSSに追加されたコード
- こちら公開されているURL
CSSでなんとかなるかもしれませんが、どのようにして現状作られているのか確認できないとアドバイスを差し上げることが難しそうです。
ご確認お願いいたします。
♥ 0Who liked: No user管理画面【外観】→【カスタマイズ】→【デザイン】→【ヘッダー】の中で、ヘッダー位置の設定はお試しになりましたか?
また、
グローバルナビゲーションがノーマルの状態を維持したい。
ノーマルの状態の認識を画像などで共有していただけると分かりやすいです。(人によって変わってきてしまう可能性があるので)
加えて、現状の設定内容を共有頂けますと幸いです。
♥ 0Who liked: No userヘッダーが表示されるレイアウトではお知らせバーを使えると嬉しいですね!
プレーンなランディングページには必要なら自分で付けられますしね!
♥ 0Who liked: No user@アクツ さん
情報ありがとうございます!
僕も少し検証してみたら、表示されたりされなかったりという感じで、どうも投稿テンプレートの「ランディングページ(ヘッダー・フッターあり)」が怪しいなぁ〜というところで放置して仕事に戻ってしまいましたw♥ 1Who liked: No user@キタジマタカシ 氏
まったく同じコードを「カスタム HTML ブロック」に貼り付けてみたところ、正しく動作しました。おそらくコードエディターにはりつけたというところが問題なのではないかと思います。カスタム HTML ブロックに貼り付けてみてください。
そういうことだったんですねw 「カスタムHTMLブロックの中のコードエディター」に入力されているものとばっかり…
@masalll さん
My Snow Monkeyの使い方My Snow Monkeyでショートコードの用意の仕方
ここら辺が参考になるかもしれません。
♥ 0Who liked: No user実際に開発者ツールで見ないと断定はできませんが、これは罫線ではなくこのメニュー項目にフォーカスが当たってアウトラインが表示されているだけではないですか?
tabなどを押してみると消えたりしませんかね?
♥ 1Who liked: No userちょっと状況を再現ができませんが、コード上部のHTML部分はコードブロックで、JS部分はこちらのプラグインなどで呼んでみてはどうでしょうか?
My Snow Monkeyで読むのも良いとは思います。
♥ 0Who liked: No userこんにちわ!
固定ページでコードエディターの中にHTMLを入力してjavascriptを入れたいのですが全く表示されません。
実際に入れている状態のスクリーンショットと、入力されているソースコードの共有は可能でしょうか?現状がどんな状況なのかもう少し把握できると嬉しいです!
ご確認お願いいたします!
♥ 0Who liked: No user -
投稿者投稿