• 解決済 mo2274

    (@mo2274)


    http://mo2274.wp.xdomain.jp

    Twenty Fifteen のテーマでサイトを作りました。
    左側ウィジット内にメインメニューを置いています。ドロップダウンメニューが出るところは文字の右に ^ マークが付いています。

    まず固定ページでメニューを作り、その下の投稿記事に行けるようになっています。

    文字の右の ^ をクリックするとドロップダウンメニューを出せますが、文字部分をクリックするとその固定ページが出てきて、投稿記事に行けません。
    メニューのどこを押してもドロップダウンメニューに行くようにしたいのですが、、、。

    よろしくお願いします。

8件の返信を表示中 - 1 - 8件目 (全8件中)
  • LABE

    (@latobeam)

    CSSだけでいけそうなので書いてみました。
    テーマの style.css に追加してください。
    ※どこに追加するべきかわからなければ、最後に追加してください。

    .dropdown-toggle {
        top: 0;
        z-index: 2;
        width: 100%;
        height: 48px;
        text-align: right;
    }
    @media screen and (min-width: 59.6875em) {
    .dropdown-toggle {
        height: 35px;
    }
    }

    height の値はフォントサイズに依存します。
    フォントサイズが変更された場合、再度調整してください。

    • この返信は7年、 5ヶ月前にLABEが編集しました。理由: 追記
    トピック投稿者 mo2274

    (@mo2274)

    ありがとうございました。
    完璧です!
    私の頭ではどうしてこのプログラムでそうなるのかわかりませんが、少しずつプログラミングを勉強していこうと思っています。全くの独学で大変です。

    トピック投稿者 mo2274

    (@mo2274)

    追加でもう少し教えてください。
    MacBook, iPad, Desktop のサイズでは問題が解決しました。
    ただ、iPhone ではすべての3つのサイズで以前と同じ現象になります。
    ここで教えていただいたプログラムの数字を変えて子テーマ内の ”16.1 Mobile Large 620px” に入れて見たのですが何も変わりません。そこには ”.dropdown-toggle” という言葉は全く出てこなくて私には全く解決できません。独学でやっていますので、よろしくお願いします。

    LABE

    (@latobeam)

    先にお示ししたコードの前半(1〜7行目)は

    @media screen and (min-width: 59.6875em) {
    ....
    }

    の中ではなく外側なのだと明示したつもりでしたが、今見てみるとちゃっかり内側に入っていますね。
    「※どこに追加するべきかわからなければ、最後に追加してください。」とはそのまま追加という意味だったのですが。

    あれからスタイルがいろいろ変わっているようですので、もう一度検証してみました。
    height の値はフォントサイズに依存するので、メディアクエリのブレイクポイントが多いとそれだけ追従しなければならないのです。
    よって、現在の状態では以下のようになろうかと思います。

    .dropdown-toggle {
        top: 0;
        z-index: 2;
        width: 100%;
        height: 48px;
        text-align: right;
    }
    
    @media screen and (min-width: 46.25em) {
        .dropdown-toggle {
            height: 49px;
        }
    }
    
    @media screen and (min-width: 55em) {
        .dropdown-toggle {
            height: 48px;
        }
    }
    
    @media screen and (min-width: 59.6875em) {
        .dropdown-toggle {
            height: 30px;
        }
    }
    
    @media screen and (min-width: 68.75em) {
        .dropdown-toggle {
            height: 34px;
        }
    }
    
    @media screen and (min-width: 77.5em) {
        .dropdown-toggle {
            height: 40px;
        }
    }

    最初の部分(1〜7行目)も含めて、すべての @media の外側にそのまま記述してください。
    CSSファイルの末尾で結構です。
    そして、この部分のフォントサイズやパディングなどが変更されたら、それに合わせて再度調整しなければなりません。

    この方法はかなり“小手先”の手法ですので、本当はもっと効率的な方法を使いたいところですが、変更が大掛かりすぎてちょっとここには書けません。
    思いついた方法だけ、一応書いておきます。

    • <a> 要素のクリックイベントに、トグルボタンのイベントをバインドする
    • <a> 要素の高さを動的に取得して、トグルボタンに反映させる
    • トグルボタンのマークアップを変えてスタイルを指定しやすくする
    • そもそもメニューの使い方がテーマの仕様に合っていない
    トピック投稿者 mo2274

    (@mo2274)

    それぞれの場合の設定を教えていただき、本当に感謝します。
    早速、子テーマの最後にそのままペースとしました。
    iPhone を持っていないので、後日アップルストアに行って確かめてきます。

    プログラミングの言語?を理解するのは大変でサイトを作りながら、少しづつと思っているのですが、、、。時間だけはしっかり使っているのですが、なかなか前に進んでくれません。

    トピック投稿者 mo2274

    (@mo2274)

    iPhone の中サイズを持っている友人に聞いたところ、良くなっているという連絡がありました。当然!だと思いますが、私には大きな前進です。

    CG

    (@du-bist-der-lenz)

    カスタムリンクで良いかもしれない。
    メニュー項目にするだけで固定ページを増やしていくのは、内容のないページにアクセスを受けた場合の処理の必要もあるので、気になるところです。
    カスタムリンクでの試行例

    • この返信は7年、 3ヶ月前にCGが編集しました。理由: 一部説明補足
    トピック投稿者 mo2274

    (@mo2274)

    カスタムリンクの試行例を教えていただきありがとうございます。私にはそのような使い方ができなかったです。いろんなサイトを見てきていますが、ドロップダウンメニューを見るのに、わざわざ^印を目掛けてクリックしないです。多分、Twenty Fifteen のテーマを作った方も、私が私のサイトで使いたいようには開発されていないようですね。

8件の返信を表示中 - 1 - 8件目 (全8件中)
  • トピック「メニュー中のドロップダウンの不都合。」には新たに返信することはできません。