[ 解決済 ] Smaveksiveサンプル工務店のテーマにおいて、スタイル変更 トグルボタン押下したあとの展開されるメニューの背景色のカスタマイズ
[ 解決済 ] Smaveksiveサンプル工務店のテーマにおいて、スタイル変更 トグルボタン押下したあとの展開されるメニューの背景色のカスタマイズ
- このトピックには15件の返信、5人の参加者があり、最後に
により1週前に更新されました。
-
投稿
-
■ WordPress のバージョン
wordpress7.1■ テーマ・プラグインは全て最新版で確認してください。
確認しました。■ テーマの種類
その他■ プラグインの種類・バージョン
Admin Columns
Admin Menu Editor
Advanced Custom Fields PRO
All-in-One WP Migration and Backup
All-in-One WP Migration OneDrive Extension
Announce from the Dashboard
Auto Login for Sakura Rental Server
Category Order and Taxonomy Terms Order
Contact Form 7
Create Block Theme
Enable Media Replace
Enable Navigation Icons
t PHP Code Snippet を選択
Insert PHP Code Snippet
Krc Cast Manager
SEO SIMPLE PACK
Simple Page Ordering
VK All in One Expansion Unit
VK Block Patterns
VK Blocks Pro
VK Dynamic If Block
VK FullSite Installer
VK Plugin List
WP Multibyte Patch
WP Super Cache
Yoast Duplicate Post■ 期待する動作
1.トグルボタン押下あとメニューの背景を濃色に変更
2.トグルボタン押下あとメニュー下部にロゴや電話番号、SNS情報などのコンテンツ設置
3.×ボタンをもっと大きくしたい■ 自分で試した事
パターン＞一般＞wp-custom-part
でトグルボタンを押すと出てくるwp-custom-part・テンプレートパーツの中のトグルボタンを押すと
テンプレートパーツ＞固定表示_ナビゲーション＞横並び＞縦積み＞ヘッダー メニューの画面で右側のスタイルから色：背景で濃色を選択して保存するとトグルボタンの背景が濃色に代わるだけで、目的の部分の背景は白のままで、あとはどこを設定すればわからず…。スタイルをデフォルトに戻すと濃緑の背景に白色文字メニューに戻ります。
■ 症状が発生するブラウザ
googleChrome■ 実際の症状
ダッシュボード＞外観＞エディター＞スタイル＞スタイル一覧へ＞で６個のスタイル中、右下のブラウン系のスタイルを選択し反映させると、トグルメニューを展開した背景が真っ白になり、文字色が白のため可視できません。
1.どこを設定するとトグルメニューを展開した背景色を変更できるでしょうか
2.トグルボタンを展開したときに画面いっぱいに広がるメニューにロゴや電話番号、SNS情報なども設置したいのですが、＋ボタンで追加していくと、PCで見たときに左側に展開するメニューにも出現してしまいます。トグルボタンを押したときにだけ出てくる画面いっぱいに広がるメニューの中だけで表示させたいです
ご存じの方ご教授お願いいたします
Q. 背景色を変更できるでしょうか
[ダッシュボード] → [外観] → [エディター] → [パターン] → [テンプレートパーツ一覧] → [ヘッダーメニュー] と進んで、サブメニューとオーバーレイ背景 を変更します。（添付画像 smaveksive-1 を参照）
Q. ロゴや電話番号、SNS情報なども設置したい
[ダッシュボード] → [外観] → [エディター] → [ナビゲーション] → [ヘッダーメニュー] と進んで、ヘッダーメニューを複製します。（添付画像 smaveksive-2 を参照）
[ダッシュボード] → [外観] → [エディター] → [パターン] → [テンプレートパーツ一覧] → [ヘッダーメニュー] と進んで、メニューを複製したものに切り替えます。（添付画像 smaveksive-3 を参照）
対馬様
ありがとうございます＞Q. 背景色を変更できるでしょうか
＞
＞[ダッシュボード] → [外観] → [エディター] → [パターン] → [テンプレートパーツ一覧] → [ヘッダーメニュー] と
＞進んで、サブメニューとオーバーレイ背景 を変更します。（添付画像 smaveksive-1 を参照）こちらはご教授いただいたとおりに変更することができました
＞Q. ロゴや電話番号、SNS情報なども設置したい
＞[ダッシュボード] → [外観] → [エディター] → [ナビゲーション] → [ヘッダーメニュー] と進んで、
＞ヘッダーメニューを複製します。（添付画像 smaveksive-2 を参照）
＞[ダッシュボード] → [外観] → [エディター] → [パターン] → [テンプレートパーツ一覧] → [ヘッダーメニュー]
＞と進んで、メニューを複製したものに切り替えます。（添付画像 smaveksive-3 を参照）複製したもの「ヘッダー メニュー(コピー)」に設定することはできましたが、この先、縦型メニューのコンテンツはどう設定したら「電話番号」や「ロゴ」「×閉じるボタンの大きさ」を変更できる設定画面にいけるでしょうか。
ヘッダーメニュー(コピー)の三本戦をクリックすると縦型メニューの画面にはなります。そこの画面で＋ボタンからロゴを選択し手保存するとPC画面で表示される左側のメニューにもロゴが表示されてしまいます。×ボタンはクリックすると閉じてしまいます。お忙しいところ恐れ入りますがお教えいただければと思います。
本当にありがとうございますQ. どう設定したら「電話番号」や「ロゴ」を変更できる設定画面にいけるでしょうか。
添付画像 smaveksive-4 をご参照ください。
① → ② の順にクリックして電話番号とロゴを追加します。Q. どう設定したら「×閉じるボタンの大きさ」を変更できる設定画面にいけるでしょうか。
ボタンの大きさを設定する画面は存在せず、以下の例のような CSS を記述する必要があります。
body .wp-block-navigation__responsive-container-close svg { height: 50px; width: 50px; }お世話になっております。
＞ボタンの大きさを設定する画面は存在せず、以下の例のような CSS を記述する必要があります。
こちらにつきましては、理解いたしました。
オリジナルですと×ボタンが小さく、且つ最上部上端に位置しているためエンドユーザーにわかりにくいように思えましたので…。＞どう設定したら「電話番号」や「ロゴ」を変更できる設定画面にいけるでしょうか。
こちらにつきまして、ご指導いただいた設定を試してみましたが、添付画像のようにPCの左ペインに出てきてしまいます。CSSで非表示にするしかないでしょうか？
Q. 添付画像のようにPCの左ペインに出てきてしまいます。
おそらく、複製したヘッダーメニューに切り替える作業が完了していないのだと思います。
昨日の添付画像 smaveksive-3 を参照して、複製したヘッダーメニューに切り替わっているか確認してみてください。
ヘッダーメニュー(コピー)に設定されていると思うのですが、何がいけないのでしょう
ヘッダーメニュー · テンプレートパーツ
ではなく
wp-custom-part · テンプレートパーツ
になっているのがいけないのでしょうかそもそもパターン＞テンプレートパーツ一覧の中には10あり
wp-custom-part
footer
smaponsive-blank
sidebar2
sidebar
breadscram
Loop Archive
Header
Header Loop Mobile Navi
smaponsive-initial-header-footerとなり日本語名称「ヘッダーメニュー」はございませんでしたが、名称がちがうだけでロゴとトグルメニューがスクショでみてとれましたので当該ファイルを編集した次第です
私の SmaVeksive サイトのテンプレートパーツ一覧には
添付画像のように9個が表示されています。アップされた画像を見ると、
SmaVeksive の子テーマを作っているように思いますが、
私はブロックテーマの子テーマの挙動については詳しくないので、
どなたかわかる方の回答をお待ちください。X-T9 で子テーマを使ったときに挙動が把握できず扱いづらかったので、
それ以来、私はブロックテーマでは子テーマを使わないようにしています。お世話になっております
＞アップされた画像を見ると、
＞SmaVeksive の子テーマを作っているように思いますが、
＞私はブロックテーマの子テーマの挙動については詳しくないので、
＞どなたかわかる方の回答をお待ちください。ご指摘の通り子テーマを作ってカスタム投稿のカスタマイズを行っております。
＞X-T9 で子テーマを使ったときに挙動が把握できず扱いづらかった
いままでLightningをカスタマイズしてきましたが、ワードプレス.1にバージョンアップした際に、思い切ってブロックテーマのテーマを触っている次第です。対馬さんでさえ「使いづらかった」と言われるのであれば、わたし程度ではもうお手上げです。
Smaveksiveではブロックテーマの利点であるボタンひとつでカラースタイルを一新できる機能がございますが、インストール直後のスタイル変更でもトグルボタンは同色化してしまいます。運営の方、お手隙の際に確認していただければと思います。
対馬様、ご教授に心から感謝申し上げます。
横からすみません。
Smaveksiveではブロックテーマの利点であるボタンひとつでカラースタイルを一新できる機能がございますが、インストール直後のスタイル変更でもトグルボタンは同色化してしまいます。運営の方、お手隙の際に確認していただければと思います。
こちらですが、プリセット側の不具合と思われます。
該当箇所にはvar:preset|color|bg-tertiaryという値が当たっていますが、該当の値がおそらく設定されていないので、指定なし＝全体設定通りの値になってしまいます。webfactoryjp様
添付画像の赤枠箇所にお電話番号等表示させたいということでよろしいでしょうか？
もしそうであるならば、現状では独自での実装が必要になります（WordPressのメニューブロックのデフォルト機能であるシンプルな見た目の方になっているためです）。Smaveksiveでは、X-T9の「ナビゲーションオーバーレイ」を使用しているテンプレートパーツがまだ採用されていません。
恐れ入りますが、「ナビゲーションオーバーレイ」について独自でお調べいただくか、実装いただけるかお待ちいただけますでしょうか。—-
対馬 様
本件については子テーマかどうかは関係ないですね。
親テーマでも簡単に再現可能です。webfactoryjpさま
ご指導いただいた設定を試してみましたが、添付画像のようにPCの左ペインに出てきてしまいます。CSSで非表示にするしかないでしょうか？
こちらの件についてです。
PC表示の左ペインは「Header」テンプレートパーツで、その中にもナビゲーションブロックがあります。このナビゲーションブロックが、複製した「ヘッダー メニュー (コピー)」を表示しているため、トグルメニュー用に追加したロゴなどが左ペインにも出てしまっている可能性があります。
（ナビゲーションブロックは、表示するメニューが明示的に指定されていないと、最も新しく作成されたメニューを表示します。そのため、メニューを複製した時点でコピーの方が表示されるようになったのだと思います。）
以下の手順で、左ペイン側のメニューを元の「ヘッダー メニュー」に指定し直してみてください。
[ダッシュボード] → [外観] → [エディター] → [パターン] → [テンプレートパーツ一覧] → [Header] と進みます。（添付画像 smaveksive-template-header を参照）
リストビューで [カバー] → [グループ] → [縦積み] → [グループ] → [ヘッダー メニュー] を選択します。
右サイドバーの「︙」をクリックして、元の「ヘッダー メニュー」を選択し、保存します。（添付画像 smaveksive-pc-navi を参照）
※ すでにチェックが付いている場合も、一度選択し直してください。これで、左ペインには元の「ヘッダー メニュー」、トグルボタンで展開されるメニューには「ヘッダー メニュー (コピー)」が表示されるようになるはずです。
見当違いのことを言っていたら申し訳ありません。
一度ご確認よろしくお願いいたします。> 本件については子テーマかどうかは関係ないですね。
ご指摘の通り、X-T9 のようにブロックを自由に組み合わせて
メニューを構成することはできませんが、
ご質問者が希望されているロゴ・電話番号・SNS情報であれば、
SmaVeksive（ナビゲーションブロック）でも可能です。ロゴ: サイトロゴを使用
電話番号: ボタンを使用
SNS情報: ソーシャルアイコンを使用 ← アイコンが複数だと CSS を書く必要あり
【以下、追記（訂正）です】
> X-T9 のようにブロックを自由に組み合わせてメニューを構成することはできませんが…
SmaVeksive でもできそうですね。失礼しました。
- このトピックに返信するにはログインが必要です。
