質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

1回答

1154閲覧

wordpressのサブメニューを1つだけ3列で表示したい

machi0425

総合スコア0

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/05/19 06:00

前提・実現したいこと

wordpressでlightningテーマを利用して作っています。
ナビゲーションの子メニューが多いのでドロップダウンで3カラムにしたいです。
CSSで子メニューがあるもの全てを3カラムのドロップダウンにすることはできたのですが、
文字数の関係等で、5つあるメインメニューのうち、1つだけ3カラムのドロップダウン子メニューにできる方法を探しています。

発生している問題・エラーメッセージ

なし

該当のソースコード

HTMLは下記のようになっています。

<div id="gMenu_outer" class="gMenu_outer"> <nav class="menu-8-container"><ul id="menu-8" class="menu gMenu vk-menu-acc vk-menu-acc-active"><li id="menu-item-3409" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home"><a href="http://test.net"><strong class="gMenu_name">ホーム</strong></a></li> <li id="menu-item-3431" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children"><a href="http://test.net/about-2/"><strong class="gMenu_name">紹介</strong></a> <span class="acc-btn acc-btn-open"></span><ul class="sub-menu acc-child-close"> <li id="menu-item-3662" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://test.net/%b6/">挨拶</a></li> <li id="menu-item-3667" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://test.net/%93%/">about</a></li> </ul> </li> <li id="menu-item-3434" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://test.net/3%87/"><strong class="gMenu_name">お話</strong></a></li> <li id="menu-item-3436" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://test.net/1%/"><strong class="gMenu_name">お問い合せ</strong></a></li> <li id="menu-item-3766" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children"><a href="#"><strong class="gMenu_name">リスト</strong></a> <span class="acc-btn acc-btn-open"></span><ul class="sub-menu acc-child-close"> <li id="menu-item-3891" class="menu-item menu-item-type-custom menu-item-object-custom"><a target="_blank" href="https://rrrrrr.com">子メニュー1</a></li> <li id="menu-item-3767" class="menu-item menu-item-type-custom menu-item-object-custom"><a target="_blank" href="http://www.rrrrrr.com/">子メニュー2</a></li> <li id="menu-item-3768" class="menu-item menu-item-type-custom menu-item-object-custom"><a target="_blank" href="http://www.rrrrrr.com">子メニュー3</a></li> <li id="menu-item-3769" class="menu-item menu-item-type-custom menu-item-object-custom"><a target="_blank" href="http://www.rrrrrr.com">子メニュー4</a></li> <li id="menu-item-3770" class="menu-item menu-item-type-custom menu-item-object-custom"><a target="_blank" href="http://www.rrrrrr.com">子メニュー5</a></li> <li id="menu-item-3771" class="menu-item menu-item-type-custom menu-item-object-custom"><a target="_blank" href="http://www.rrrrrr.com">子メニュー6</a></li> </ul> </li> </nav></div>

現状CSSはこうしてみました。

.sub-menu{
column-count: 3
}

これだとサブメニューが全部3列になってしまいます。
wordpressのメニュー作成時に3列にしたいメニューのclassを3colとつけました。
このclass名だけ3列のサブメニューにすることは可能でしょうか。

補足情報(FW/ツールのバージョンなど)

lightning 子テーマ

ここにより詳細な情報を記載してください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

よくわからないですが、

.3col{
column-count: 3
}
.1col{
column-count: 1
}

を追加したらダメですか

投稿2021/11/03 14:08

imaiyumi

総合スコア7

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問