Q&A
cssの件承知いたしました。ありがとうございます。
ドロップダウンではなく、初期状態で2行並んでいるようなメニューでもcssを使用するのがよろしいでしょうか。途中で改行されているようなイメージです。
開発者ツール等でクラスを確認しつつ高さを変えてみたりもしているのですが、PHP側の指定があるのかどうかわかりませんがcssだけでは突破できない現状です。
実現したいこと
wordpressのヘッダやフッタのグローバルメニューを2段にしたり、高さを修正したいのですが、うまくできません。
どのソースから修正するのが良いでしょうか。
基礎的なことかとは存じますが、御教示願います。
回答2件
0
ベストアンサー
phpテンプレートも触っていく必要があると思います…！
header.phpで、ヘッダーを作ってる箇所があると思いますが、そこの下に二段目の分をマークアップして、カスタムリンクを表示するクラスを付けて、そのクラスのスタイルをcssでつけていく形になると思います
少しだけ参考のコードと画像をおいていきますね
これはあくまでも例ですので、コードはそれぞれテンプレートによっても違うし、書いてあるのはhtmlのみなので、コピペしても動きませんが
genjyou.html
1<!---現状の構造---> 2<!DOCTYPE html> 3<html lang="ja"> 4 <head> 5 <meta charset="utf-8"> 6 <title>現状</title> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 </head> 9 <body> 10 <!----- header-----> 11 <header> 12 <a href="">リンク</a> 13 <a href="">リンク</a> 14 <a href="">リンク</a> 15 <a href="">リンク</a> 16 <a href="">リンク</a> 17 </header> 18 19 </body> 20</html>
genjyou.css
1/* 現状のcss */ 2header { 3 padding:10px; 4 background:red; 5 text-align: right; 6 7} 8header a{ 9 color:white;/* 文字が見やすいようにしているだけです */ 10} 11
mokuhyou.html
1<!--目標のhtml構造--> 2<!DOCTYPE html> 3<html lang="ja"> 4 <head> 5 <meta charset="utf-8"> 6 <title>目標</title> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 </head> 9 <body> 10 <!----- header-----> 11 <header> 12 <!----- 13 headerのなかに、1段目と二段目のdiv等を作る 14ここではgreen-row、blue-rowとしている 15-----> 16 <div class="green-row"> 17 <a href="">リンク</a> 18 <a href="">リンク</a> 19 <a href="">リンク</a> 20 <a href="">リンク</a> 21 <a href="">リンク</a> 22 </div> 23 <div class="blue-row"> 24 <a href="">リンク</a> 25 <a href="">リンク</a> 26 <a href="">リンク</a> 27 </div> 28 </header> 29 30 </body> 31</html>
mokuhyou.css
1/* 目標のcss */ 2header { 3 padding:10px; 4 background:red; 5 text-align: right; 6} 7header div { 8 margin:10px; 9} 10header div.green-row { 11 background:green; 12} 13header div.blue-row { 14 background:blue; 15} 16header a{ 17 color:white; 18}
軽く説明を入れると、
現状はヘッダーが一段ですね
ヘッダー（赤い部分）の中に、リンク（オレンジ）が並んでいます
目標の場合、
ヘッダー（赤）の中で、二段に分けたいので、divでも何でもいいですが、２つのグループに分けます（緑と青）
その中に、それぞれのリンク（オレンジ）が並ぶようにします
これをみてもちんぷんかんぷんな場合は、php・wordpressよりも先に、htmlとcssで目標の形を自力で作れるようになってから、phpのテンプレートタグを勉強して、進めていくとよいですよ
htmlの構造がわかるようになれば、あとはwordpressのループタグで、リンクやカスタムリンクをどうやってループ表示するか調べれば、答えは見つかると思います
応援してます、頑張ってください！
投稿2021/07/05 09:01
総合スコア14
0
デザインはcssから変更します
cssファイルはテーマによってファイル名が違いますので、探してみてください。
cssで作るメニューはコチラが参考になると思います
https://theorthodoxworks.com/web-design/drop-down-menu-multi-css/#dorop-multi
ちなみに高さはheight:●●px;等で指定してあります
ヘッダーやフッターのクラスを探して、高さ等を変更します。
もし初心者ならば、意図しない表示崩れ等が起こる可能性が高いですのでバックアップ等取ってからの作業をお勧めします
投稿2021/07/03 09:29
総合スコア14
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/07/06 02:06