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

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

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

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

Q&A

解決済

1回答

1043閲覧

WordPressのスマホ画面のメニュー表記について

Miken_work

総合スコア34

WordPress

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

0グッド

0クリップ

投稿2020/01/21 01:44

編集2020/01/21 02:47

外観>メニューからグローバルメニューを作成しナビゲーション上部エリアに設置しています。
スマホで見ると左上に表示(画像1参照)されております。
こちらにMENUというテキストを表示させたい(画像2参照)と思っております。

画像1
画像1

画像2
イメージ説明

##起こっている問題
調べてみてもメニューの中のテキスト変更の方法や別のナビゲーションメニューの変更方法が出るばかりでどこを編集すればいいのかがわかりません。

分かる方がいらっしゃいましたら教えてください。

##スペック
Windows10 64bit
GoogleChrome
WordPress ver5.3.2

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

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

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

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

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

hatena19

2020/01/21 01:51

WordPressのテーマは何を使ってますか。
Miken_work

2020/01/21 01:54

Lightningの子テーマを作成し、利用しています。
guest

回答1

0

ベストアンサー

テーマのカスタマイズで設定できないものは、追加CSSにCSSコードを追加してカスタマイズします。

まずは、ブラウザのデベロッパーツールでどのようなHTML構成でどのようなCSSが設定してあるかを検証します。Chromeの場合の使い方は下記を参照。「デベロッパーツール」でググれば他にも解説サイトがみつかります。

初心者向け!Chromeの検証機能(デベロッパーツール)の使い方

検証してみると、メニューのHTMLは下記のようになっています。

html

1<div class="vk-mobile-nav-menu-btn">MENU</div>

vk-mobile-nav-menu-btnクラス属性が付加されてますので、CSSでそのクラスに対して設定すればカスタマイズできます。CSSは下記のようになっています。

css

1.vk-mobile-nav-menu-btn { 2 position: fixed; 3 top: 5px; 4 left: 5px; 5 z-index: 2100; 6 overflow: hidden; 7 border: 1px solid #333; 8 border-radius: 2px; 9 width: 34px; 10 height: 34px; 11 cursor: pointer; 12 text-indent: -9999px; 13 background: url(../../inc/vk-mobile-nav/package/images/vk-menu-btn-black.svg) center 50% no-repeat; 14 background-size: 24px 24px; 15 -webkit-transition: border-color .5s ease-out; 16 transition: border-color .5s ease-out; 17}

CSSをカスタマイズするには「追加CSS」に独自のCSSを追加します。
とりあえず追加CSSに下記のCSSを追加してみてください。

css

1.vk-mobile-nav-menu-btn { 2 text-indent: 2px; 3 font-size: 10px; 4 line-height: 55px; 5 background-position: top; 6 background-size: 22px 22px; 7}

これで三本線の下に「MENU」が表示されます。
やっていることは、HTMLにある「MENU」をtext-indent: -9999px;で範囲外に移動させて非表示にてしているのをtext-indent: 2px;で範囲内に戻します。
あとは、line-height: 55px;で垂直位置を調整します。
三本線はSVG画像で表示していますが、background-position: top;で上部に移動させます。サイズもbackground-size: 22px 22px;で少し小さくします。

メニューをクリックして×マークになったときの位置とサイズも下記のCSSを追加して設定します。

css

1.vk-mobile-nav-menu-btn.menu-open { 2 background-position: top; 3 background-size: 22px 22px; 4}

こんな感じでカスタマイズしていきます。
この手のカスタマイズはHTMLとCSSの知識が必須ですね。それがあればかなり自由にカスタマイズできます。

投稿2020/01/21 02:52

hatena19

総合スコア33620

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

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

Miken_work

2020/01/22 01:02

ありがとうございます。 無事解決できました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問