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

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

ただいまの
回答率

87.80%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 271

score 34

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

画像1
画像1

画像2
イメージ説明

起こっている問題

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

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

スペック

Windows10 64bit
GoogleChrome
WordPress ver5.3.2

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • hatena19

    2020/01/21 10:51

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

    キャンセル

  • Miken_work

    2020/01/21 10:54

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

    キャンセル

回答 1

checkベストアンサー

+2

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

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

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

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

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

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

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


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

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


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

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/01/22 10:02

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

    キャンセル

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

  • ただいまの回答率 87.80%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る